amand33p / stack-underflow

Feature-rich ‘stack overflow’ (QnA site) clone. Made using MERN + GraphQL stack.

Stack Underflow | SOF Clone | MERN-GraphQL

Fullstack Stack Overflow clone (QnA site) made with MERN + GraphQL

Demo

Deployed on Netlify (front-end) & Heroku (back-end)

Built using

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

Back-end

• 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

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