A DEV.to clone using MERN stack

Last update: Dec 9, 2022

Overview

DEV.to Clone

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

Tech

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

Features

Login / Signup
Google 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

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>

In server/.env:

DB_USER= //user name for db
DB_PASSWORD= //password for db
DB_NAME= // name for db
JWT_KEY= //random string

//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

Finally, run npm start in both client and server subdirectories

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

Online Inventory Control System for an apparel manufacturing company "CASANOVA" (Pvt) Ltd. Technology stack: Node.js, Express.js, MongoDB Atlas, React.js (MERN Stack).

Project Name - Online Inventory Control System for an apparel manufacturing company "CASANOVA". The project was given a "A" grade. Group Leader - IT20

Dec 26, 2021

It is a solo Project and In this repo I try to build a E-Commerce full-stack website with MERN stack technologies. For Practice purpose.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Aug 3, 2022

BookAttic is an online bookstore made using the MERN stack.

BookAttic is an online bookstore made using the MERN stack. Link to the website. Table of contents General info Technologies Setup General info This p

Nov 19, 2022

MERN stack travel app using mapbox API, Travel and drop pin , share reviews and rate the location

MERN-Travel-Map Travel Map Pin A single page application built with MERN Stack from scratch (MongoDB + Mongoose, Express, React & NodeJs) Table of Con

Dec 29, 2022

This is an email scheduler made using MERN stack. This repo contains client, server side is linked in readme

Email Scheduler Client This is an email scheduler client (server in different repository). It is made using react. Overview User can sign-up/sign-in,

Dec 3, 2022

E-commerce website using the MERN Stack

HEIN. Ecommerce Web Application built with the MERN Stack. Inspired by Lama Dev 🏁 Get Started Clone the repository git clone https://github.com/Youse

Jan 4, 2023

This is my personal blog built using MERN Stack.

SURAJ'S BLOG Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN) Configuration and Setup Key Features Technol

Oct 18, 2022

Whatsapp-web-clone MERN project deployed on vercel and heruku

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 17, 2022

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 to

Dec 13, 2022

⛔️ DEPRECATED - Boilerplate for getting started with MERN stack

⛔️ DEPRECATED MERN is deprecated and is no longer actively maintained. mern-starter MERN is a scaffolding tool which makes it easy to build isomorphic

Jan 3, 2023

This is my first attempt in creating a mern stack ecommerce website. Hope you like it!!

MERN E-COMMERCE PROJECT Hi! My name is Suhrrid Banerjee, This is my first attempt in creating a MERN stack e-commerce website. Prerequisite Nil Env Va

Jan 8, 2022

MERN stack application which serves as an online map journal where users can mark and rate the places they've been to.

PlaceRate PlaceRate is a MERN stack application which serves as an online map journal where users can mark and rate the places they've been to. You ca

May 17, 2022

It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

Twitter-Clone_Back-end ✨ Demo. 💻 About the project. 📜 Descriptions. It consists of a recreation of Twitter, to put into practice knowledge of both F

Apr 12, 2022

This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the back end implementation and there is the React implementation as the front end

Versão em português MERN stack This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the

Jan 22, 2022

Hotel Booking System Built In MERN (MongoDB, ExpressJs, ReactJs, Nodejs) Stack.

Setting Up The Project Please Run The Commands Below to Run the Project git clone https://github.com/yishakdotjs/yishakdotjs-Hotel-Booking-System-Fron

Feb 3, 2022

Total Quest is an online real-world scavenger hunt application built with the MERN stack

TOTAL QUEST Table of Contents Description Team Members Technologies Used Contact Example Link to Total Quest Description Total Quest is an online real

Mar 13, 2022

A MERN Stack dapp the utilizes three solidity contracts

A MERN Stack dapp the utilizes three solidity contracts. It verifies user ownership of third party NFTs, generates an image incorporating a third party NFT image pulled from IPFS, mints a new NFT for users that includes an on-chain message and metadata to Opensea standards.

Jun 30, 2022

a/A MERN stack collaboration project

Welcome to Hoppers! Hoppers is an app where users can design their plan for the perfect night out with friends1. Users will be able to design and cust

Apr 28, 2022

WebRTC based peer to peer video calling and messaging web app build with MERN stack.

talkhouse WebRTC based peer to peer video calling and messaging web app build with MERN stack. Demo Libraries used React for frontend Socket.io as sig

Nov 26, 2022

Comments

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

opened by am0029 8