Trello clone with ReactJS and Firebase
Hi, I am Ikhda and I am person who’s learn about Full Stack Programming with JavaScript for now. And in this part I will write about how to make trello clone using ReactJS, ReactStrap and for BackEnd we will use firebase as a service. I hope you can understand about my English haha. Let’s started!
First, we need to create react app with this command in terminal. Go to the documentation of React
create-react-app trello-clone
Then we need to change directory to trello clone and yarn start to see what will react default display in the browser.
Now, we will starting to write code. As you can see right now I opened Visual Studio Code and open the terminal. Now we have App.js in here, what we will do is we need to delete whole of render code and delete the import logo and import app.css
Second step is we need to install ReactStrap, you can go to the documentation of ReactStrap
I use yarn in here, so I will type yarn add reactstrap
If you use NPM, npm install --save reactstrap
Make sure to check your package.json file has a react, react-dom, and reactstrap
Now we can use ReactStrap for styling, for your information we must import what we will use from ReactStrap before, for the example we use CardDeck component for now
Now, for example we type h1 element from JSX. Just call it hello world or something you want.
Now, we try to make fake data for example. Inside of constructor we declare a new state which is have a value of what we want to display like trello.
Hm, let’s try to display this in the browser, so we need to loop this data. Like this
We will see the error from reactstrap, because we don’t import that component yet, so let’s import it.
NOOOOO!! We need to fix this. We forgot something important. Install bootstrap first haha, we can use NPM like docs or yarn add bootstrap
And use bootstrap at Index.js, how to use it ? simple, import it like this, you can see the docs too.
We need to make our code getting better, so we add folder component inside src and make some new file called Data.js or something you want but don’t forget to use capital for the name. And then copy all of App.js to Data.js and change the name of the class to Data okay.
Then, at App.js we need to import our new file and delete all of the code and change it to <Data />
The next step is how to connect our trello clone to firebase, so we need to create new project in the firebase, oh yeah before that we will give placeholder to our card and list, so go back to the Data.js and go to the input tag, give it placeholder=”add a list”
Preparation okay, so we go to firebase
Click Get Started
Then Add Project, so you have a pop up
Give it the name as you want and choose locations for server, I choose US but my country is Indonesia haha, it’s okay. Now click create project
Then click database
So we try to create database
For now, we choose test mode, but don’t use test mode if you build real project because anyone can change your database
Now, go to project overwiew
Then, click logo </> which is describe that we choose web
After that, copy the code
Now, go back to our code editor, and create new folder inside src called firebase and create new file that we can call it index.js. Paste what we copied from firebase, but we need to delete something we don’t need to use. And adding something what we need to use hehe
Now we delete our fake data, and try to make some script that we can add the data to the firebase,
You will see the error, don’t worry about it. We go to stackoverflow haha. Yeah we currently not install it haha npm install --save firebase or yarn add firebase
We need to add componentDidMount and console.log(firebase) first for seeing what value in there
Now we need to add code like this at componentDidMount because we need to display data in firebase to our project. As you see, our database is null
Then we can add code like this, this mean if our database is not null so we will change the state, so our state have a value from firebase. You can do this to your cards as well
Our problems are, how to add some list and card to the firebase, so what will we do is make a function to handle save. So here we go
Let’s try to our project. First we need to make function to handle changing at input tags, add state to be temporary for list name
I got a wrong sorry, so We change the position of input task and list like this
Then, we need to make function which is can save our input text to firebase database
Then on the Button component we must use the function saveList
Yattaaaaa!! we did it
Next task is delete that list, now we must to make function to handle delete
Yeah, we did it. But our code has a bug, if that last list we try to delete, they dont removed on our project but if we check at firebase the database are gone,
So we need to add code at handle delete list
So, let we console.log the length of our dataLists after we delete
You see that ? there are 3 items, but at our firebase we have 2 items, this is the bug
So, try it again
Did you see ? so just add code to our handle delete list like this
If we still have 1 items at our state we force them to array without value, so let’s try again to our project
Yeah, we did it haha. let’s take some rest, drinking or something.
Nah, we got some mistake if we try to delete only the list, that’s the card will not deleted, if you want to try, just delete the list and see it at your firebase database, you will see that your list is deleted but the card still there, so we need to add our code until when we delete the list, the card inside will deleted too.
We go to the _handleDeleteList function and modified our code like this
The logic is when we deleted some list, we will match the key of list with the listKey of the card, and we will delete all of this card only when the key is same.
Now we going to make function for moving the card to another list, right now we will not use drag n drop but we will use button for it, I hope we can make it better sometimes with using dnd, but for now that’s enough for try using button, I am still newbie bro hahaha.
We need to make the button first, we will make it simple and give little logic, if the list only one so that’s button will disabled and if the the list at the first we can’t move card to the left and for the last as well, we can’t move the card to the right. So, here we go!
I’m sorry that I change a little of my code, and this is the result
Then we must to make a function that will handle move cards, the logic is when we move that card to the right so we increment the index by one and also to the left we will decrement the index by one.
And then we will try to run the code, but we got a mistake, our database structure are so confusing
And if we try to move the card we will get a bug like this
As you see that our database has changed, so we will fix it with changing the cards.map and handle save cards, this is currently our code
We will change it to this,
Haha, I am sorry we don’t need to change our map but we need to change little bit at componenDidMount
This is my explanation, we need to see what we have at our databases, that’s why I use console.log at handle save card because I need to know the value, and I got an object so I change key to the key.key because first key is an object and second key is the key name object and I want to get the value not the key name so I change it
After that, I go to componentDidMount and I change myCardFromDatabase[key].cardName.title to myCardFromDatabase[key].cardName, why I can do that ? That’s about how to know what actually the value of our databases, and we use console.log to see that.
And yeah, our trello has done, but not perfect, it’s okay because we can improve it more more and more. Keep learning!
I know that my tutorial is not good to you, because of that I will give you link to the my repository to see what have I done with it, so I f you consfused you can go there and match your code, thank you very much.
