Fullstack Stack Overflow clone (QnA site) made with MERN + GraphQL
Deployed on Netlify (front-end) & Heroku (back-end)
- ReactJS - Frontend framework
- Apollo Client - State management library to manage both local and remote data with GraphQL
- Context API w/ hooks - For state of user, toast notifs, theme etc.
- React Router - For general routing & navigation
- React Hook Form - For flexible forms
- Material-UI w/ lots of CSS customisations - UI library
- Yup - For form validation
- date-fns - For manipulating & formatting of dates
- Node.js - Runtime environment for JS
- Apollo Server - To build a self-documenting GraphQL API server
- MongoDB - Database to store document-based data
- Mongoose - MongoDB object modeling for Node.js
- JSON Web Token - A standard to secure/authenticate HTTP requests
- Bcrypt.js - For hashing passwords
- Mongoose Unique Validator - Plugin for better error handling of unique fields within Mongoose schema
- Dotenv - To load environment variables from a .env file
- 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
Create a .env file in server directory and add the following:
MONGODB_URI = "Your Mongo URI"
PORT = 4000
SECRET = "Your JWT secret"
Open client/src/backendUrl.js & change "backend" variable to "http://localhost:4000"
cd client
npm install
npm start
Note: Make sure that you have installed 'nodemon' as global package.
cd server
npm install
npm run dev