The individual and team project for this class are designed to mirror the experiences of a software engineer joining a new development team: you will be “onboarded” to our codebase, make several individual contributions, and then form a team to propose, develop and implement new features. The codebase that we’ll be developing on is a Fake Stack Overflow project (let’s call it HuskyFlow). You will get an opportunity to work with the starter code which provides basic skeleton for the app and then additional features will be proposed and implemented by you! All implementation will take place in the TypeScript programming language, using React for the user interface.

Getting Started

Run npm install in the root directory to install all dependencies for the client, server, and shared folders.

{ : .note } Refer to IP1 and IP2 for further instructions related to setting up MongoDB, setting environment variables, and running the client and server.

Codebase Folder Structure

• client: Contains the frontend application code, responsible for the user interface and interacting with the backend. This directory includes all React components and related assets.
• server: Contains the backend application code, handling the logic, APIs, and database interactions. It serves requests from the client and processes data accordingly.
• shared: Contains all shared type definitions that are used by both the client and server. This helps maintain consistency and reduces duplication of code between the two folders. The type definitions are imported and shared within each folder's types/types.ts file.

Database Architecture

The schemas for the database are documented in the directory server/models/schema. A class diagram for the schema definition is shown below:

API Routes

/answer

Endpoint	Method	Description
/addAnswer	POST	Add a new answer

/comment

Endpoint	Method	Description
/addComment	POST	Add a new comment

/messaging

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

/question

Endpoint	Method	Description
/getQuestion	GET	Fetch questions by filter
/getQuestionById/	GET	Fetch a specific question by ID
/addQuestion	POST	Add a new question
/upvoteQuestion	POST	Upvote a question
/downvoteQuestion	POST	Downvote a question

/tag

Endpoint	Method	Description
/getTagsWithQuestionNumber	GET	Fetch tags along with the number of questions
/getTagByName/	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/	GET	Fetch user details by username
/getUsers	GET	Fetch all users
/deleteUser/	DELETE	Delete a user by username
/updateBiography	PATCH	Update user biography

/chat

Endpoint	Method	Description
/createChat	POST	Create a new chat.
/:chatId/addMessage	POST	Add a new message to an existing chat.
/:chatId	GET	Retrieve a chat by its ID, optionally populating participants and messages.
/:chatId/addParticipant	POST	Add a new participant to an existing chat.
/getChatsByUser/:username	GET	Retrieve all chats for a specific user based on their username.

/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

Running Stryker Mutation Testing

Mutation testing helps you measure the effectiveness of your tests by introducing small changes (mutations) to your code and checking if your tests catch them. To run mutation testing with Stryker, use the following command in server/:

npm run stryker

{ : .note } In case you face an "out of memory" error while running Stryker, use the following command to increase the memory allocation to 4GB for Node.js:

node --max-old-space-size=4096 ./node_modules/.bin/stryker run

Community Overflow

---

🛠️ Local Setup Instructions

1. Clone the Repository

git clone https://github.com/neu-cs4530/spring25-team-project-spring25-project-group-212
cd spring25-team-project-spring25-project-group-212

2. Install Dependencies

Run the following in the root, client, and server directories:

npm install

3. Environment Variables

In the client directory, create a .env file with:

REACT_APP_SERVER_URL=http://localhost:8000

In the server directory, create a .env file with:

MONGODB_URI=mongodb://127.0.0.1:27017
CLIENT_URL=http://localhost:3000
PORT=8000
GEMINI_API_KEY={Add your gemini api key here}

To get a Gemini API key, follow the instructions here: https://aistudio.google.com/welcome

---

☁️ Using Your Own MongoDB Database

1. Create a new cluster on MongoDB Atlas.
2. In Network Access, allow access from anywhere.
3. Connect to your cluster; it should open in MongoDB Compass.
4. Populate the database:

cd server
npx ts-node populate_db.ts <your_connection_string>/fake_so

---

🚀 Deploying to Render

Server Setup

1. Go to the Render Dashboard and create a new Web Service.
2. Select the GitHub project.
3. Choose:
   • Language: Node
   • Branch: main
   • Root Directory: server
   • Build Command: cd ..; npm install; npm run build --workspace=server
   • Start Command: npm run start:prod
4. Add an environment variable:

MONGODB_URI = <your MongoDB connection string>

5. Deploy the service.

Client Setup

1. Create a new Static Site on Render.
2. Select the GitHub project.
3. Choose:
   • Branch: main
   • Root Directory: client
   • Build Command: cd ..; npm install; npm run build --workspace=shared; npm run build --workspace=client
   • Publish Directory: build
4. Add environment variables:

REACT_APP_SERVER_URL = <your deployed server URL>
CLIENT_URL = <your deployed client URL>

5. Add a "Rewrite" action:

Source: /*  
Destination: /index.html

6. Save and deploy the site.

---