Dev.to-clone

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

Tech used with vite🔥:

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

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

Login / Signup / Edit / Delete

Google / Github OAuth

Create / Update / Edit / Delete Posts

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

Tags / ReadingList

Dashboard

Search Engine

Live

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

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

How to setup locally

Clone Repo

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

Setup

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

$ cd server && npm i
$ cd client && npm i

Create

A MongoDB database either locally or online via MongoDB Atlas

A Cloudinary account

A new project on Google Cloud Platform

A .env file in in both client and server subdirectories

ENV variables

client/.env:

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

server/.env:

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 npm run stack on the root of the two subdirectories

Credit

Dev.to clone by me

jedafe/Devto-clone