Hey guys, I wanted to showcase my latest project: A DEV clone.
My motivation behind the project was simple: I had learnt both frontend (React) and backend (MongoDB, Node, Express) technologies and wanted to build a full-stack React app to learn how both sides work together. Initially, I decided to make a blog website where I could post my notes on anything new I learned. Then, I came to know about DEV.to (believe me, I didn't know about it until some months ago) so I decided to make a clone.
Going in, I decided that I will not shy away from building any complex features present on the original website. Even though it's a clone (and nobody will probably ever use it), it's still a clone of a real-world application, and building it with that mindset will make you a better developer. For example, you write efficient queries because you care about the speed of the response from the server.
- UI: React
- Routing: React Router
- Real-time Notifications: Socket.io
- Backend: Express
- Database: MongoDB
- ORM: Mongoose
- Image hosting: Cloudinary
Enough talking! Let's see the clone in action:
The application consists of local authentication (using JWT) as well as OAuth services of Google, Facebook, GitHub, and Twitter:
Just like the original, there are 3 "reaction" features: like, unicorn (whose mystery I am yet to unravel), and bookmark.
Users can create / update / delete posts.
(A gif wasn't working here so I just added an image)
Users can comment /reply but unlike the original DEV, I limited my clone's comment section to just one thread.
The user gets notifications when he's followed or his post receives a like or comment from another user.
Whenever a user creates a new post, he can add tags (no set limit as of now). If the tag doesn't exist, it's created and attached to the post. Furthermore, the user can follow/unfollow tags and get posts filtered by tags as well.
Users can update their profile by providing information about their work, skills/languages, bio, social media, and location.
Users can search for posts (only via titles as of now).
There are three most important factors that distinguish a good project from a great project:
UI: The first thing people are going to compare when judging your clone is the UI. So, I tried to make it as close to the original as possible. It was a challenge to match the UI with the original on both desktop and mobile but I got through.
Features: As you saw, I tried to implement all the core features of the original DEV. Starting out, I had no idea how to go about working on real-time functionalities such as notifications. But you grow the most when you do the things you don't know how to do.
Code readability: You don't write code for just the machine. In real-world, you write it for other people to read. Being able to write code that is easy to read is an essential skill to master.
I put a lot of effort into the DEV clone and I hope you liked it. Feel free to ask anything about the project!
You can access the code at my GitHub repo.
Here's the deployed site