I built a DEV.to clone from scratch (including the API!) 👨‍💻🥳

#react #javascript #webdev #showdev

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.