Stackoverflow Clone Frontend

screenshot of Stackoverflow Clone Frontend
express
react
scss

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

Overview:

This project is a clone of a popular Q/A website for programmers built using the MERN stack. The frontend is in React.js with Redux for state management, while the backend is in Node.js with Express.js and MySQL with Sequelize as the database.

Features:

  • MERN Stack: Frontend in React.js with Redux, backend in Node.js with Express.js, and MySQL with Sequelize for the database.
  • Manual Setup: Steps provided for setting up the project manually including cloning the code, installing modules, setting up the backend, and frontend.
  • Docker Support: Instructions for setting up the backend in a Docker container, including building the Docker image and running the container with the correct environment variables.

Manual Setup:

  1. Open your local CLI.
  2. Setup the backend code.
  3. Create a .env file following the format in .env.example.
  4. Clone the code and install the modules.
  5. Open your MySQL Client and keep the database name same in the .env.
  6. Run the backend with npm start.
  7. Open a new CLI terminal, go to the root folder, and setup the frontend code.
  8. Clone the code and install the modules.
  9. Run the frontend client with npm start.
express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

Redux

Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.