Skip to content

neu-cs4530/spring25-team-project-spring25-project-group-602

Repository files navigation

{¢}
QuidProCode

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.


Table of Contents


About The Project

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.


Key Features

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

Tech Stack

Frontend: React TypeScript CSS3 Socket.io

Backend: NodeJS Express.js TypeScript Socket.io

Database: MongoDB Mongoose

Testing: Jest Supertest Stryker

Shared: TypeScript


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.

Prerequisites

  • Node.js (v16 or later recommended)
  • npm (usually comes with Node.js)
  • MongoDB (running instance, local or cloud)

Installation

  1. Clone the repository:
    git clone https://github.com/your-username/your-repo-name.git
    cd your-repo-name
  2. Install dependencies from the root directory. This will install for client, server, and shared.
    npm install

Running the Application

Environment Variables

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

Running the Server

  1. Navigate to the server directory:
    cd server
  2. Start the server:
    npm start
    The server should now be running on the port specified in server/.env (default: 8000).

Running the Client

  1. Navigate to the client directory:
    cd client
  2. Start the React development server:
    npm start
    The client application should open automatically in your browser at http://localhost:3000 (or the port specified by Create React App).

Testing

Running Server Tests

From the server/ directory:

npm test

This will run Jest tests defined in the server/tests directory.


Database Schema

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
Loading

API Routes

The backend exposes the following REST API endpoints:

/answer

Endpoint Method Description
/addAnswer POST Add a new answer

/badge

Endpoint Method Description
/getBadges GET Get all badges

/badgeProgresses

Endpoint Method Description
/purchaseBadge PATCH Purchase an unlocked badge
/getUserBadges/:username GET Get badge progress for a user

/chat

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

/codeCoins

Endpoint Method Description
/updateCodeCoins PATCH Update user's wallet

/comment

Endpoint Method Description
/addComment POST Add a new comment

/games

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

/messaging

Endpoint Method Description
/addMessage POST Add a new message
/getMessages GET Retrieve all messages

/notifications

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

/question

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

/tag

Endpoint Method Description
/getTagsWithQuestionNumber GET Fetch tags along with the number of questions
/getTagByName/:name GET Fetch a specific tag by name

/user

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

About

neu-cs4530-spring25-team-project

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages