to this blog to receive future updates!
Hello, Happy Coders!
A popular feature of many social media apps such as Reddit and others is the ability for the user to upvote or downvote a post based on whether or not they like it. This can be a tricky feature to add in your own project, so today I'm going to show you a simple and efficient way to add this feature to a web application using React on the frontend and Firebase on the backend. We will also be using TailwindCSS for styling, so I will walk through that as well. If you have been reading my other blogposts, you should be quite familiar with this process by now.
Without further ado, let's get started.
The first step is to create a new project in Firebase.
Go to the Firebase Console and click Add Project.
On the next screen, give your project a name. It can be anything you want.
On the next screen, you can choose whether or not to enable Google Analytics and then click Create Project.
It will take a few moments to create the project. Once it's created, click Continue.
From the dashboard, we need to add a web application by clicking on the web icon.
On the next screen, give your app a name of your choice and then click Register app.
You will then see a screen that looks similar to the screen below.
Leave the screen as is for now. We will come back to it shortly. Time to create a react app.
Open a command prompt or PowerShell and navigate to the folder where you want to create your project. Then type npx create-react-app upvote-downvote-tutorial at the prompt.
After the project is finished initializing, cd into the newly created folder and launch VSCode by typing code . including the '.' at the end.
If you need to install VSCode, go here.
First things first, we need to install some dependencies. Open a new terminal and type the following, pressing enter after each command.
npm install react-router-domnpm install tailwindcssnpm install firebaseThe react-router-dom package will be used to create our routes, the tailwindcss package will be used for styling, and the firebase package will be used to connect to our backend.
Configuring TailwindCSS takes a couple more steps. Refer to this page for further information.
In the terminal, enter the command npx tailwindcss init
This will create a tailwind.config.js file. Open this file and add the following code.
You will also need to go into the index.css file and add the following code.
Of course, if you do not wish to use TailwindCSS for styling, you can skip those steps and style your components however you would like.
Ok, it's finally time to start writing some code. The first step is to create a new file in the src folder in your app. Call the file firebase-config.js and add the following code to it. Note that we are pulling functions from 'firebase/auth' and 'firebase/storage'. These will be for user authentication and accessing cloud storage, respectively.
This file is doing a couple of things as far as connecting to Firebase. First, it's establishing the connection to our Firestore database. And second, it's accessing the necessary functions from the Firebase authentication functions to allow us to create a user authentication with the Google provider.
You will get the values for the firebaseConfig object from the Firebase SDK screen on the firebase console - the screen we paused on above. After you copy and paste these values you can click Continue to console.
If you ever need to access these variables again, you can find them in the project settings.
Next, in the src folder, add a new folder called pages and create the following files.
Dashboard.js
Signin.js
CreatePost.js
Also in the src folder, add a new folder called components and create the following files.
VoteButtons.js
You're completed filetree for your src folder should look something like this.
Ok, before we get any further ahead of ourselves, let's go back to the firebase console and set up our database and our authentication.
Start by clicking on Authentication from the dashboard of your project.
From the next screen, click on Get Started.
On the next screen, you will see the various options for creating user authentication.
We will be using the Google provider for our authentication in this app.
Start by selecting the Google Provider option.
On the next screen, click the slidebar to enable Google authentication. You will need to provide a support email address and then you can click Save.
Ok, now we're ready to create a database to hold all of our image collections. Click on Firestore Database from the menu tree on the left, under the Build menu, and then click Create Database.
Choose Start in Production Mode and click Next.
Then select your location and click Enable.
Once your database has been provisioned, select Start Collection from the main database screen.
Add the name of the collection which will be 'posts' and click Next.
On the next screen, click the button for Auto Id to enable the Save button and then click Save. You should now have a 'posts' collection with an empty document in it.
Next we need to edit the rules for our database and for our cloud storage. For the database, click on the Rules tab in the upper left of the screen and then change the read,write rule from false to what is shown below. Be sure to click Publish when you are done.
Ok, we are finally ready to add the code to our app.
To begin, we will set up our routes in the App.js file to establish the routes for all of our internal web pages. Here is the code for that.
The next thing we will do is build the Sign In page. The first step for that is to add the styling for our Sign In with Google button to the index.css file. Copy and paste the following code.
Next, we can create our Signin.jspage. The code for that is below. Note that it will be a simple line of text and a button that will show a pop up to sign in with Google. The functionality for the button comes from Firebase functions. Also, note that we will be setting a variable called 'isAuth' in localStorage. We will use that to determine if the user has already logged in previously.
Next we will create the CreatePost.js page. Let's discuss what's going on in this file.
First of all, if the user tries to go to this page without the 'isAuth' variable set to true in localStorage, they will be navigated to the Sign In page.
Also, the user must enter a title and a post, which are stored in state, in order to be able to submit their post.
Finally, when the user clicks Create Post, the Title and Post are sent to our Firebase Database as a single document. Note that we are adding emtpy arrays for users that have either upvoted or downvoted the posts. We will use these arrays in our VoteButtons.js file.
Ok, now that we have the CreatePost.js file set, we can focus on the VoteButtons.js file. The code for that is below.
There is a lot going on in this file. First of all, we want to be able to toggle an upvote or downvote for each user and set the fill color of our upvote and downvote buttons based on the user's click. This requires three pieces of state for each upvote and downvote. The first piece of state toggles the vote, the second sets the fill color, and the third sets whether or not the user has already voted and prevents them from voting again. If the user has upvoted, they will not be able to downvote the same post or upvote the post a second time. The same is true if the user downvotes a post. They will then not be allowed to upvote the same post or downvote again.
Once the user votes, the corresponding array for upvotes or downvotes for the post is updated in the database. This allows for tracking the number of upvotes and downvotes for each post.
Conditional rendering is used to show the fill colors for the upvote and downvote icons.
Last but not least, we can create our dashboard to display our posts. The dashboard will initially show a very simple sign in screen, followed by a screen showing posts in the database and a button to add more posts. There will also be a logout button.
The code for the dashboard is shown below. Note that we have imported our VoteButtons component which will display our voting buttons and tallies to the right of the post.
And that's it! Our project is complete and now we have code we can use in other projects any time we want to add voting to a post. Time to give this project a big thumb's up! 👍
Please comment below 👇 or send me a message 📨 if you liked this post. You can also connect with me on LinkedIn .
Also, don't forget to Subscribe to this blog to receive future updates!
Happy Coding!
Kari
Sign in with Google to add a comment
Comments