{"id":18836745,"url":"https://github.com/mayank0255/stackoverflow-clone-frontend","last_synced_at":"2025-04-13T02:22:38.089Z","repository":{"id":37545396,"uuid":"251007942","full_name":"Mayank0255/Stackoverflow-Clone-Frontend","owner":"Mayank0255","description":"Clone project of a famous Q/A website for developers built using MySQL, Express, React, Node, Sequelize :globe_with_meridians:","archived":false,"fork":false,"pushed_at":"2024-01-24T19:05:43.000Z","size":13868,"stargazers_count":546,"open_issues_count":19,"forks_count":209,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-08-22T15:45:05.756Z","etag":null,"topics":["api","backend","css","database","express","frontend","hacktoberfest","javascript","mern","mern-stack","mysql","nodejs","react","reactjs","redux","sass","sequelize","sql","stack","stackoverflow"],"latest_commit_sha":null,"homepage":"https://stackoverflow-clone-client.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mayank0255.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Mayank0255"]}},"created_at":"2020-03-29T10:41:07.000Z","updated_at":"2024-08-10T17:55:31.000Z","dependencies_parsed_at":"2024-07-10T14:51:14.620Z","dependency_job_id":null,"html_url":"https://github.com/Mayank0255/Stackoverflow-Clone-Frontend","commit_stats":null,"previous_names":["mayank0255/stack-overflow-clone"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mayank0255%2FStackoverflow-Clone-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mayank0255%2FStackoverflow-Clone-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mayank0255%2FStackoverflow-Clone-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mayank0255%2FStackoverflow-Clone-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mayank0255","download_url":"https://codeload.github.com/Mayank0255/Stackoverflow-Clone-Frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248655012,"owners_count":21140408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","backend","css","database","express","frontend","hacktoberfest","javascript","mern","mern-stack","mysql","nodejs","react","reactjs","redux","sass","sequelize","sql","stack","stackoverflow"],"created_at":"2024-11-08T02:31:47.690Z","updated_at":"2025-04-13T02:22:38.050Z","avatar_url":"https://github.com/Mayank0255.png","language":"JavaScript","readme":"https://user-images.githubusercontent.com/43780137/158059050-481ffa30-e415-4156-aea7-072c817f2ae2.mp4\n\n[![Version](https://img.shields.io/static/v1?label=version\u0026message=2.0.0\u0026color=blue)](https://shields.io/)\n[![NPM](https://img.shields.io/static/v1?label=npm\u0026message=6.8.5\u0026color=blue)](https://shields.io/)\n[![NODE](https://img.shields.io/static/v1?label=node\u0026message=10.12.8\u0026color=success)](https://shields.io/)\n[![MYSQL](https://img.shields.io/static/v1?label=mysql\u0026message=8.0.10\u0026color=blueviolet)](https://shields.io/)\n[![License](https://img.shields.io/badge/license-MIT-green.svg)](https://shields.io/)\n\n### [🌐 Website](https://stackoverflow-clone-client.vercel.app)  |  [📹 Demo Video](https://www.youtube.com/watch?v=bUAAgfGOfYg)\n\n### API Hosted On\n- __[stackoverflow-clone-api.onrender.com](https://stackoverflow-clone-api.onrender.com) (Primary)__\n- __[stackoverflow-clone-backend.herokuapp.com](https://stackoverflow-clone-backend.herokuapp.com)__\n\nAs 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.\n\nThis repo consists of the Frontend code of the project, the backend code is in __[Stackoverflow-Clone-Backend](https://github.com/Mayank0255/Stackoverflow-Clone-Backend)__\n\n## My Tech Stack (MERN)\n\n#### Front-end\n\n- Front-end Framework: `React.js (with Redux)`\n- Styling: `SASS` and `BOOTSTRAP`\n\n#### Back-end\n\n- For handling index requests: `Node.js with Express.js Framework`\n- As Database: `MySQL with Sequelize`\n- API tested using: `POSTMAN`\n\n## Guidelines to setup\n\nThere are two ways to setup the project: manually or using the Dockerfile. Read below for more details:\n\n### Manual Setup\n\n1. Open your local CLI -\n\n   ```\n   mkdir Stackoverflow-Clone\n   cd Stackoverflow-Clone\n   ```\n\n2. Setup the backend code -\n   \n   __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\n\n   - Create a `.env` file and the format should be as given in `.env.example`.\n   - Clone the code \u0026 install the modules-\n\n     ```\n     git clone https://github.com/Mayank0255/Stackoverflow-Clone-Backend.git\n     cd Stackoverflow-Clone-Backend\n\n     npm install\n     ```\n\n   - Open your MySQL Client -\n\n     ```\n     CREATE DATABASE stack_overflow;\n     ```\n     NOTE: Don't forget to keep the database name same in the `.env` and here.\n\n   - Run the index `npm start`.\n\n3. Open a new CLI terminal and goto the root `Stackoverflow-Clone` folder you created in the first step.\n4. Setup the Frontend code -\n\n   - Clone the code \u0026 install the modules-\n\n     ```\n     git clone https://github.com/Mayank0255/Stackoverflow-Clone-Frontend.git\n     cd Stackoverflow-Clone-Frontend\n\n     npm install\n     ```\n\n   - Run the client index `npm start`.\n   \n   __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`\n   Now, it will hit PROD\n\nLet me know if you are interested and would want me to assign it to you\n\n### Docker Setup\n\nThe back-end has support for Docker. So if you want to run the back-end in a container, you need do:\n\n- 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.\n\n- Build the Docker image:\n  ```\n  docker build -t stackoverflowclone .\n  ```\n- Run the container. For example, if you want to run the container in a new terminal, you can do:\n  ```\n  docker run -d -p 5000:5000 stackoverflowclone\n  ```\n\nThe default port of api is 5000. After running the container, you can access the api by typing:\n\n    http://localhost:5000/api/\u003cendpoint that you request - see next section\u003e\n\n_Follow the steps properly (manual or Docker) and you are good to go._\n\n## Contributing\n\n- Go to `Contributing.md`\n\n## DEMO\n\n#### VIDEO - [Watch the video](https://www.youtube.com/watch?v=bUAAgfGOfYg)\n\n_Video Last Updated on 7th March, 2022_\n\n#### IMAGES\n\n\u003cimg src=\"/demo/images/1.png\" width=340px /\u003e\u003cimg src=\"/demo/images/2.png\" width=340px /\u003e\n\u003cimg src=\"/demo/images/3.png\" width=340px /\u003e\u003cimg src=\"/demo/images/4.png\" width=340px /\u003e\n\u003cimg src=\"/demo/images/5.png\" width=340px /\u003e\u003cimg src=\"/demo/images/6.png\" width=340px /\u003e\n\u003cimg src=\"/demo/images/7.png\" width=340px /\u003e\u003cimg src=\"/demo/images/8.png\" width=340px /\u003e\n\u003cimg src=\"/demo/images/9.png\" width=340px /\u003e\u003cimg src=\"/demo/images/10.png\" width=340px /\u003e\n\u003cimg src=\"/demo/images/11.png\" width=340px /\u003e\u003cimg src=\"/demo/images/12.png\" width=340px /\u003e\n","funding_links":["https://github.com/sponsors/Mayank0255"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayank0255%2Fstackoverflow-clone-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmayank0255%2Fstackoverflow-clone-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayank0255%2Fstackoverflow-clone-frontend/lists"}