mayank0255/stackoverflow-clone-frontend

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

Stack-Overflow-Clone-V2-Fast.mp4

🌐 Website | 📹 Demo Video

API Hosted On

• stackoverflow-clone-api.onrender.com (Primary)
• 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

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 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 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

stackoverflow-clone-frontend's Issues

[Backend/Frontend]: the speed is slow for loading data

please enhance the loading speed bro

it is great and epic project

connect mysql locally question?

Mayank are you using xamp to start mysql locally?

Consider using Stacks design system

Super rad, keep going! We've got a design system that might get you closer to the production Stack Overflow.

https://stackoverflow.design

It's got a ton of CSS components and atomic CSS classes. Also a bunch of resources like all our icon set (including logos). It's all open source and might help! ✌️

[FullStack]: Configure Eslint

Setup Eslint and Prettier to the project to maintain some coding conventions.

Might introduce Travis-CI as well for testing.

[Frontend]: Make the app responsive

Make the client-side responsive as it is not now.

[Frontend]: Setup React Skeleton Screens For Tags & Users Page

Can watch this YouTube playlist for reference - The Net Ninja

Set up the Skeletons for Tags Screen and Users Screen

Add new posts to database!!! from python terminal - it not show in all questions list

I add this line to database
{'id': 8, 'title': 'This is a simple herpes virus-jkjfghdkfjghdkghkgjhdkg', 'body': 'jkljlkjlj ghjgjg ghjhgjhg hghjghj', 'views': 0, 'created_at': datetime.datetime(2021, 1, 15, 3, 59, 13), 'user_id': 8, 'vote': 23, 'unique_id': 1, 'counter': 0, 'language': 'english'}]
sucessfully

>>> def insertDBq(body,user_id,id,vote,unique_id,language,title):
...     mydb=mysql.connector.connect(host="localhost",user="root",password="password",database="stack_overflow_v2");
...     string="""REPLACE INTO posts(body, user_id, id, vote, unique_id, language,title) VALUES ('%s',%d,%d,%d,%d,'%s','%s');""" % (body,int(user_id),id,int(vote),unique_id,language,title);
...     mycursor.execute(string);
...     mydb.commit();
...     return print(mycursor.rowcount, "record inserted.");
... 
>>> insertDBq('jkljlkjlj ghjgjg ghjhgjhg hghjghj',8,8,23,1,'english','This is a simple herpes virus-jkjfghdkfjghdkghkgjhdkg')
1 record inserted.

but it won't to show at main page and when i got to mysite.com/questions/8 throw error to me 404

[BUG]: Rich Text Editors are showing white

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

[Frontend]: Convert the project into an unique project

Speed Optimization

Hey Mayank0255!
I can implement Caching to for fast loading ,If you assign me.

[Backend]: Convert back-end for use ES Module instead CommonJS

Proposal

My proposal is to convert the import and export module way for ESModule. It is good standard mainly if you think use TypeScript in future.

[Fullstack]: Enable multiple tags

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Fullstack]: Implement voting for answers

As i see, it's need to:

1. Add vote counting for answers in database
2. Add handling of voting on client and saving to DB on server.

Implement package-by-feature conventions in client side

Currently the client side is in package-by-layer state which is not recommended for production code

Refactor the code base

• Distribute the code using the best practices of Node.js
• Introduce necessary setup packages like morgan for logging, compression
• Add a response handler
• Improve the add post, comment and answer functionalities in redux
• setup pool and remove connection
• Apply best practices for querying MySQL
• Follow one kind of naming nomenclature - preferably camel case

Introduce edit functionality

Required in:

• Editing post
• Editing answer
• Editing comment

This will be done by creating patch or put routes

I try to modify react app and get link to Question inside sidebar component

import React from 'react';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getPost } from '../../redux/posts/posts.actions';
import { ReactComponent as GlobalIcon } from '../../assets/Globe.svg';
import './SideBar.styles.scss';

