Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/marwanm-dev/devto-clone

Dev.to clone
https://github.com/marwanm-dev/devto-clone

axios cloudinary express mern mern-stack mongodb mongoose node oauth2 react react-router redux-persist redux-toolkit rtk-query socket-io styled-components tailwind tailwind-css

Last synced: about 2 months ago
JSON representation

Dev.to clone

Host: GitHub
URL: https://github.com/marwanm-dev/devto-clone
Owner: marwanm-dev
License: bsd-4-clause
Created: 2022-06-26T01:07:09.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-12-11T20:43:07.000Z (about 2 years ago)
Last Synced: 2023-05-13T22:21:08.897Z (over 1 year ago)
Topics: axios, cloudinary, express, mern, mern-stack, mongodb, mongoose, node, oauth2, react, react-router, redux-persist, redux-toolkit, rtk-query, socket-io, styled-components, tailwind, tailwind-css
Language: JavaScript
Homepage: https://marwanm-devto-clone.vercel.app
Size: 133 MB
Stars: 74
Watchers: 1
Forks: 15
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

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](https://user-images.githubusercontent.com/90101257/190129885-a618117c-71c5-48c8-a091-01e5f03266e3.gif)

### Google / Github OAuth

![Login OAuth](https://user-images.githubusercontent.com/90101257/190130170-31e95df0-86e9-4b79-8325-9bc3fcc3f164.gif)

### Create / Update / Edit / Delete Posts

![CRUD Posts](https://user-images.githubusercontent.com/90101257/190130345-68b6275c-743c-48da-9c65-e5c5515989d8.gif)

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

![Real time notifications - Reactions - Comments - Replies - Follows](https://user-images.githubusercontent.com/90101257/190132480-e07976d2-936a-49c2-897c-e6be5527b465.gif)

### Tags / ReadingList

![Tags - ReadingList](https://user-images.githubusercontent.com/90101257/190130607-7e6a7035-dc56-4dc7-b2e9-d2c6d00d5a87.gif)

### Dashboard

![Dashboard](https://user-images.githubusercontent.com/90101257/190119722-fb78a3ad-082c-45ad-b438-ee30606825ef.gif)

### Search Engine

![Search engine](https://user-images.githubusercontent.com/90101257/190130621-24249495-af37-4ecb-a57f-8909a5d13dbb.gif)

## 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`

```shell
$ 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`:

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

`server/.env`:

```js
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