This is a clone of reddit, a website where users can comment and vote on user-created content. It was built using React, Node.js, and CSS. First, I approached this project by brainstorming user stories so that I could create a description of what the site does from an end-user perspective.
User Stories:
As a new user, I can register and/or login.
As a user, I can create a new post on a sub.
As a user, I can create a new sub.
As a user, I can upvote a post.
As a user, I comment on a post.
As a user, I can search for posts based on title.
As a user, I can view all posts on a sub.
As a poster, I can delete my own posts or comments.
User Flow Diagram:
I created this visual diagram from the user stories to understand how users interact with this website.
User Flow
Database Schema:
I also created a DB schema to represent the backend. I found it useful as a visual and logical representation of the API as I was building the endpoints
API Contracts:
This is the documentation of the API endpoints.
API Documentation
Some Engineering Tasks:
"As a new user, I can register. As a user, I can log in"
(backend: register/login)
We will be using JWT as the authentication method. Here we are validating that the user's new password is valid and then we are using the 'bcryptjs' library to hash the password before creating a new user.
When users are logging in, we are checking that they are registered already and then we will compare the hash password with the password inputted. If the user is registered and the password is correct, we will send the token to the frontend.
(Frontend: login):
The local storage is updated with the token as well as the user's id. Users will need a token to do certain tasks(i.e creating posts, comments, etc). If users do not have a token, they will not be able to reach some restricted endpoints from the frontend.
We are also updating the log-in state with the redux function: 'logUserIn'. Finally, the user will be routed to the main page after successful login.
"As a user, I can create a new post on a sub"
(Backend: make a new post request):
Access to this endpoint is 'restricted' to logged-in users only. This is accomplished using a middleware function using the 'jsonwebtoken' library. We will use this library to verify if the token is valid. If the token turns out to be valid, the 'next' function allows the post request to continue.
Once the token is verified, the endpoint checks if the new post is valid.(It needs a valid title, body, etc)
Once the new post is verified, the function 'add' is called which queries the database and inserts a new post.
(Frontend: When users make a new post request):
Here, 'tempPost' is an object that represents the new post from a user. The API call 'axiosWithAuth' is restricted to only logged-in users. This means that frontend needs to add a header with a valid token in order for backend to accept the request.
A function handles the submit request for a new post. It checks that the post is valid as well as checking that a sub exists for that post. If the post is not valid, it will display an error message to the user.
"As a user, I can search for posts based on title."
(frontend:search posts):
Users will be able to filter posts by title. The function 'submitHandler' is run when the user presses the submit button. The redux function: 'searchPosts' is then called and the 'searchString' is passed as an argument.
The state of the posts is then handled inside the reducer. The searchString is represented by 'action.payload' and it is used to filter the existing post state. The magic of React happens when it displays the filtered post dynamically.
Final Thoughts
I loved that I was able to work on both the backend and frontend.
Being able to build a whole web app by myself was very satisfying.
The biggest challenge for me was fleshing out the user experience on the front end. Creating a userflow diagram really helped me understand the flow of the site as well as when to load certain components and states. Some of the things I can improve on in the future are: a real time chat option, improved modularity, ability to follow users, and user profile pictures.
Finally, this was a really fun project and I had a blast building it.
Top comments (3)
where can I contact you? just technical discussion U_U
sorry I didn't see your message until recently. you can contact me on thomaskim08310@gmail.com. I'm open to helping out in any way I can!
where can I get it for test drive?