DEV Community

Eknoorpreet Singh
Eknoorpreet Singh

Posted on

222 78 2 2 2

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

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (62)

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
 
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
 
strongunsullied profile image
Kasope Johnson β€’

A beautiful attempt! Well done

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
 
andrewbaisden profile image
Andrew Baisden β€’

Incredible that must have taken a long time to perfect 🀩

Collapse
 
binoybarnabas profile image
Binoy Barnabas β€’

looks like we got a twin for dev.to . well done mate!

Collapse
 
papilocloud profile image
papilo-cloud β€’

Awesome

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay