Hey guys, I wanted to showcase my latest project: A DEV clone.
Why I made it
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.
The Mindset:
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.
Tech
- 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:
Login / Signup
The application consists of local authentication (using JWT) as well as OAuth services of Google, Facebook, GitHub, and Twitter:
Like / Unicorn / Bookmark
Just like the original, there are 3 "reaction" features: like, unicorn (whose mystery I am yet to unravel), and bookmark.
New Post
Users can create / update / delete posts.
(A gif wasn't working here so I just added an image)
Comments and Replies
Users can comment /reply but unlike the original DEV, I limited my clone's comment section to just one thread.
Real-time Notifications
The user gets notifications when he's followed or his post receives a like or comment from another user.
Follow Tags
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.
Edit Profile
Users can update their profile by providing information about their work, skills/languages, bio, social media, and location.
Search
Users can search for posts (only via titles as of now).
What I learned:
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.
That's it
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
Top comments (60)
Quite impressive
Thanks a lot, Ben!
Hey Ben you are here.
How's everything going man?
Things are good, you?
Glad to hear,I'm also doing good.
Impressive !
Quite ballsy of you to post about it on dev.to
But, amazing work
Hahaha!
Well, Ben approved it so it's all good :)
A beautiful attempt! Well done
Great job. Have a look at abstracting logic from your controllers and writing tests!
Yes, I plan to refactor code and add tests.
Thanks!
Woah nice!
Thanks!
No problem! This is really impressive
Nice!
Awesome
Woah!!
Wow! That's incredible!