From ca4530015e332555d931dc8702b3597e1f2d5ae4 Mon Sep 17 00:00:00 2001 From: tye101 Date: Thu, 5 Dec 2024 11:11:12 -0500 Subject: [PATCH 1/5] Update README.md Less about general React. More in line with ATM. --- client/README.md | 95 +++++++++++++++++++----------------------------- 1 file changed, 38 insertions(+), 57 deletions(-) diff --git a/client/README.md b/client/README.md index 58beeacc..71b39849 100644 --- a/client/README.md +++ b/client/README.md @@ -1,70 +1,51 @@ -# Getting Started with Create React App +# Client - Academic Team Management -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +This directory contains the frontend code for the **Academic Team Management** web application, built with **React**. The client side is responsible for providing a user-friendly interface for managing academic teams, students, and projects. -## Available Scripts +## Features -In the project directory, you can run: +- **Role-Based Access**: Secure navigation and functionality based on user roles (e.g., Student, Professor, Admin). +- **Dynamic Translations**: Supports English and French through i18n integration. +- **Responsive Design**: Optimized for desktop and mobile devices. +- **State Management**: Efficient state handling using React's `useState` and `useEffect`. -### `npm start` +## Structure Overview -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. +- **Components**: Reusable UI elements like buttons, forms, and modals. +- **Pages**: Views that correspond to application routes (e.g., Dashboard, Student Groups, Projects). +- **Helpers**: Utility functions and quick scripts for handling specific tasks like session checks. +- **Services**: Comprehensive modules for API interaction and data fetching. +- **Styles**: CSS and styling configurations for maintaining a consistent design. -The page will reload when you make changes.\ -You may also see any lint errors in the console. +## Key Files -### `npm test` +- **`App.js`**: Main application entry point, defines routing and layout. +- **`i18n.js`**: Handles app localization and translations. +- **`.env`**: Configuration file for environment variables (e.g., backend API URL). -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. +## Development Workflow -### `npm run build` +1. **Install Dependencies**: + ```bash + npm install + ``` +2. **Run Development Server**: + ```bash + npm start + ``` + The app will be accessible at `http://localhost:3000`. +3. **Build for Production**: + ```bash + npm run build + ``` -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. +## Environment Variables -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! +- **`REACT_APP_BACKEND_HOST`**: Backend API URL (e.g., `http://localhost:5000`). -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. +## Technologies Used -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can't go back!** - -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. - -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) - -### Analyzing the Bundle Size - -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) - -### Making a Progressive Web App - -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) - -### Advanced Configuration - -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) - -### Deployment - -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) - -### `npm run build` fails to minify - -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) +- **React**: For building the user interface. +- **React Router**: For navigation and routing. +- **i18next**: For internationalization. +- **Axios/Fetch**: For API communication. \ No newline at end of file From 25ee18c61f251ff175e3b35d00c4e63f6ce748cf Mon Sep 17 00:00:00 2001 From: tye101 Date: Thu, 5 Dec 2024 18:45:59 -0500 Subject: [PATCH 2/5] Headers added to top of files --- client/src/Authentication/PrivateRoutes.js | 4 ++++ client/src/Authentication/RoleBasedRoutes.js | 3 +++ client/src/i18n.js | 2 ++ 3 files changed, 9 insertions(+) diff --git a/client/src/Authentication/PrivateRoutes.js b/client/src/Authentication/PrivateRoutes.js index c6c87d68..61dab4cc 100644 --- a/client/src/Authentication/PrivateRoutes.js +++ b/client/src/Authentication/PrivateRoutes.js @@ -1,3 +1,7 @@ +// Only authenticated users can access certain routes. +// If the user is authenticated, it renders the child components (via Outlet). +// If not, the user is redirected to the login page. + import { useState } from 'react' import { Outlet, Navigate } from 'react-router-dom' diff --git a/client/src/Authentication/RoleBasedRoutes.js b/client/src/Authentication/RoleBasedRoutes.js index 26151460..a90514a7 100644 --- a/client/src/Authentication/RoleBasedRoutes.js +++ b/client/src/Authentication/RoleBasedRoutes.js @@ -1,3 +1,6 @@ +// Based on user role, this will point user in the correct route. +// If the role matches, it renders the corresponding child components (via Outlet). +// Otherwise, it redirects the user to a "Not Found" page. import { useState, useEffect } from 'react' import { Outlet, Navigate } from 'react-router-dom' import { getUserType } from '../helpers/UserType' diff --git a/client/src/i18n.js b/client/src/i18n.js index 7bde31cd..5b7ad016 100644 --- a/client/src/i18n.js +++ b/client/src/i18n.js @@ -1,3 +1,5 @@ +// Initializes i18n for internationalization in the app and enables language support with English and French translations. + import i18n from 'i18next' import { initReactI18next } from 'react-i18next' From 9f08cb50daa6c8afe669053594941108fe931fe5 Mon Sep 17 00:00:00 2001 From: tye101 Date: Thu, 5 Dec 2024 18:46:32 -0500 Subject: [PATCH 3/5] README added to folder --- client/src/helpers/README.md | 8 ++++++++ client/src/services/README.md | 6 ++++++ 2 files changed, 14 insertions(+) create mode 100644 client/src/helpers/README.md create mode 100644 client/src/services/README.md diff --git a/client/src/helpers/README.md b/client/src/helpers/README.md new file mode 100644 index 00000000..bdf0677c --- /dev/null +++ b/client/src/helpers/README.md @@ -0,0 +1,8 @@ +### `README` for `helpers` Folder + +--- + +#### **Purpose:** +The `helpers` folder contains scripts designed to perform small, focused tasks that simplify repetitive or complex operations in the application. These scripts are lightweight and often function as "helpers" to other parts of the codebase. + + diff --git a/client/src/services/README.md b/client/src/services/README.md new file mode 100644 index 00000000..2c9a067f --- /dev/null +++ b/client/src/services/README.md @@ -0,0 +1,6 @@ +### `README` for `services` Folder + +--- + +#### **Purpose:** +The `services` folder contains modules that manage core business logic and interactions with external resources, such as APIs, databases, or authentication systems. From 9b29790f32fed6c0872fd2bf56c269040b9a8bc8 Mon Sep 17 00:00:00 2001 From: tye101 Date: Thu, 5 Dec 2024 18:47:01 -0500 Subject: [PATCH 4/5] Update README.md Information to run app is now in the wiki --- README.md | 88 +++---------------------------------------------------- 1 file changed, 4 insertions(+), 84 deletions(-) diff --git a/README.md b/README.md index 7f0f26ff..edd06a5b 100644 --- a/README.md +++ b/README.md @@ -1,89 +1,9 @@ # Academic Team Management -The `Academic Team Management` application is used to automate many of the facilities of managing a large class of multi-person groups and supports the following use cases: +The `Academic Team Management` application is used to automate many of the facilities of managing a large class of multi-person groups. Currently, it is being used by the SEG4910/4911 Software Engineering Capstone Course at the University of Ottawa. By automating essential processes, the system enhances collaboration and efficiency for `students`, `professors`, `TAs`, and `external clients`. -1. Creating lists of projects with a title, description, and other metadata -2. Importing lists of students from Excel -3. Enabling students to form teams, express interest in projects, express an interest in being matched with other students, etc... -4. Allowing the professor and TAs to communicate with students using chat -5. Allowing the professor and TAs to take notes about progress, presentations, etc... -6. Exporting the data to Excel sheets -7. Allowing the professor or TAs to input grades +This project is open-source. -The application is expected to be open-source and allow other professors from different educational institutions to adopt it as their project management system. +For more general information check the [wiki](https://github.com/umple/AcademicTeamManagement/wiki). -For more information check the [general](./docs/general/README.md) and [design](./docs/design/README.md) documents. - -## Development - -### Prerequisites -Make sure to have these technologies installed in your system - - 1. Docker - 2. NodeJs - 3. Python - - -### Building - -#### Locally - -For local development, try to build each service individually - -```sh -# Build the database first -$ ./gradlew startMongo - -# Build the server, make sure to add the password of the DB in the ./scripts/runBackendTests.sh file -$ ./gradlew runBackendLocally - -# Build the frontend -$ ./gradlew runFrontendLocally - -``` - -#### Production - -For prod development, build using all the services using docker-compose -```sh -# To start the app -$ ./gradlew composeUp - -# To stop the app -$ ./gradlew composeDown -``` - -### Testing - -#### Backend Unit Tests - -```sh -# Unit tests -$ ./gradlew runUnitTests -``` - -#### Frontend Unit Tests - -```sh -# Unit tests -$ ./gradlew runReactUnitTests -``` - -#### End-To-End Tests - -```sh -# E2E tests -$ ./gradlew runEndToEndTests - -``` - -### Linting - -You can lint the code locally. - -```sh -$ ./gradlew runReactLint -``` - -### Deployment -See [DevOps](./docs/devops/README.md) section for more information \ No newline at end of file +For a comprehensive guide to using the system, check the [onboarding guide](https://github.com/umple/AcademicTeamManagement/wiki/Onboarding). \ No newline at end of file From 3a7ba79acb0bee6a13c61b5e4ab70fa8768a4cdc Mon Sep 17 00:00:00 2001 From: tye101 Date: Thu, 5 Dec 2024 19:03:05 -0500 Subject: [PATCH 5/5] Update init-mongo.js add comment and header --- init-mongo.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/init-mongo.js b/init-mongo.js index 83c50543..6158ff1e 100644 --- a/init-mongo.js +++ b/init-mongo.js @@ -1,6 +1,8 @@ +// This script initializes the AcademicTeamManagementDB database in MongoDB. + db = db.getSiblingDB("AcademicTeamManagementDB"); -db.createUser( - { +db.createUser( // Creates a user with readWrite permissions for secure access to the database. + { user: "root", pwd : "pass", roles: [