ToDo_List

Our goal is to create an intelligent and user-friendly task manager that integrates scheduling, task prioritization, and accessibility features. The app will help you stay organized with the following things implemented:

• To-do lists and being able to add and edit tasks in a list
• A calendar with a monthly, weekly, and daily spread where the added tasks will show up
• The ability to import an existing Google Calendar

Project Structure

The repo contains both frontend and backend:

• /frontend: React frontend app
• /backend: Node.js backend API (Express, MongoDB)
• .env: Located inside /backend directory for local dev

Scripts

• npm run dev Runs the development environment. This command is directory-specific (frontend or backend).
• npm run frontend Runs the development environment for the frontend in the root directory
• npm run backend Runs the development environment for the backend in the root directory
• npm run lint Runs npx eslint . and npx prettier --check . for style consistency
• npm run coverage Runs the testing environment with coverage report
• npm run cypress:open Interactive Mode (for development & debugging)
• npm run cypress:run Headless Mode (for CI/CD or quick test runs)
• npm test Runs the jest testing environment (npx jest .)

Setup for Local Development Environment

1. Clone the entire git repository
2. Run npm install in the root directory to get all the dependencies
3. Set up environment variables by creating the .env file in the backend folder

// ./backend/.env file example
MONGO_URI=your_mongo_uri_here
userDB=your_user_db_uri_here
tasksDB=your_tasks_db_uri_here
TOKEN_SECRET_KEY=your_token_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_REDIRECT_URI=http://localhost:8000/api/google-calendar/callback
SESSION_SECRET=your_session_secret

4. Setup .gitignore with the following entries in the root folder

//./.gitignore
node_modules/
.env
.env.*

5. VSCode Extensions (Recommended)
   • ESLint
   • Prettier ESLint
   • GituHb Actions (for workflow visualization, optional)

Acceptance Testing

Acceptance Testing

Coverage Report

Backend Coverage:

Frontend Coverage:

Documentation

Team Working Assignment Document

Sprint Board Document

User Stories Document

Figma Prototype

UML Class Diagram

UML Activity Diagram

Use Case Diagram

User Personas

Design Specification

Style

• We are using React/JavaScript. So we chose to install Prettier and added that to ESLint, to keep our code style consistent throughout our project.

• can look at split screen by adding /SplitScreen to the end of the link