All Projects → Mayank0255 → Stackoverflow-Clone-Frontend

Mayank0255 / Stackoverflow-Clone-Frontend

Licence: MIT License
Clone project of a famous Q/A website for developers built using MySQL, Express, React, Node, Sequelize 🌐

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to Stackoverflow-Clone-Frontend

Stackoverflow Clone
Clone project of a famous Q/A website for developers which is stackoverflow built using MySQL-Express-React-Node 🌐
Stars: ✭ 182 (-51.98%)
Mutual labels:  stack, backend, stackoverflow
profile-store
Store profile links of people you admire, at one place. Made using MERN stack.
Stars: ✭ 37 (-90.24%)
Mutual labels:  backend, mern, mern-stack
AquilaCMS
AquilaCMS is an Open Source and "all in one" ecommerce solution, self hosted, built using nodejs (MERN stack)
Stars: ✭ 69 (-81.79%)
Mutual labels:  mern, mern-stack
pern-stack-auth
📋 Repair. PERN stack todo app with jwt user authentication
Stars: ✭ 17 (-95.51%)
Mutual labels:  stack, backend
amazin
A MERN-stack app for eCommerce platform, Webshop, Web Store. Storybook: https://www.amazin.one/ Alternative: https://ntrix.github.io/amazin-story
Stars: ✭ 27 (-92.88%)
Mutual labels:  mern, mern-stack
Netflix-Clone-MERN
A Netflix clone created with the MERN Stack
Stars: ✭ 37 (-90.24%)
Mutual labels:  mern, mern-stack
Aws Boilerplate
Opinionated full stack web app's boilerplate, ready to be deployed to AWS platform.
Stars: ✭ 682 (+79.95%)
Mutual labels:  stack, backend
mern-apollo-graphql-boilerplate
MERN + Apollo-Graphql Boilerplate
Stars: ✭ 21 (-94.46%)
Mutual labels:  mern, mern-stack
mern-stack-crud
MERN stack (MongoDB, Express, React and Node.js) create read update and delete (CRUD) web application example
Stars: ✭ 142 (-62.53%)
Mutual labels:  mern, mern-stack
inCyberPunk2022
👾 https://cybersocial.herokuapp.com/   C̵̡̡͓̪̺̲̺̳̭̱̩͖͔̽̈́͜y̵̢̺̮̥̠̲̼̫͗b̴̲͇̟̭̹͆͒̈́̒͋̃̌̇̈̆̚͠͠ȅ̷̡̢̩̺̏r̴̢̛̹̲̜͙͉̩̩̣͉̺͂̀́̈́̇͛͋̊̉̈́̇P̵̡͊̚ų̵̙̣͓̤̼̭̤̥̯̻̯̒ͅň̸̛̯͕̦̦͓̙̋͐̈́́̉ͅḱ̷̡̪͚͉̟̘̳̯̳͉̈́͐͂̇̾͑̕̕͝ͅ
Stars: ✭ 28 (-92.61%)
Mutual labels:  mern, mern-stack
MCW-OSS-PaaS-and-DevOps
MCW OSS PaaS and DevOps
Stars: ✭ 49 (-87.07%)
Mutual labels:  mern, mern-stack
photo gallery app
Photo gallery app created using MERN stack
Stars: ✭ 28 (-92.61%)
Mutual labels:  mern, mern-stack
mern-boilerplate
React + Express + Webpack + Mongo = MERN Stack Boilerplate
Stars: ✭ 39 (-89.71%)
Mutual labels:  mern, mern-stack
foodie
A social media for food lovers and for people looking for new ideas for their next menu.
Stars: ✭ 30 (-92.08%)
Mutual labels:  mern, mern-stack
gossip
An online user interface to efficiently author and delivery awesome and informative presentation. 🚀
Stars: ✭ 378 (-0.26%)
Mutual labels:  stack
onnxruntime backend
The Triton backend for the ONNX Runtime.
Stars: ✭ 40 (-89.45%)
Mutual labels:  backend
Manthan
Online testing platform
Stars: ✭ 80 (-78.89%)
Mutual labels:  mern
42-push swap
📚 Sorting algorithm using only two stacks
Stars: ✭ 17 (-95.51%)
Mutual labels:  stack
backend
Laravel 8 backend for a genealogy website.
Stars: ✭ 82 (-78.36%)
Mutual labels:  backend
gosane
A sane and simple Go REST API template.
Stars: ✭ 81 (-78.63%)
Mutual labels:  backend
Stack-Overflow-Clone-V2-Fast.mp4

Version NPM NODE MYSQL License

🌐 Website | 📹 Demo Video

API Hosted On

As the name suggests, this project is a clone of a famous Q/A website for professional and enthusiast programmers built solely by me using a completely different stack.

This repo consists of the Frontend code of the project, the backend code is in Stackoverflow-Clone-Backend

My Tech Stack (MERN)

Front-end

  • Front-end Framework: React.js (with Redux)
  • Styling: SASS and BOOTSTRAP

Back-end

  • For handling index requests: Node.js with Express.js Framework
  • As Database: MySQL with Sequelize
  • API tested using: POSTMAN

Guidelines to setup

There are two ways to setup the project: manually or using the Dockerfile. Read below for more details:

Manual Setup

  1. Open your local CLI -

    mkdir Stackoverflow-Clone
    cd Stackoverflow-Clone
    
  2. Setup the backend code -

    • Create a .env file and the format should be as given in .env.example.

    • Clone the code & install the modules-

      git clone https://github.com/Mayank0255/Stackoverflow-Clone-Backend.git
      cd Stackoverflow-Clone-Backend
      
      npm install
      
    • Open your MySQL Client -

      CREATE DATABASE stack_overflow;
      

      NOTE: Don't forget to keep the database name same in the .env and here.

    • Run the index npm start.

  3. Open a new CLI terminal and goto the root Stackoverflow-Clone folder you created in the first step.

  4. Setup the Frontend code -

    • Clone the code & install the modules-

      git clone https://github.com/Mayank0255/Stackoverflow-Clone-Frontend.git
      cd Stackoverflow-Clone-Frontend
      
      npm install
      
    • Run the client index npm start.

Docker Setup

The back-end has support for Docker. So if you want to run the back-end in a container, you need do:

  • Setup environment variables in .env file. Note when you use Docker setup and run the database in localhost (host machine), you need to setup the environment variables for use correct IP of MySQL Database. Please, read here and here for more details.

  • Build the Docker image:

    docker build -t stackoverflowclone .
    
  • Run the container. For example, if you want to run the container in a new terminal, you can do:

    docker run -d -p 5000:5000 stackoverflowclone
    

The default port of api is 5000. After running the container, you can access the api by typing:

http://localhost:5000/api/<endpoint that you request - see next section>

Follow the steps properly (manual or Docker) and you are good to go.

Contributing

  • Go to Contributing.md

DEMO

VIDEO - Watch the video

Video Last Updated on 7th March, 2022

IMAGES

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].