Skip to content

marwanm-dev/Devto-clone

Repository files navigation


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

Login - Signup -Edit - Delete profile

Google / Github OAuth

Login OAuth

Create / Update / Edit / Delete Posts

CRUD Posts

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

Real time notifications - Reactions - Comments - Replies - Follows

Tags / ReadingList

Tags - ReadingList

Dashboard

Dashboard

Search Engine

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