const SideBar = ({ getPost, post: { title, id } }) => (
    <div className='side-bar-container'>
        <div className='side-bar-tabs'>

            <NavLink exact activeClassName='active' className='home-link nav_link' to='/' >
                <p>Home</p>
            </NavLink>

            <div className='public-tabs'>
                <p className='title fc-light'>PUBLIC</p>
                <NavLink activeClassName='active' className='icon-link nav_link' to='/questions' >
                    <p>
                        <GlobalIcon className='icon' />
                        Stack Overflow
                    </p>
                </NavLink>
                <NavLink activeClassName='active' className='link nav_link' to={id} >
                    <p>Tags</p>
                </NavLink>
                <NavLink activeClassName='active' className='link nav_link' to='/users' >
                    <p>${ title }</p>
                </NavLink>
                <NavLink activeClassName='active' className='link nav_link' to='/jobs' >
                    <p>Jobs</p>
                </NavLink>
            </div>
            <div className='teams-tabs'>
                <p className='title fc-light'>TEAMS</p>
            </div>
        </div>
    </div>

);
SideBar.propTypes = {
    getPost: PropTypes.func.isRequired,
    post: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    post: state.post
});

export default connect(mapStateToProps, { getPost })(SideBar);

I get error

TypeError: Cannot read property 'pathname' of undefined
(anonymous function)
/Users/andrejeremcuk/Stackoverflow-Clone/modules/NavLink.js:50
  47 |   resolveToLocation(to, currentLocation),
  48 |   currentLocation
  49 | );
> 50 | const { pathname: path } = toLocation;
     | ^  51 | // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202
  52 | const escapedPath =
  53 |   path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");

I modify sidebar in that way:

`import React from 'react';
import { NavLink } from 'react-router-dom';

import { ReactComponent as GlobalIcon } from '../../assets/Globe.svg';
import './SideBar.styles.scss';

const SideBar = () => (
    <div className='side-bar-container'>
        <div className='side-bar-tabs'>

            <NavLink exact activeClassName='active' className='home-link nav_link' to='/' >
                <p>Home</p>
            </NavLink>

            <div className='public-tabs'>
                <p className='title fc-light'>PUBLIC</p>
                <NavLink activeClassName='active' className='icon-link nav_link' to='/questions' >
                    <p>
                        <GlobalIcon className='icon' />
                        Stack Overflow
                    </p>
                </NavLink>
                <NavLink activeClassName='active' className='link nav_link' to='/tags' >
                    <p>Tags</p>
                </NavLink>
                <NavLink activeClassName='active' className='link nav_link' to='/users' >
                    <p>Users</p>
                </NavLink>
                <NavLink activeClassName='active' className='link nav_link' to='/jobs' >
                    <p>Jobs</p>
                </NavLink>
            </div>
            <div className='teams-tabs'>
                <p className='title fc-light'>TEAMS</p>
            </div>
        </div>
    </div>

);

export default SideBar;`

DB connection error help?

when I run server locally I got Error: Unknown database 'stack_overflow_v2' error will you help me fix that?

Setup an Error 404 Page

Front-end & Back-end update

Front-end:

• Apply momentjs
• Remove custom date service

Back-end:

• Setup cors
• Setup Helmet

Root directory cleanup

Add new features to the project

• Add gravatars
• Single post views
• Profile views
• Change title based on the current page
• Search Tags
• Search Users
• Add tag description
• UI improvements
• Create relevant components
• Sort posts by various parameters
• Sort tags by various parameters
• Sort Users by various parameters
• Sort Answers in a Post
• Search Questions
• Implement getSingleTag endpoint

[Backend/Frontend]: pagination request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Currently, front-end paging is used. When there is a lot of data, the loading page will crash.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Expect to change to back-end interface paging to speed up page loading.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Frontend]: Improve the Users Page

• Show the questions asked by the user.
• Show tags

[BUG]: How to we actually see the frontend of site ?

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

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

2. Run these commands then -
   npm run installDep (To install all the dependencies)
   npm run auditDep (Run this to audit fix all the vulnerabilities)

3. Run databaseConfig.sql file in the mysql client
   source /data/databaseConfig.sql

4. Run seed.sql file in the mysql client for seed data
   source /data/seed.sql

5. Start the servers
   npm run dev

Expected behavior
trying to see the font end as shown in the demo.

Screenshots

