Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Mayank0255/Stackoverflow-Clone-Frontend
Clone project of a famous Q/A website for developers built using MySQL, Express, React, Node, Sequelize :globe_with_meridians:
https://github.com/Mayank0255/Stackoverflow-Clone-Frontend
api backend css database express frontend hacktoberfest javascript mern mern-stack mysql nodejs react reactjs redux sass sequelize sql stack stackoverflow
Last synced: 4 months ago
JSON representation
Clone project of a famous Q/A website for developers built using MySQL, Express, React, Node, Sequelize :globe_with_meridians:
- Host: GitHub
- URL: https://github.com/Mayank0255/Stackoverflow-Clone-Frontend
- Owner: Mayank0255
- License: mit
- Created: 2020-03-29T10:41:07.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-24T11:17:37.000Z (over 1 year ago)
- Last Synced: 2024-01-16T13:34:40.948Z (6 months ago)
- Topics: api, backend, css, database, express, frontend, hacktoberfest, javascript, mern, mern-stack, mysql, nodejs, react, reactjs, redux, sass, sequelize, sql, stack, stackoverflow
- Language: JavaScript
- Homepage: https://stackoverflow-clone-client.vercel.app
- Size: 13.3 MB
- Stars: 519
- Watchers: 18
- Forks: 204
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- docsify-awesome-stars - Mayank0255/Stackoverflow-Clone-Frontend - Clone project of a famous Q/A website for developers built using MySQL, Express, React, Node, Sequelize :globe_with_meridians: (JavaScript)
README
https://user-images.githubusercontent.com/43780137/158059050-481ffa30-e415-4156-aea7-072c817f2ae2.mp4
[](https://shields.io/)
[](https://shields.io/)
[](https://shields.io/)
[](https://shields.io/)
[](https://shields.io/)
### [🌐 Website](https://stackoverflow-clone-client.vercel.app) | [📹 Demo Video](https://www.youtube.com/watch?v=bUAAgfGOfYg)
### API Hosted On
- __[stackoverflow-clone-api.onrender.com](https://stackoverflow-clone-api.onrender.com) (Primary)__
- __[stackoverflow-clone-backend.herokuapp.com](https://stackoverflow-clone-backend.herokuapp.com)__
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](https://github.com/Mayank0255/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 -
__NOTE:__ For Frontend Developers, if they dont want to setup the Backend Code, they can skip the Step 2, and make sure they follow the optional step mentioned in Step 4
- 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`.
__OPTIONAL (Recommended For Frontend Developers):__ Can just change the path [here](https://github.com/Mayank0255/Stackoverflow-Clone-Frontend/blob/53b64c37981c618802547cd17483525532de83f0/src/config/index.js#L6) to this `https://stackoverflow-clone-backend.herokuapp.com`
Now, it will hit PROD
Let me know if you are interested and would want me to assign it to you
### 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](https://docs.docker.com/compose/environment-variables/) and [here](https://docs.docker.com/desktop/windows/networking/) 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/
_Follow the steps properly (manual or Docker) and you are good to go._
## Contributing
- Go to `Contributing.md`
## DEMO
#### VIDEO - [Watch the video](https://www.youtube.com/watch?v=bUAAgfGOfYg)
_Video Last Updated on 7th March, 2022_
#### IMAGES
