💁‍♂️ Built a Dev.to replica with The MERN stack and more
Tags: javascript, react, node, showdev
Published: 2022-09-17 12:43:50

<a  href="https://marwanm-devto-clone.vercel.app">
![dev-unofficial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj6i651d7ofblf9pt6c0.png)
</a>

<h1>Dev.to-clone</h1>

> A Dev.to clone created with MERN stack and more (Essentially FB without stories feature)🥳

## Table of contents

1. [Inspire](#inspire)

2. [The Experience](#experience)

3. [Tech used](#tech)

4. [Features](#features)

5. [Screenshots](#screenshots)

6. [Links](#links)

7. [Setup locally](#setup)

8. [Do me a favor](#favour)

9. [Credits](#credit)

## Inspire <a name='inspire' />

First of all, I did not think of clonning another websites in my whole journey, Only to know what **I'm capable of** after learning the MERN stack **4 months ago**.
<br />

I was looking for a [frontendmentor](https://www.frontendmentor.io) project **as usual** that will confirm and prove my skills but I didn't find any backend related only frontend as the website mentions.
<br />

After a lot of searching I got inspired by a few people that have cloned dev.to website, Some cloned the frontend only and some both with different tech stacks.
<br />

And because It's already cloned by others _Despite being a few😌_ I had to make an exact ~~clone~~ **replica** with lots of features that didn't exist in other clones. Giving me the opportunity for clonning one of the best blogging, multipage and challenging website.
<br />

It took me about **4 months** in total, So don't get desperate and:
> Doesn't matter how slowly you go as long as you do not stop.

## The Experience <a name='experience' />

It was really challenging in these different layouts **especially** on mobile, Also browser support wasn't that good so I couldn't use some stuff as in css the :has() pseudo class.
<br />

I Deep dived in **Redux toolkit** and **RTK query**, Learned lots of stuff like lazy quering and cache invalidation.
I practiced Json web tokens (aka JWT) in advance for issuing access & refresh tokens on login either from Google/Github OAuth or manual authentication and logging them out automatically after expiration.
<br />

Got familiar with Vercel/Render deployments, Faced so many problems in this journey, It was full of error handling, stress and panicking😂, There was alot going on in this phase.
<br />

Eventually, I was satisfied and pleased **with the results**!

Don't forget to share this as much as possible and let's get started folks😇.

<br />

## Tech used <a name='tech' />

> Frontend

- React
- Redux toolkit (Advanced RTK)
- Tailwind
- Styled components
- Framer motion
- React router
- Cloudinary (Image hosting)

> Backend

- MongoDB
- Express
- Node.js
- OAuth (Google/Github)
- JWT
- Socket.io (Real-time)
- Cloudinary
- Mongoose
- Axios

## Features  <a name='features' />

- Login / Signup
- View / Edit Profile
- Google / Github OAuth
- Ultimate mobile responsiveness
- Real-time Notifications Toasted
- CRUD Posts / Comments / Replies / Tags
- Follow / Unfollow Users
- Follow / Unfollow Tags
- Like / Unicorn / Bookmark Posts
- Like comments
- Advanced Search engine for posts, people and tags
- Filter for posts
- Reading List
- Dashboard

## Screenshots <a name='screenshots' />

### Login / Signup / Edit / Delete

![Login / Signup / Edit / Delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7eg0pj5k5epsmxndcw7x.gif)

### Google / Github OAuth

![Google / Github OAuth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5xhms2ba3zqj0krx1z4.gif)

### Create / Update / Edit / Delete Posts

![Create / Update / Edit / Delete Posts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv01vhjx7pyl6fylh2aq.gif)

### Reactions / Comments / Follows with Real-time notifications (Toasted)

![Reactions / Comments / Follows with Real-time notifications (Toasted)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3ihxhmzyq8j10qbqq3q.gif)

### Tags / ReadingList

![Tags / ReadingList](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqnpsg6g133wev9tltrz.gif)

### Dashboard

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

### Search Engine

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

## Links <a name='links' />

> Client: https://marwanm-devto-clone.vercel.app

> Server: https://marwanm-devto-clone-server.onrender.com

> Source: https://github.com/marwanm-dev/Devto-clone

## How to setup locally <a name='setup' />

### Clone Repo

- Clone [the repo](https://github.com/marwanm-dev/Devto-clone) to your local machine by 

### Setup

- Install all dependencies in both `client` and `server` subdirectories by `npm i`

```shell
$ cd server && npm i
$ cd client && npm i
```

### Create

- A MongoDB database either locally or online via <a href='https://www.mongodb.com/cloud/atlas'>MongoDB Atlas</a>

- A <a href="https://cloudinary.com/">Cloudinary account</a>

- A new project on <a href='https://console.cloud.google.com'>Google Cloud Platform</a>

- A `.env` file in in both `client` and `server` subdirectories

- ENV variables

`client/.env`:

```js
BASE_URL=
GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
```

`server/.env`:

```js
ACCESS_TOKEN_SECRET=
REFRESH_TOKEN_SECRET=

CLIENT_URL=

GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}

DB_NAME=
DB_USER=
DB_PASSWORD=

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_DEFAULT_URL= // default image url
CLOUDINARY_DEFAULT_PUBLIC_ID= // default image public_id
```

- Finally, run <code>npm run stack</code> on the root of the two subdirectories

## Do me a favor <a name='favour' />

### Social

- [Github](https://github.com/marwanm-dev)
- [Linkedin](https://www.linkedin.com/in/marwanm-dev)
- [Instagram](https://www.instagram.com/marwan_mostafa24/)
- [Dev](https://dev.to/marwanm)

### Share

Since I'm new to blogging, I will ask you to **Share this** as much as you think I deserve!

### Support

- Buy me a coffee - https://www.buymeacoffee.com/marwanm

## Credit <a name='credit' />

> Dev.to clone by [me](https://github.com/marwanm-dev)