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
Latest comments (62)
Hi ,
Can you tell which markdown editor you used?\
Awesome
A great way to showcase the project.
Impressive !
Incredible that must have taken a long time to perfect π€©
Perfect. I know you are lost 2 month to finish this project.It is impressive.Because I have viewed you source code and you don't use any libs UI. I wonder How long experience? How many hours do you spend each day to develop this project?
I have built a website from dev.to idea.I using UI framework is ChakraUi and use Strapi framework for backend.But I took 4 month to complete.
That is: mytopic.vn
Just a question though. When you decide to clone a website, how do you know what tech its using. Or is it just you clone the website with the tech you know?
Hey,
I don't clone a website based on its stack. I make a website based on the tech I want to learn. For example, I wanted to learn fullstack, so I created this clone. Now, I'm creating a Medium clone to learn Next.js. In my third project, I'll use Postgres.
On a side note, you can use Wappalyzer to know the stack used by a company :)
Awesome
Woah!!
Nice!