I built a DEV.to clone from scratch (including the API!) 👨‍💻🥳
Tags: react, javascript, webdev, showdev
Published: 2022-04-07 14:57:09

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: <a href="https://github.com/facebook/react">React</a>
- Routing: <a href="https://github.com/ReactTraining/react-router">React Router</a>
- Real-time Notifications: <a href="https://github.com/socketio/socket.io">Socket.io</a>
- Backend: <a href="https://github.com/expressjs/express">Express</a>
- Database: <a href="https://github.com/mongodb/mongo">MongoDB</a>
- ORM: <a href="https://github.com/Automattic/mongoose">Mongoose</a>
- Image hosting: <a href="https://cloudinary.com/">Cloudinary</a>

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:

![Login / Signup](https://res.cloudinary.com/drkvr9wta/image/upload/v1649308727/devto-clone/login-signup_cw4dnt.gif)

### Like / Unicorn / Bookmark

Just like the original, there are 3 "reaction" features: like, unicorn (whose mystery I am yet to unravel), and bookmark.

![Like / Unicorn / Bookmark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuru19htzhdz8vzpoeht.gif)

### New Post

Users can create / update / delete posts.

![New Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84r4n2q8uhvs5ncp4gpu.png)

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

![Comments and Replies](https://res.cloudinary.com/drkvr9wta/image/upload/v1649310925/devto-clone/compressed-comments-replies_qsnuae.gif)

### Real-time Notifications

The user gets notifications when he's followed or his post receives a like or comment from another user.

![Real-time Notifications](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enxfnq5348w1dq7umhb2.gif)

### 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.

![Follow Tags](https://res.cloudinary.com/drkvr9wta/image/upload/v1649308992/devto-clone/tags_y7jhbu.gif)


### Edit Profile

Users can update their profile by providing information about their work, skills/languages, bio, social media, and location. 

![Edit Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxq6vsvpknpdkdm0id84.gif)

### Search

Users can search for posts (only via titles as of now).

![Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io3ic9gpd80bs7f94epv.gif)

## What I learned:

There are three most important factors that distinguish a good project from a great project:
 
1. 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.

2. 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.

3. 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](https://github.com/eknoorpreet/dev.to-clone). 

Here's the [deployed site](https://devfrom.netlify.app)