Q&A Forum App

Q&A Forum application, a full-stack platform built with React, Node.js (Express.js), and MySQL2. This project was independently designed to create a user-friendly forum, allowing users to ask questions, provide and vote for the answers, similar to Stack Overflow.

The project follows a microservices architecture with separate services for user registration, login, questions, and answers. Each service has dedicated routes, controllers, and models, sharing a common database. Communication is streamlined through a unified API under the '/api' endpoint, promoting modularity.

React-powered interface leverages React components and hooks to deliver real-time updates.

💻 Demo

To use all the functionality of the website, you need to register your own user account or login using the following credentials:

• Email: hermionegranger@email.com
• Password: secret123

Note that users can only modify and delete their own questions and answers.

🎨 Main features

• Voting System: Delete a vote by clicking the same icon, post a vote when no prior vote exists, or patch a vote by toggling between different icons.
• Full-Stack Design: Independently crafted the project design, ensuring a cohesive and user-friendly experience.
• User Authentication: Incorporated JSON tokens for secure user authentication.
• Data Validation: Implemented validation both in the backend and frontend for robust data integrity.
• Responsive design: Ensured a seamless experience across various devices.
• Database: The database setup for questions, answers, answer votes, and users, uses constraints to maintain data integrity and relational links, automating updates and deletions.

⚙️ Functionality

Users

• Register
• Log in
• Logout

Questions

• View: Browse a list of questions, sorted by creation date or the number of answers in ascending or descending order.
• Filter: Filter questions based on whether they are answered or unanswered.
• Ask: Post a new question (available only when logged in).
• Update: Modify your posted question, with the UI indicating that the question has been updated (available only when logged in).
• Delete: Remove your own question (available only when logged in).

Answers

• View: Explore answers to questions
• Answer: Post responses to questions (available only when logged in).
• Update: Modify your own answer, with the UI indicating that the response has been updated (available only when logged in).
• Delete: Remove your own response (available only when logged in).
• Like/Dislike/Reset: Express preferences for other users' answers (available only when logged in).

🔧 Technologies used

🖼️ Front-end

• JavaScript library: React
• Declarative routing: React Router DOM
• Form handling: Formik
• Schema builder for validation: Yup
• Toast notifications: React Hot Toast
• Type checking: PropTypes

🏗️ Back-end

• Framework for Node.js: Express
• Database client: MySQL2
• Authentication tokens: JsonWebToken(JWT)
• Password hashing: Bcryptjs
• Object schema validation: Joi
• Code linting: ESLint with Airbnb Style Guide
• Environment configuration: Dotenv
• HTTP request logger: Morgan
• Automatic restarting: Nodemon

🚀 Getting started

🔨 Configure files

Rename the .env.example files in the server and client folders to .env and put your configuration variables in it.

# Rename
mv server/.env.example server/.env && mv client/.env.example client/.env

To create the necessary database tables for this project in your MySQL database, run the qa_forum.sql file located in the server/db/ directory using your preferred method (MySQL CLI or using GUI tool like phpMyAdmin or MySQL Workbench). The file incorporates sample data to provide a foundation for testing and development purposes.

🎈 Start the project

# Install project dependencies
npm i

# Install server and client dependencies
npm run iall

# Start both the server and the client in development mode simultaneously
npm run all

🔼 Back To Top