Stack Overflow Clone

Stack Overflow: Q&A hub for programmers. Empowers employers to attract top talent with featured job listings and company pages.

Technologies and Tools:

To achieve the vision of this platform, I am utilizing a well-rounded technology stack. On the frontend, I am using HTML, CSS, and JavaScript, with ReactJS as the frontend library of choice. ReactJS empowers me to create interactive and responsive user interfaces, allowing for seamless navigation and user interactions. On the backend, I have chosen Node.js as the server-side runtime, paired with Express.js as the web application framework. This combination enables efficient handling of server-side operations, such as routing and middleware integration.

Tools used in client-side:

Axios
JWT(JSON Web Token)
React – router-dom
Redux, React-Redux
Redux-thunk

Tools used in server-side:

Bcryptjs
JWT(JSON Web Token)
Express

Dotenv
Cors
Mongoose
nodemon

Features

User Authentication: Implement a secure login and registration system using username and password.
CRUD for Questions, Answers, and Comments: Allow users to Create, Read, Update, and Delete their questions, answers, and comments.
Voting System: Enable users to upvote and downvote questions and answers to indicate their relevance or quality.
Tagging System: Organize questions using tags to make it easier for users to find relevant content.
Page Views Tracking: Record and display the number of views for each question page.
Dedicated Pages: Create separate pages for tags, registered users, and additional features as needed.
Sorting Options: Implement various sorting options for questions, including hot, votes, views, newest, and oldest.
Search Functionality: Allow users to search for questions based on titles and body content.
Pagination: Implement a "Load More" button for paginating through long lists of posts.
Error Handling: Implement robust error handling to prevent application crashes and provide a smooth user experience.
Toast Notifications: Show notifications for actions like adding questions, deleting comments, etc., to keep users informed.
Loading Spinners: Display loading spinners during data fetching processes to indicate progress to users.
Formatted Dates: Show user-friendly, formatted dates for when questions, answers, and comments were added or updated.
Dark Mode Toggle: Provide a dark mode option with local storage to save user preferences.
Responsive UI: Ensure that the user interface is responsive and optimized for all screen sizes and devices.
Sign up

Log in

Homepage

Users Page

Tags Page

Env variable:

Create a .env file in the server directory and add the following:

MONGODB_URI = "Your Mongo URI"
PORT = 4000
SECRET = "Your JWT secret"

Client:

Open client/src/backendUrl.js & change the "backend" variable to "http://localhost:4000"

cd client
npm install
npm start

Server:

Note: Make sure that you have installed 'nodemon' as a global package.

cd server
npm install
npm run dev