Additional context
Add any other context about the problem here.

[Frontend]: Add Project Socials to the website

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Frontend]: Add Docker Support in front-end

eslint error

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

C:\Users\DELL\nodeapps\stack\node_modules\eslint (version: 7.32.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if C:\Users\DELL\nodeapps\stack\node_modules\eslint is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

7. Try running npm ls eslint in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

[Frontend]: Make the app responsive

Make the client-side responsive as it is not now.

One more thing I would like to state is that while working on it, keep in mind the component wise SCSS styling and to maintain that as closely as possible.

[Frontend]: Implement pagination to the App

Add pagination in the front-end on pages:

• HomePage
• QuestionsPage
• TagsPage
• UsersPage

The pagination for the HomePage and QuestionsPage should look similar to this:

Don't add the counts per page thing, if possible you can go ahead or else the pagination will begin after 10 PostItem Components

And for TagsPage and UsersPage, it should look like this:

The pagination should begin after 12 TagPanel Components

Kindly check for all the cases file paginating like on going forward how the paginate component should look like and all.

Feel free to tag me if there's any issue 😄

[Frontend] Setup New Color Schemes

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Frontend]: Setup React Skeleton Screens For Single Tag & User Pages

Can watch this YouTube playlist for reference - The Net Ninja

Set up the Skeletons for Single Tag Screen and Single User Screen

[Frontend]: Redesign The Top Questions Page

It should look similar to this

[Frontend]: Style Improvement

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Trouble Setting up MySQL

Hey! I'm facing issues to setup database locally cause I never use SQL database before ''m only use mongodb But I know mySQL syntax. Will you tell me step by step how do I setup db locally?

[Frontend]: Setup React Skeleton Screens For Home & Questions Pages

Can watch this YouTube playlist for reference - The Net Ninja

Set up the Skeletons for Home Screen and All Questions Screen

[Frontend]: Setup Markdown Editor

Apply a draft.js or slate.js WYSIWYG framework for React. Apply these to -

• Ask Question / Post Form
• Answer Form

Add a MySQL seeder

Seed data for:

• Users
• Posts
• Tags
• Answers
• Comments

Write MySQL script for this which the developer can run to get you started

Major Project Update: Frontend and backend code split 🎉 🎉

The Frontend code will remain in this Github Repo, and then the backend code will be shifted to Stackoverflow-Clone-Backend. This repo will be renamed to Stackoverflow-Clone-Frontend.

This update will be done as the project is expanding and the number of contributors are increasing, problems related to the setup, code style management and code checking are also increasing.

Benefit of doing this is to allow better code management, allow more growth to the project, and open the scope of deploying the code.

[Proposal]: Add commit message docs in Readme for commitlint

Proposal

Instructions on writing good commit messages should be included in the documentation for husky commit msg to work.
Reference - https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/

[Frontend]: Add Some Basic Validations For Better UX

1. Max length limit for Tag Name while creation: 25 Characters
2. All Tag Names Should Be In English, So Translate it or don't allow it
3. Users Per Page Should Be 15, not 16
4. Validate the language users are inputting, dont allow any abuses or curses

[FEATURE]: Implement linters

[Backend/Frontend]: pagination request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Currently, front-end paging is used. When there is a lot of data, the loading page will crash.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Expect to change to back-end interface paging to speed up page loading.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Proposal]: Hosting the website

Proposal

Could you host/deploy the code in a basic site hosted like vercel/heroku/firebase?

I would like to assign this work to @mrvishalsharma

[Frontend]: Add Text Localization To All The Pages

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Setup husky to the project

This is to save some time reviewing the code and then changing the linting errors. Which will be done by locally automating this process before committing the code

Husky Package

Can you create a video for README steps to use whole application.

Proposal

[Frontend]: Add Spinners To All Actionable Buttons

Add spinners to all buttons so that when the user clicks a button, it shows a spinner and the user gets to know that some process is going on

[BUG]: State not getting updated

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

[Backend/Frontend]: Change the name/icons/logos

I think you should remove the stackoverflow logo, name, trademarks for your project (https://stackoverflow.com/legal/trademark-guidance) and use a custom name.