Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ericlewis966/stackoverflow-fork-stackunderflow
Stackoverflow fork version (Stack underflow)
https://github.com/ericlewis966/stackoverflow-fork-stackunderflow
mern mongodb mongoose nodejs react reactjs stackoverflow
Last synced: about 3 hours ago
JSON representation
Stackoverflow fork version (Stack underflow)
- Host: GitHub
- URL: https://github.com/ericlewis966/stackoverflow-fork-stackunderflow
- Owner: ericlewis966
- License: mit
- Created: 2022-06-12T14:48:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-14T02:45:45.000Z (almost 2 years ago)
- Last Synced: 2023-07-19T03:08:22.804Z (over 1 year ago)
- Topics: mern, mongodb, mongoose, nodejs, react, reactjs, stackoverflow
- Language: JavaScript
- Homepage:
- Size: 2.46 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Stack Underflow | SOF Clone | MERN-GraphQL
Fullstack [Stack Overflow](https://stackoverflow.com/) clone (QnA site) made with MERN + GraphQL
## Demo
[Deployed on Netlify (front-end) & Heroku (back-end)](https://stackunderflow.netlify.app)
## Built using
#### Front-end
- [ReactJS](https://reactjs.org/) - Frontend framework
- [Apollo Client](https://www.apollographql.com/docs/react/) - State management library to manage both local and remote data with GraphQL
- [Context API w/ hooks](https://reactjs.org/docs/context.html) - For state of user, toast notifs, theme etc.
- [React Router](https://reactrouter.com/) - For general routing & navigation
- [React Hook Form](https://react-hook-form.com/) - For flexible forms
- [Material-UI w/ lots of CSS customisations](https://material-ui.com/) - UI library
- [Yup](https://github.com/jquense/yup) - For form validation
- [date-fns](https://date-fns.org/) - For manipulating & formatting of dates
#### Back-end
- [Node.js](https://nodejs.org/en/) - Runtime environment for JS
- [Apollo Server](https://www.apollographql.com/docs/apollo-server/) - To build a self-documenting GraphQL API server
- [MongoDB](https://www.mongodb.com/) - Database to store document-based data
- [Mongoose](https://mongoosejs.com/) - MongoDB object modeling for Node.js
- [JSON Web Token](https://jwt.io/) - A standard to secure/authenticate HTTP requests
- [Bcrypt.js](https://www.npmjs.com/package/bcryptjs) - For hashing passwords
- [Mongoose Unique Validator](https://www.npmjs.com/package/mongoose-unique-validator) - Plugin for better error handling of unique fields within Mongoose schema
- [Dotenv](https://www.npmjs.com/package/dotenv) - To load environment variables from a .env file
## Features
- Authentication (login/register with username-password)
- CRUD questions, answers & comments
- Upvote/downvote questions & answers
- Tags for organising questions
- Page views - A view is registered whenever the question page is opened
- Pages for added tags, registered users & more
- Sorting of questions on basis of hot, votes, views, newest & oldest
- Search questions over the server on basis of question title & body
- Pagination of posts in the form of "Load More" button
- Error management to prevent app crashes
- Toast notifications for actions: adding questions, deleting comments etc.
- Loading spinners for relevant fetching processes
- Formatted dates for adding/updating questions/answers/comments
- Dark mode toggle w/ local storage save
- Proper responsive UI for all screens
## Screenshots
#### Desktop/Tablet
#### Mobile
## Usage
#### Env variable:
Create a .env file in server directory and add the following:
```
MONGODB_URI = "Your Mongo URI"
PORT = 4000
SECRET = "Your JWT secret"
```
#### Client:
Open client/src/backendUrl.js & change "backend" variable to `"http://localhost:4000"`
```
cd client
npm install
npm start
```
#### Server:
Note: Make sure that you have installed 'nodemon' as global package.
```
cd server
npm install
npm run dev
```