eknoorpreet/dev.to-clone

A DEV.to clone using MERN stack

DEV.to Clone

An DEV.to clone created with MongoDB, Express, React, Node, and Socket.io

Live Site

Backend API

Tech

• UI: React
• Routing: React Router
• Real-time Notifications: Socket.io
• Backend: Express
• Database: MongoDB
• ORM: Mongoose
• Image hosting: Cloudinary

Features

• Login / Signup
• Google / Facebook / Twitter / GitHub OAuth
• Create / Remove / Update / Delete Post
• Like / Unicorn / Bookmark Post
• Reading List
• Create / Add Tags to Post
• Follow Tags
• Find Posts by Tags
• Comment / Replies
• Like Comment
• Edit / Delete Comment
• View Profile
• Edit Profile
• Follow User
• Search Posts
• Real-time Notifications
• Skeleton Loading

How to setup locally

Clone

Clone the repo to your local machine using https://github.com/eknoorpreet/dev.to-clone

Setup

Install npm dependencies in both client and server subdirectories using npm install

$ cd server && npm install
$ cd client && npm install

Set up a MongoDB database either locally or online via MongoDB Atlas

Create a Cloudinary account

Create a new project on Google Cloud Platform

Create a .env file in in both client and server subdirectories

Set up the following environment variables

In client/.env:

REACT_APP_BASE_URL=http://localhost:5000/api
REACT_APP_SOCKET_IO_URL=http://localhost:5000
REACT_APP_GOOGLE_CLIENT_ID=<GOOGLE_CLIENT_ID>
REACT_APP_GITHUB_CLIENT_ID=<GITHUB_CLIENT_ID>
REACT_APP_FB_APP_ID=<FACEBOOK_CLIENT_ID>

In server/.env:

DB_USER = //user name for db
DB_PASSWORD = //password for db
DB_NAME = // name for db
JWT_KEY = //random string
COOKIE_KEY = //random string;
NODE_ENV = 'development';
CLIENT_URL = //the port of React app, ex: 'http://localhost:3000';

//cloundiary will provide you with the following credentials
CLOUDINARY_CLOUD_NAME = //cloud name
CLOUDINARY_API_KEY = //API key
CLOUDINARY_API_SECRET; //API secret

//Google will provide you with the following credentials
GOOGLE_API_KEY = //API key

//Github will provide you with the following credentials
GH_CLIENT_ID = //Github's Client ID
GH_CLIENT_SECRET = //Github's Client Secret

// Twitter will provide you with the following credentials
TWITTER_CONSUMER_KEY = //Twitter's Consumer key
TWITTER_CONSUMER_SECRET = //Twitter's Consumer Secret

Finally, run npm start in both client and server subdirectories

$ cd server && npm start
$ cd client && npm start

Screenshots

Login / Signup

Like / Unicorn / Bookmark

New Post

Comments and Replies

Real-time Notifications

Follow Tags

Edit Profile

Search

dev.to-clone's Issues

Not Working

Sees that your website isn't working because of heroku site down

and cors error is also there

The loading screen doesn't cover whole page

If you scroll while on the loading screen you can see some posts behind it. The loading screen doesn't cover the whole page.

can not run the project locally

i asked question here with

https://stackoverflow.com/questions/74739404/uncaught-in-promise-typeerror-failed-to-fetch-i-can-not-connect-to-api-from
no connection to the backend

Dummy Data

Hey @eknoorpreet , it would be a great help if you could provide me with some dummy data since I am new to Open source and I am giving it a try to add features to this codebase. Also, your backend APIs are down so it is making no sense on how to create data for this web app since there are so many models associated in the backend and the datatype of each parameter is referred to as mongoose.Types.ObjectId . Please turn on the backend API or please provide me with the JSON files which could be used to run the frontend at least.

PS: I am not using this project to submit it to my college or something XD. Hope you would help.
Thanks.