amand33p / stack-underflow

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

Home Page:https://stackunderflow.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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

Desktop-1 Desktop-2 Desktop-3 Desktop-4 Desktop-5

Mobile

Mobile-1 Mobile-2 Mobile-3 Mobile-4 Mobile-5

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

About

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

https://stackunderflow.netlify.app

License:MIT License


Languages

Language:JavaScript 98.6%Language:HTML 1.0%Language:CSS 0.4%