Feedback

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "jest.rootPath": "./server",
   "jest.jestCommandLine": "npx jest",
-  "jest.runMode": "on-demand"
+  "jest.runMode": "on-demand",
+  "postman.settings.dotenv-detection-notification-visibility": false
 }

README.md

@@ -1,3 +1,4 @@
+[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-22041afd0340ce965d47ae6ef1cefeee28c7c493a6346c4f15d667ab976d596c.svg)](https://classroom.github.com/a/fE-a_qEp)
 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
@@ -101,3 +102,105 @@ npm run stryker
 ```sh
 node --max-old-space-size=4096 ./node_modules/.bin/stryker run
 ```
+
+# Community Overflow
+---
+
+## 🛠️ Local Setup Instructions
+
+### 1. Clone the Repository
+
+```bash
+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:
+
+```bash
+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](https://aistudio.google.com/welcome)
+
+---
+
+## ☁️ Using Your Own MongoDB Database
+
+1. Create a new cluster on [MongoDB Atlas](https://www.mongodb.com/cloud/atlas).
+2. In **Network Access**, allow access from anywhere.
+3. Connect to your cluster; it should open in MongoDB Compass.
+4. Populate the database:
+
+```bash
+cd server
+npx ts-node populate_db.ts <your_connection_string>/fake_so
+```
+
+---
+
+## 🚀 Deploying to Render
+
+### Server Setup
+
+1. Go to the [Render Dashboard](https://dashboard.render.com/) 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.
+
+---

client/globals.d.ts

@@ -0,0 +1,4 @@
+declare module '*.wav' {
+  const src: string;
+  export default src;
+}

client/package.json

@@ -3,15 +3,31 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^3.15.0",
+    "@chakra-ui/theme-tools": "^2.2.6",
     "@cypress/instrument-cra": "^1.4.0",
     "@fake-stack-overflow/shared": "^1.0.0",
-    "axios": "^1.7.9",
+    "@jitsi/react-sdk": "^1.4.4",
+    "@tldraw/sync": "^3.11.0",
+    "axios": "^1.8.4",
+    "chart.js": "^4.4.8",
+    "date-fns": "^4.1.0",
+    "emoji-picker-react": "^4.12.2",
+    "highlight.js": "^11.11.1",
     "mongodb": "6.12.0",
+    "next-themes": "^0.4.6",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^6.28.1",
     "react-scripts": "5.0.1",
-    "socket.io-client": "^4.8.1"
+    "react-uploader": "^3.43.0",
+    "rehype-highlight": "^7.0.2",
+    "socket.io-client": "^4.8.1",
+    "tldraw": "^3.10.3",
+    "uploader": "^3.48.3"
   },
   "scripts": {
     "start": "react-scripts -r @cypress/instrument-cra start",

client/public/index.html

@@ -21,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Community Overflow</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

client/src/components/auth/login/index.tsx

@@ -20,7 +20,7 @@ const Login = () => {
 
   return (
     <div className='container'>
-      <h2>Welcome to FakeStackOverflow!</h2>
+      <h2>Welcome to Community Overflow!</h2>
       <h3>Please login to continue.</h3>
       <form onSubmit={handleSubmit}>
         <h4>Please enter your username.</h4>

client/src/components/auth/signup/index.tsx

@@ -21,7 +21,7 @@ const Signup = () => {
 
   return (
     <div className='container'>
-      <h2>Sign up for FakeStackOverflow!</h2>
+      <h2>Sign up for Community Overflow!</h2>
       <form onSubmit={handleSubmit}>
         <h4>Please enter your username.</h4>
         <input

client/src/components/fakestackoverflow.tsx

@@ -17,6 +17,16 @@ import UsersListPage from './main/usersListPage';
 import ProfileSettings from './profileSettings';
 import AllGamesPage from './main/games/allGamesPage';
 import GamePage from './main/games/gamePage';
+import NewCommunityPage from './main/newCommunity';
+import CommunityPage from './main/communityPage';
+import NewQuestionInCommunityPage from './main/communityPage/newQuestionInCommunity';
+import CommunitiesListPage from './main/communitiesListPage';
+import StatisticsPage from './main/statisticsPage';
+import BulletinBoardPage from './main/communityPage/bulletinBoardPage';
+import UserCommunityInvitesPage from './profileSettings/userCommunityInvitesPage';
+import CommunityInvitesPage from './main/communityPage/communityInvitesPage';
+import CommunityStatisticsPage from './main/communityPage/communityStatistics';
+import CommunityChat from './main/communityPage/communityChat';
 
 const ProtectedRoute = ({
   user,
@@ -66,6 +76,17 @@ const FakeStackOverflow = ({ socket }: { socket: FakeSOSocket | null }) => {
             <Route path='/user/:username' element={<ProfileSettings />} />
             <Route path='/games' element={<AllGamesPage />} />
             <Route path='/games/:gameID' element={<GamePage />} />
+            <Route path='/new/community' element={<NewCommunityPage />} />
+            <Route path='/community/:id' element={<CommunityPage />} />
+            <Route path='/new/questionInCommunity/:id' element={<NewQuestionInCommunityPage />} />
+            <Route path='/community' element={<Navigate to='/community/list' replace />} />
+            <Route path='/community/list' element={<CommunitiesListPage />} />
+            <Route path='/statistics' element={<StatisticsPage />} />
+            <Route path='/community/:id/bulletinBoard' element={<BulletinBoardPage />} />
+            <Route path='/user/:username/communityInvites' element={<UserCommunityInvitesPage />} />
+            <Route path='/community/:id/invites' element={<CommunityInvitesPage />} />
+            <Route path='/community/:id/statistics' element={<CommunityStatisticsPage />} />
+            <Route path='/community/:id/chat' element={<CommunityChat />} />
           </Route>
         }
       </Routes>

client/src/components/header/index.css

@@ -39,4 +39,4 @@
 
 .view-profile-button:active {
   background-color: #003f7f;
-}
+}

client/src/components/header/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Flex, Box, Text, Spacer, Button } from '@chakra-ui/react';
+import { FiLogOut, FiUser } from 'react-icons/fi';
 import useHeader from '../../hooks/useHeader';
 import './index.css';
 import useUserContext from '../../hooks/useUserContext';
@@ -10,30 +12,35 @@ import useUserContext from '../../hooks/useUserContext';
  * when they press Enter.
  */
 const Header = () => {
-  const { val, handleInputChange, handleKeyDown, handleSignOut } = useHeader();
+  const { handleSignOut } = useHeader();
   const { user: currentUser } = useUserContext();
   const navigate = useNavigate();
+
   return (
-    <div id='header' className='header'>
-      <div></div>
-      <div className='title'>Fake Stack Overflow</div>
-      <input
-        id='searchBar'
-        placeholder='Search ...'
-        type='text'
-        value={val}
-        onChange={handleInputChange}
-        onKeyDown={handleKeyDown}
-      />
-      <button onClick={handleSignOut} className='logout-button'>
-        Log out
-      </button>
-      <button
-        className='view-profile-button'
-        onClick={() => navigate(`/user/${currentUser.username}`)}>
-        View Profile
-      </button>
-    </div>
+    <Flex id='header' className='header' align='center' px={4} py={2}>
+      <Box>
+        <Text fontSize='3xl' fontWeight='bold'>
+          Community Overflow
+        </Text>
+      </Box>
+      <Spacer />
+      <Flex gap={2}>
+        <Button
+          aria-label='View Profile'
+          onClick={() => navigate(`/user/${currentUser.username}`)}
+          variant='ghost'
+          colorScheme='whiteAlpha'>
+          <FiUser />
+        </Button>
+        <Button
+          aria-label='Log Out'
+          onClick={handleSignOut}
+          variant='ghost'
+          colorScheme='whiteAlpha'>
+          <FiLogOut />
+        </Button>
+      </Flex>
+    </Flex>
   );
 };
 

client/src/components/layout/index.css

@@ -18,12 +18,22 @@
   padding: 2% 0 2% 2%;
 }
 
+.right_bottom_padding {
+  padding: 2% 0 1% 2%;
+}
+
 .bold_title {
   font-size: 24px;
   font-weight: 800;
   line-height: 40px;
 }
 
+.not_quite_so_bold_title {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 30px;
+}
+
 .bluebtn {
   background: #3090e2;
   color: #ffffff;