DEV Community

Eknoorpreet Singh
Eknoorpreet Singh

Posted on

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

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

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

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

New Post

Users can create / update / delete posts.

New Post

(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

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

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

Edit Profile

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

Edit Profile

Search

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

Search

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.

Here's the deployed site

Top comments (60)

Collapse
 
ben profile image
Ben Halpern

Quite impressive

Collapse
 
eknoor4197 profile image
Eknoorpreet Singh

Thanks a lot, Ben!

Collapse
 
dumboprogrammer profile image
Tawhid

Hey Ben you are here.
How's everything going man?

Collapse
 
ben profile image
Ben Halpern

Things are good, you?

Thread Thread
 
dumboprogrammer profile image
Tawhid

Glad to hear,I'm also doing good.

Collapse
 
liftoffstudios profile image
Liftoff Studios

Impressive !

Collapse
 
ninjaasmoke profile image
Nithin Sai K J

Quite ballsy of you to post about it on dev.to

But, amazing work

Collapse
 
eknoor4197 profile image
Eknoorpreet Singh

Hahaha!
Well, Ben approved it so it's all good :)

Collapse
 
strongunsullied profile image
Kasope Johnson

A beautiful attempt! Well done

Collapse
 
donnyroufs profile image
donny roufs

Great job. Have a look at abstracting logic from your controllers and writing tests!

Collapse
 
eknoor4197 profile image
Eknoorpreet Singh

Yes, I plan to refactor code and add tests.
Thanks!

Collapse
 
vulcanwm profile image
Medea

Woah nice!

Collapse
 
eknoor4197 profile image
Eknoorpreet Singh

Thanks!

Collapse
 
vulcanwm profile image
Medea

No problem! This is really impressive

Collapse
 
nickytonline profile image
Nick Taylor

Nice!

A kangaroo playing an electric guitar

Collapse
 
papilocloud profile image
papilo-cloud

Awesome

Collapse
 
bellatrix profile image
Sakshi

Woah!!

Collapse
 
tmchuynh profile image
Tina Huynh

Wow! That's incredible!