Answers worth rewarding.
A feature-rich Q&A platform mimicking Stack Overflow, enhanced with gamification, real-time features, and a unique rewards system. Built as a class project for CS4530.
- About The Project
- Key Features
- Tech Stack
- Getting Started
- Running the Application
- Testing
- Database Schema
- API Routes
QuidProCode (formerly FakeStackOverflow) is a full-stack web application designed as a class project to emulate the core functionalities of Stack Overflow. It goes beyond a simple clone by incorporating engaging features like:
- CodeCoins: A virtual currency earned through participation and used for rewards and betting.
- Gamification: Play classic games like Nim and Connect Four against other users, with optional CodeCoin stakes.
- Badges & Leaderboards: Earn badges for achievements and compete on leaderboards across various metrics.
- Real-time Interaction: Features like public chat, direct messaging, and live notifications keep users connected.
This project demonstrates proficiency in modern web development technologies, including React, Node.js, Express, MongoDB, TypeScript, and WebSockets.
Core Q&A Platform:
- Ask, answer, and comment on questions.
- Tag questions for better organization and discoverability.
- Vote on questions and answers.
- Mark answers as the "Best Answer".
- Search for questions by keywords and tags.
CodeCoins & Rewards:
- Earn CodeCoins (
¢) for participation (e.g., daily login, best answers). - Receive a starting bonus of 10¢ upon signup.
- Place bounties on questions to incentivize answers.
- Gift CodeCoins to other users via direct messages.
Gamification & Social:
- Play real-time Nim and Connect Four against other users.
- Optionally stake CodeCoins on game outcomes.
- Unlock and purchase badges based on achievements (viewable in the Badge Shop and user profiles).
- Compete with other users based on wallet balance, login streaks, questions posted/answered, and games won.
Real-time Communication:
- Public Chat Room: Engage in discussions with all online users.
- Direct Messaging: Have private one-on-one conversations.
- Notifications: Receive real-time updates for events like new answers, comments, votes, rewards, and messages.
User Profiles & Management:
- View user profiles with stats, badges, and activity.
- Update profile information (biography, email).
- Reset passwords and manage email notification preferences.
- Secure authentication (Login/Signup).
Run npm install in the root directory to install all dependencies for the shared folders. Navigate to the server and the client folders, and run npm install in each to install the correct dependencies for each workspace.
- Node.js (v16 or later recommended)
- npm (usually comes with Node.js)
- MongoDB (running instance, local or cloud)
- Clone the repository:
git clone https://github.com/your-username/your-repo-name.git cd your-repo-name - Install dependencies from the root directory. This will install for
client,server, andshared.npm install
You'll need to set up .env files in both the client and server directories.
server/.env:
# Example server environment variables
MONGODB_URI=mongodb://127.0.0.1:27017/fake_so # Your MongoDB connection string
CLIENT_URL=http://localhost:3000 # Frontend URL for CORS
PORT=8000 # Port for the server
EMAIL_USER=youremail@gmail.com # Gmail address for sending emails
EMAIL_PASS=yourapppassword # Gmail App Password (https://support.google.com/accounts/answer/185833)client/.env:
# Example client environment variables
REACT_APP_SERVER_URL=http://localhost:8000 # Backend server URL- Navigate to the server directory:
cd server - Start the server:
The server should now be running on the port specified in
npm start
server/.env(default: 8000).
- Navigate to the client directory:
cd client - Start the React development server:
The client application should open automatically in your browser at
npm start
http://localhost:3000(or the port specified by Create React App).
From the server/ directory:
npm testThis will run Jest tests defined in the server/tests directory.
The database schemas define the structure of data stored in MongoDB. They are located in server/models/schema.
A class diagram visualizing the schema relationships is available here:
classDiagram
direction LR
class User {
+ObjectId _id
+string username
+string password (hashed)
+Date dateJoined
+Date lastLogin
+string biography
+string email
+number wallet
+number loginStreak
+Progress progress
+boolean allowEmailNotifications
}
class Question {
+ObjectId _id
+string title
+string text
+ObjectId[] tags
+ObjectId[] answers
+string askedBy
+Date askDateTime
+string[] views
+string[] upVotes
+string[] downVotes
+ObjectId[] comments
+number bounty
+string[] addedToBounty
+ObjectId bestAnswerId (nullable)
}
class Answer {
+ObjectId _id
+string text
+string ansBy
+Date ansDateTime
+ObjectId[] comments
}
class Comment {
+ObjectId _id
+string text
+string commentBy
+Date commentDateTime
}
class Tag {
+ObjectId _id
+string name
+string description
}
class Chat {
+ObjectId _id
+string[] participants
+ObjectId[] messages
+Date createdAt
+Date updatedAt
}
class Message {
+ObjectId _id
+string msg
+string msgFrom
+Date msgDateTime
+string type ('global' | 'direct')
}
class Game {
+ObjectId _id
+string gameID
+string[] players
+object state
+string gameType ('Nim' | 'ConnectFour')
+number pot
+number stake
}
class NimGameState~GameState~ {
+object[] moves
+number remainingObjects
}
class ConnectFourGameState~GameState~ {
+number[][] board
+object[] moves
+number currentPlayer
}
class Badge {
+ObjectId _id
+string name
+number price
+string description
+Requirements requirements
}
class BadgeProgress {
+ObjectId _id
+ObjectId badgeId
+string username
+boolean unlocked
+boolean owned
}
class Notification {
+ObjectId _id
+string content
+string user
+Date dateTime
+boolean read
}
User "1" -- "*" Question : asks
User "1" -- "*" Answer : provides
User "1" -- "*" Comment : posts
User "1" -- "*" Message : sends
User "1" -- "*" Chat : participates
User "1" -- "*" Game : playsIn
User "1" -- "*" BadgeProgress : ownsProgress
User "1" -- "*" Notification : receives
Question "1" -- "*" Tag : hasTag
Question "1" -- "*" Answer : hasAnswer
Question "1" -- "*" Comment : hasComment
Answer "1" -- "*" Comment : hasComment
Chat "1" -- "*" Message : contains
Badge "1" -- "*" BadgeProgress : hasProgress
The backend exposes the following REST API endpoints:
| Endpoint | Method | Description |
|---|---|---|
| /addAnswer | POST | Add a new answer |
| Endpoint | Method | Description |
|---|---|---|
| /getBadges | GET | Get all badges |
| Endpoint | Method | Description |
|---|---|---|
| /purchaseBadge | PATCH | Purchase an unlocked badge |
| /getUserBadges/:username | GET | Get badge progress for a user |
| Endpoint | Method | Description |
|---|---|---|
| /createChat | POST | Create a new chat |
| /:chatId/addMessage | POST | Add a message to a chat |
| /:chatId | GET | Retrieve a chat by ID |
| /:chatId/addParticipant | POST | Add a participant to a chat |
| /getChatsByUser/:username | GET | Retrieve chats for a user |
| Endpoint | Method | Description |
|---|---|---|
| /updateCodeCoins | PATCH | Update user's wallet |
| Endpoint | Method | Description |
|---|---|---|
| /addComment | POST | Add a new comment |
| Endpoint | Method | Description |
|---|---|---|
| /create | POST | Create a new game |
| /join | POST | Join an existing game |
| /leave | POST | Leave a game |
| /games | GET | Retrieve all games |
| Endpoint | Method | Description |
|---|---|---|
| /addMessage | POST | Add a new message |
| /getMessages | GET | Retrieve all messages |
| Endpoint | Method | Description |
|---|---|---|
| /addNotification | POST | Add a new notification |
| /getNotifications/:username | GET | Get notifications for a user |
| /readNotification | PATCH | Mark a notification as read |
| /deleteNotification | DELETE | Delete a notification |
| Endpoint | Method | Description |
|---|---|---|
| /getQuestion | GET | Fetch questions by filter |
| /getQuestionById/:qid | GET | Fetch a question by ID |
| /addQuestion | POST | Add a new question |
| /upvoteQuestion | POST | Upvote a question |
| /downvoteQuestion | POST | Downvote a question |
| /resolveQuestion | POST | Mark the best answer |
| /addBountyToQuestion | PATCH | Add bounty to a question |
| Endpoint | Method | Description |
|---|---|---|
| /getTagsWithQuestionNumber | GET | Fetch tags along with the number of questions |
| /getTagByName/:name | GET | Fetch a specific tag by name |
| Endpoint | Method | Description |
|---|---|---|
| /signup | POST | Create a new user account |
| /login | POST | Log in as a user |
| /resetPassword | PATCH | Reset user password |
| /getUser/:username | GET | Fetch user details by username |
| /getUsers | GET | Fetch all users |
| /deleteUser/:username | DELETE | Delete a user by username |
| /updateBiography | PATCH | Update user biography |
| /updateEmail | PATCH | Update user email |
| /updateEmailPreferences | PATCH | Update email notification prefs |
| /updateLoginStreak | PATCH | Update user login streak |