ListIt

Contributors: Sam Todd, Winton Gee, Hamza Aziz, Haris Khan, Bill Chan

Project Overview

Project Description

ListIt is an intuitive todo list application for students and young professionals. The application has unique features like priority assignment for tasks, color coordination, and grouping settings. ListIt provides users with a form to create new items, a table view of their upcoming tasks, and a weekly view to more easily visualize upcoming deadlines. Unlike notion or the notes app, ListIt is focused around crafting a central user experience that is unique to each user and their respective tasks.

UI Prototype

UI Prototype.

Last updated: 06/06/23

Class Diagram

UML Class Diagram

Last updated: 06/07/23

Code Coverage

   
File
   
Statements
   

   
Branches
   

   
Functions
   

   
Lines
   





	
credential-services.js
	
100%
	
15/15
	
100%
	
0/0
	
100%
	
3/3
	
100%
	
15/15



	
credential.js
	
100%
	
6/6
	
100%
	
0/0
	
100%
	
1/1
	
100%
	
6/6



	
task-services.js
	
100%
	
15/15
	
100%
	
0/0
	
100%
	
3/3
	
100%
	
15/15



	
task.js
	
100%
	
21/21
	
100%
	
0/0
	
100%
	
4/4
	
100%
	
21/21

Last generated: 06/07/2023 at 6:45PM

Development Enviornment Setup

React App Setup

1. Clone the repository using the URL form the green "<>Code" button located at the top right of the page.

2. Inside the backend directory, run the following command to install all required dependencies.

npm install

3. Inside the frontend directory, run the same command from step 2 to install all required dependencies.

4. You can start the frontend or backend by running the following command in the corresponding directory.

npm start

Style Guide

Filenames: lower snake case

Component: upper snake case

Comment Style: double slash (//)

Curly Braces: Curly braces on the same line (K&R style (OTBS))

Alignment: tab

Imports: absolute imports

import java.util.ArrayList //example

Function Naming Convention: lowerCamelCase() String Convention: double quotes (“)

Commands for installing Linter (ESLint):

npm init @eslint/config

Instructions for installing IDE instructons: Followed Canvas instructions for ESLint and then installed VSCode extenion locally.

Linter Setup

Note: You will need to do this twice, for frontend and backend

1. Run this Command to install eslint (Use default options)

npm init @eslint/config

2. Replace the content in the file ".eslintrc.js" with this:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    jest: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": "off",
  },
};

3. Run this command

npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev

4. Add this line in the file "package.json"

"format": "prettier --write './\*_/_.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"

Commands To run eslint:

npx eslint <FileName.txt>

npx eslint <FileName.txt> --fix

Commands To run prettier:

npx prettier <FileName.txt> --check

npx prettier <FileName.txt> --write