DEV Community

loading...

I created a reddit clone

thomasjk0831 profile image Thomas Kim ・4 min read

Alt Text

Live Demo
Frontend
Backend

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
Alt Text

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

Schema
Alt Text

API Contracts:

This is the documentation of the API endpoints.
API Documentation
Alt Text

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.
Alt Text

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.
Alt Text

(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.
Alt Text


"As a user, I can create a new post on a sub"

(Backend: make a new post request):
Alt Text
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.
Alt Text
Once the token is verified, the endpoint checks if the new post is valid.(It needs a valid title, body, etc)
Alt Text
Once the new post is verified, the function 'add' is called which queries the database and inserts a new post.
Alt Text



(Frontend: When users make a new post request):
Alt Text

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.
Alt Text

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.
Alt Text


"As a user, I can search for posts based on title."

(frontend:search posts):
Alt Text
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.

Alt Text
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.
Alt Text


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.

Discussion (3)

pic
Editor guide
Collapse
2x1hosting profile image
2x1 Hosting

where can I contact you? just technical discussion U_U

Collapse
thomasjk0831 profile image
Thomas Kim Author

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!

Collapse
2x1hosting profile image
2x1 Hosting

where can I get it for test drive?