chorylee / Devto-clone

Dev.to clone

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://marodevv-devto-clone.vercel.app

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

How to setup locally

Clone Repo

Clone the repo to your local machine by https://github.com/marodevv/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