GitHub - OngMinXian/NUSPlanner: A web application to help students plan their schedules. Created in Orbital 22.

Summary :star2:

A web application integrated with NUSMODs that helps students to optimise their time in the areas of work, academics and extracurricular activities.

Proposed level of achievement 📊

Artemis

Collaborators 🎏

Team Details 🎐

Team ID: 5008
Advisor: Koh Vinleon

Link to deployed application 🚀

🔗 Link to deployed application

🚨 Important note to evaluators

You can use the following accounts to test our web application as they come with randomly generated data. You are free to create your own account as well. If you would like to create an account with randomly generated data, input tester into the username field when creating an account.

Evaluator	Designated Email	Password
LWXSS	test101@test.com	123Test456!
MetaNDroids	test102@test.com	123Test456!
Bit by Bit	test103@test.com	123Test456!
Vinleon	test104@test.com	123Test456!
Varun	test105@test.com	123Test456!

Links to project materials 🔍

🔗 Project Log

Milestone 3:
🔗 Project Poster
🔗 Project Video
🔗 Video of features added in MS3
🔗 Regression Testing documentation

Milestone 2:
🔗 Project Poster
🔗 Project Video
🔗 Testing Documentation

Milestone 1:
🔗 Video demo of Web App
🔗 Project Poster
🔗 Project Video
🔗 Figma Prototype
🔗 Figma Video

Project description 📝

NUSPlanner is a productivity-centric web application that utilises statistics and visual summaries to give users a clear view of their time-management in three areas: work, academics and extracurricular activities. This empowers users to manage their priorities effectively so that they can acquire the relevant skills to boost their employability and differentiate themselves from their peers.

Adhering to its core focus of catering to student demographics, NUSPlanner is integrated with NUSMODS, a popular module planning website for students, so that students can also track their modular progress. This ensures that users of NUSPlanner remain focused on their goals and stay ahead of the game at all times.

Motivation 🔥

Contrary to popular belief, education is no longer the ticket to employment in Singapore.

According to a report by professional networking platform LinkedIn,

39% of companies in Singapore look for employees with technical skills

which is nearly 2 times higher than companies who value traditional qualifications such as education and working experience¹.

If acquiring an arsenal of technical skills like programming and design are not enough to cause headaches for an undergraduate looking to secure his first job, being part of an ever-growing population of university graduates certainly would.

As of 2020, being ONE in the 33% of Singaporean degree holders² translates to being ONE in 1.9 million, or more conveniently, 0.0000526% of Singaporeans coveting employment. The oversaturation of skilled workers in the local job industry can cause the job search for an undergraduate to turn aggressive, or even abusive very quickly as they compete relentlessly with many hopefuls to land their first job.

With this problem in mind, we hope to design a user-friendly application that will help undergraduates remain cognisant of both their working portfolio and academic progress early on in their university journey. This way, much despair and anxiety can be averted, as one can do the necessary homework and preparation needed to land his dream job

User stories 📄

[Epic] As a student, I want to be able to track my progress in NUS, be it academically, work-related or extracurricular, so that I can optimise how I spend my time ⏰

As a student, I can view the proportion of time that I spend across all categories of events that I log into my calendar
As a student, I can store and view important details for events that matter to my portfolio
As a student, I can create an academic plan for future semesters and view my degree progress

As a student, I want to be more conscious of my physical and emotional health so that I can improve my wellbeing 🍃

Conditions
- Provide a range of stress levels (eg. very stressed, stressed etc.) for users to select their stress level for the day
- Provide a range of acitivities (eg. studying, exercising) that users can associate with their stress level for the day
- Create a sleep tracking system where users can indicate their sleep quality and the number of hours that they have rested for the day

As a student, I want a customisable planning system that is tailored to all aspects of my life so that I can stay organised with ease :card_index_dividers:

Conditions
- Design custom user tags for users to add and track different categories of activities
- Users can input their modules taken and their grades for each module
- Users can view descriptive summaries generated for all categories of events that they log into the calendar

Tech stacks involved 🔌

Tech	Purpose	Reasons behind choice
HTML	To structure the layout of the web page and its components	1. Required to create a website
CSS	To align and style the components in the web page	1. Consistent design 2. Compatible across different screen sizes
Javascript	To enable interactivity for the web page	1. Easy to learn 2. Simple to use
ReactJS	For web page design and interactivity	1. Free 2. Easy to learn
Firebase	Database to store user information and in-application data	1. Simple to use 2. Free
NUSMODs API	To collect all information pertaining to modules offered in NUS	1. NUSMODs contains all the information on every module and is free for access upon request

Installation and Set-Up 🛠️

Install react-js from create-react-app
Clone from GitHub repository: https://github.com/OngMinXian/NUSPlanner
Navigate to the src folder and install the following dependencies

npm i react-router-dom
npm install react-bootstrap bootstrap@5 
npm install --save react-big-calendar --legacy-peer-deps
npm i react-datepicker
npm i react-datetime-picker
npm i date-fns
npm i styled-components
npm i react-icons
npm i react-select
npm i react-chartjs-2 chart.js 
npm i react-circular-progressbar
npm i react-heatmap-grid

❗ IMPORTANT:

Previous command to install bootstrap (styling did not work) is: npm install react-bootstrap bootstrap@4.6.0
bootstrap version must be compatible with react bootstrap version in order for styling to work properly. Visit this link for troubleshooting if such an issue is encountered

Within the src folder, install the dependencies for the Firestore database:

npm i firebase

Create the .env.local file containing the Firebase API keys

This file should be created on the same level as the src folder
Email Shanice at e0774411@u.nus.edu for details on the Firebase API keys

Checkstyle with ESLint 🧹

❗ IMPORTANT:

If you are unable to suppress the checkstyle errors from appearing as compilation warnings, it is best to complete all your changes before downloading ESLint and running checkstyle
To prevent your checkstyle errors from appearing as compilation warnings, one fix could be navigating to the src folder and running:

npx eslint components //Checks through all files in the components directory 
npx eslint components --fix //Rectifies style errors identified from checkstyle

each time after changes are made to the file and the file is saved

Navigate to the NUSPlanner folder and install ESLint

npm install eslint 
npm install eslint-plugin-unused-imports //Enables ESLint to automatically remove unused imports

Generate the ESLint configuration file

npx eslint --init

Choose the following options in the subsequent config steps

How would you like to use ESLint? To check syntax and find problems
What type of modules does your project use? Javscript modules (import/export)
Which framework does your project use? React
Does your project use TypeScript? No
Where does your code run? Browser
What format do you want your config file to be in? JSON
Would you like to install (the dependencies required) now? Yes
Which package manager do you want to use? npm

Navigate to eslintrc.json and paste the following code

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/recommended", "standard"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "unused-imports"],
  "rules": {
    "react/react-in-jsx-scope": "off",
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "unused-imports/no-unused-imports": "warn",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_"
      }
    ]
  }
}

To run ESLint on all code files, execute the following commands

cd src
npx eslint components //Checks through all files in the components directory 
npx eslint components --fix //Rectifies style errors identified from checkstyle

Deployment to Firebase 🌏

❗ IMPORTANT:

DO NOT deploy files with an active ESLint config as the checkstyle errors could be raised as compilation errors when you compile the app into a build folder
If the above issue is encountered, paste all checkstyled files into a separate repository without an active ESLint config, then try deploying the application again

Within the nusplanner folder, navigate to the command line and run:

sudo npm install -g firebase-tools 
npm run build 
firebase init

Select the option to configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
Choose these options for the subsequent config options:

Please select an option: Use an existing project
Select a default Firebase project for this directory: auth-development-71ec2 (NUSPlanner)
What do you want to use as your public directory? build
Configure as a single-page app (rewrite all urls to /index.html)? Yes
Set up automatic builds and deploys with GitHub? No
File build/index.html already exists. Overwrite? No

Follow up by running

firebase deploy

Proposed system architecture 🏷️

Feature list 🖥️

Keys used to prioritise requirements 🔑

[High] High priority
[Medium] Medium priority
[Low] Low priority

1. Login and authentication system 🔒

Login page [High]
Sign-up page [High]
Forget password page [High]

2. Today page 📍 - Landing page upon login

Stress tracking system [High] 🍃
- Stress level for the day
- Activities associated with the stress level for the day
Sleep tracking system [High] 🛌
- Quality of sleep
- Number of hours of sleep
Checklist for tasks (defined as events that start and end on that day itself) [High] 📋
- Add task
  - Provide option to display task in progress report
- Complete task
- Display tasks in chronological order
Display for calendar events that fall on that day itself [High] 📅
- Add event
  - Provide option to display event in progress report
- Mark event as complete for the day
- Display events in chronological order
- Create custom tags - Refer to Create custom tags category under the next section for more details
- Delete custom tags

3. Calendar page 📆

Add Events [High] ➕
- Event title
- Start date and time
- End date and time
- Event tag
- Extra input fields -- when the work/extracurriculars tag is selected
  - Organisation name
  - Description of user's role
- Event description
- Option to display new event in progress report -- when the work, extracurriculars or academics tag is selected
View Task/Event Details [High] 👓
- Fields that can be edited
  - Title
  - Description
  - Organisation Name -- for tasks/events with the work/extracurriculars tag
  - Role in Organisation -- for tasks/events with the work/extracurriculars tag
  - Task/Event done
  - Add task/event to Progress Report -- for tasks/events with the work/extracurriculars/academics tag
- Fields that cannot be edited
  - Event Tag
Edit Tasks/Events [High] 🖋️
- Drag and drop tasks/events across timeslots/days
- Resize tasks/events to span across different timeslots/days
- Delete tasks/events
Create custom tags [High] 🏷️
- Tag label
- Tag colour
Delete custom tags [High] 🗑️

4. Dashboard page 📈

Academics Segment [High] 💯
- Breakdown of CAP by semester and changes in CAP from semester to semester, to be expressed in a multitype chart
- Average CAP for each of the top 5 most commonly occurring module codes (based on module codes input by the user), to be expressed in a radar chart
Stress Management Segment [High] 🍃
- Pie chart showing the frequency that each stress level is selected by the user (across all 5 stress levels)
- Rank the activities most commonly associated with a particular stress level in descending order
- The data displayed in the 2 features above can be aggregated based on one of the following time spans chosen by the user:
  - Past week
  - Past month
  - Past 6 months
  - Past year
  - All time
Productivity Segment [High] 💡
- Progress bar displaying the degree of completion (in %) across all 4 default categories for the present day. These categories are:
  - Work
  - CCA
  - Academics
  - Others
- Stacked bar plot displaying the percentage breakdown of activities across the Work, CCA and Academics categories
- The data displayed in the stacked bar plot can be aggregated based on one of the following time spans chosen by the user:
  - Past week
  - Past 6 months
  - Past year
Sleep Quality Segment [High] 🛌
- Heatmap displaying the frequency that each sleep quality option (categorical) is being selected by the user
- Line chart displaying the trend in the number of hours that the user sleeps
- The data displayed in the 2 features above can be aggregated based on one of the following time spans chosen by the user:
  - Past week
  - Past month
  - Past year

5. Progress Report page 🗂️

View and edit a custom resume that has been generated based on user input [High] 📄
- Contact Details Section 📲
  - Users can add links to their LinkedIn account and personal website
- Education Section 🏫
  - Display users' education data eg. Overall CAP, faculty and course information
- Write-up Section 🖋️
  - Users can add a description of their skillsets and positive attributes
  - Display users' work experience, educational and extracurricular achievements based on past events that they have logged in the calendar (ordered by start and end date)

6. Modules page 📑 - Advanced Artemis feature

Search modules by module code [High] 🔍
Filter modules by multiple criteria [High] 🔦
- Semester offered
- Has exam
- Number of modular credits (MCs)
- Has S/U options
Telegram link to group chat for module [Low] 💬

7. Profile page 👤

Course details segment [High] 📖
- Modules taken
- Verify module code using link to NUSMODs API [Medium]
- Corresponding grades for modules taken
- Semester that the modules were taken
- Second major/minor/degree (if applicable) [Low]
- Add semester
- Remove semester
Account settings segment [High] ⚙️
- Profile picture (default profile picture is set if no pictures are specified)
- Username
- Email
- Faculty
- Course
- Matriculation year
- Year of graduation

Use Cases

Use Case: UC1 - Creating events

- System: NUSPlanner
- Actor: User 
- Precondition: User is logged in 
- Guarantees: 
  - Event will be logged only if: 
    - The event title is specified
    - The event start date and time + event end date and time are specified
    - The event start date and time < the event end date and time
    - The user selects an tag associated with the event 
  - Extra details for the work and extracurriculars tags will be logged only if they are specified by the user 

- MSS: 
  1. User chooses to add a new event
  2. NUSPlanner opens a pop-up tab that requests for the event details
  3. User enters the required details
  4. User confirms 
  5. User input is submitted and stored in the Firestore database 
  6. Event is displayed in the Calendar upon closing the pop up tab
  Use case ends

- Extensions 
  3a. User selects the work/extracurriculars tag 
    3a1. Additional text fields are triggered in the same pop-up tab, prompting the user to specify the:
      - Organisation name 
      - Role in organisation
   3a2. User fills in the required details
   Use case resumes from step 4
 
  3b. User violates any one of the four pre-requisites for logging an event
    *b1. NUSPlanner detects the error and requests for the correct data
    *b2. Event details are not submitted and stored in the Firestore database 
    *b3. Steps b1-b2 are repeated until the data entered is correct
    Use case resumes from step 4

Use Case: UC2 - Editing account settings

- System: NUSPlanner
- Actor: User 
- Precondition: User is logged in 

- MSS: 
  1. User enters the required details 
  2. User confirms 
  3. User input is submitted and stored in the Firestore database 
  4. Page refreshes and updated details are displayed as placeholders in the input fields 
  Use case ends

- Extensions 
  1a. NUSPlanner detects an error in the entered data.
    *a1. NUSPlanner requests for the correct data.
    *a2. User enters new data.
    *Steps a1-a2 are repeated until the data entered is correct.
  Use case resumes from step 2

Use Case: UC3 - Editing course details

- System: NUSPlanner
- Actor: User 
- Precondition: User is logged in 

- MSS: 
  1. User selects the year and semester that he wants to input/edit modules for 
  2. User enters the module name and grade attained for that module 
  3. User confirms his changes
  4. User input is submitted and stored in the Firestore database 
  5. Page refreshes and updated details are being displayed in a tabular format
  Use case ends
  
- Extensions 
  1a. User adds/removes a semester

Proposed system workflow 🌊

Timeline and Executables ⏰

1️⃣ Before: Evaluation Milestone 1 (30 May 2022)

Planning Stage:

UI Design using Figma
Design diagrams
Set up Firebase backend and plan data storage

Set up Stage:

2️⃣ Before: Evaluation Milestone 2 (27 Jun 2022)

3️⃣ Before: Evaluation Milestone 3 (25 Jul 2022)

Before: Splashdown (22 Aug 2022) 🏁

Create project poster and video
Publish web application online
Test web application and fix bugs
If there is enough time, the feature below will be implemented:
- Incorporate Telegram link to modules in the Module page
  - Parse TeleNUS to include a link to the telegram channel within the module’s information page

Progress in Milestone 1 🚩 1️⃣

Summary of tasks completed ✅

Please refer to the tasks listed under the Timeline and Executables section above for more details on the tasks completed
As we are constantly revising the existing features of our web application, some of the tasks listed here may not be in the Timeline and Executables section, which contains our most updated set of features to date.
All the deliverables required for Milestone 1 are completed, along with a few deliverables for Milestone 2

Task Name	Details	Link (if applicable)
Figma Prototype 💡	1. Drafted out the design elements of all pages in the web application 2. Transitions and animations added for all relevant features	Link to Figma prototype Link to Figma demo video
Login and Authentication system 🔒	1. The login, sign-up and forget password features have been completed 2. For the forget password feature, an email will be sent to the user, prompting him to reset his password 3. Firebase provides the authentication database that allows us to store users' UID, email and passwords. 4. A “Users” collection in the Firestore database has been created to store user objects	Not applicable
Today page 📍	1. Today page displays the tasks users have assigned for themselves for the day 2. Users can create tasks and delete tasks 3. Tasks created by the user are sorted in chronological order. 4. Tasks created by the user are stored in the “Tasks” collection on the Firestore database.	Not applicable
Calendar page 📆	1. Calendar page displays a calendar that is equipped with the following functionalities: adding, removing, resizing, and dragging and dropping events 2. Users add an event by assigning a title, start date + time and end date + time to the event 3. Events created by the user are stored in the “Events” collection on the Firestore database.	Not applicable
Profile Page 👤	1. Profile page is linked to Firebase and reflects any edits that a user maks to his profile 2. Upon creating an account, a new “user” object is created into the “Users” collection in Firebase. Some fields are left as “-” by default before the user edits the profile. 3. Users can upload a profile picture from their computer onto the website. This picture is stored in the storage database. 4. If no profile picture has been uploaded by the user, a default profile picture which has been stored in the storage database will be displayed	Not applicable

Software Engineering Practices ⚙️

Approach to software design 💻

We adopted a bottom-up approach towards multi-level design in Milestone 1.

As novices in software engineering, producing code for the layout and design of the web application was our first priority as it would allow us to produce a user interface, as well as to hone our understanding of HTML, CSS and ReactJS.

We then proceeded to develop more technical features that involved routing, hooks and interactivity after we gained proficiency in styling our web page. During this rudimentary stage, we directed our focus to develop the basic functionalities required for each web page before adding in any interactive features that would be triggered by user input (eg. Coding out the calendar layout properly in the Calendar Page before implementing the drag and drop functionality). This bottom-up approach helped us to understand the limitations of our code and the packages that we chose to use, enabling us to make well-informed decisions about the features that we wished to implement.

Finally, we integrated the users' account information and in-application data to Firebase. This step was crucial in binding our the frontend and backend of our web application together, enabling us to produce a viable end product. We strongly feel that the bottom-up approach helped us to develop the fundamental aspects of our web application effectively, thus we will continue to use this approach for future milestones.

Project management and planning 🗒️

Approximately 12 man days, the equivalent of 96 hours, was channelled towards the coding of our web application in Milestone 1, with the breakdown of tasks by duration (in days) as follows:

A significantly larger proportion of time was allocated towards learning the tech stacks required, coding the required functionalities, as well as reading and writing data from our web application to Firestore.

We decided to place greater emphasis on these areas in order to deepen our understanding of the tech stacks and to set-up our web application adequately for more advanced functionalities in the future.

While coding, we frequently compiled our code and tested it on the deployment server. Code was uploaded to GitHub only after multiple tests were run to prevent errors. Branching was also used to implement new features and pull requests were initiated each time a merge was executed.

On top of merging and checking for prospective loopholes in our code, we added succinct commit messages on GitHub wherever possible to track changes made to the code and to ensure the consistency of our code at all times.

Technical difficulties encountered 🧰

Nature of Issue	Reference on GitHub	Solved/Open	Follow-up
Standardising layout of web page components across all screen sizes	Issue 3	Solved	Consulted student advisor Solved by formatting page using react-bootstrap and flexbox instead of pure CSS
Challenges deploying web application on Firebase and GitHub	Issue 4	Solved	Re-styled web application and re-deployed in MS2, to greater success. However, deployed application is not integrated with Firestore backend successfully. Managed to resolve this issue in MS2, refer to Technical Difficulties under Milestone 2 section for more details
Challenges formatting layout for elements on top of background image for the login page	Issue 5	Solved	Solved by following instructions given by our student advisor

Direction for Milestone 2 ➡️

We will act on our student advisor's comments of deploying the application and work towards including detailed evidence of good software engineering in our Project README. Additionally, we will update our mentor on our progress for Milestone 1 and request for feedback.

For the technical aspect, we hope to accomplish all the deliverables we have planned under the Timeline and Executables section for Milestone 2 and to resolve all existing technical difficulties.

If time permits, we will also gear our application towards integrated user testing using Mocha or other frameworks.

Progress in Milestone 2 🚩 2️⃣

Summary of tasks completed ✅

Please refer to the tasks listed under the Timeline and Executables section above for more details on the tasks completed
As we are constantly revising the existing features of our web application, some of the tasks listed here may not be in the Timeline and Executables section, which contains our most updated set of features to date
All the deliverables required for Milestone 2 are completed, along with a few deliverables for Milestone 3

Task Name	Details	Link (if applicable)
Login and authentication system 🔒	1. Styled to achieve a cleaner and more modern look 2. Added more specific error messages for input fields	Not applicable
Navigation bar :flashlight:	1. Styled to achieve a cleaner and more modern look	Not applicable
Today page 📍	1. Divided tasks into 2 categories: tasks and events a. Tasks are activities that occur within the day itself only b. Events are activities that span multiple days 2. Users can create and delete tasks and events 3. Users can create and delete custom tags 4. Tasks and Events are stored in the “events” field in the “Users” collection. The code checks whether they are tasks or events upon retrieval. 5. Users can log in the amount of sleep and quality of sleep the previous night and data is stored in the “sleep” field in the “Users” collection. 6. Users can log in their stress level for the day and data is stored in the “stress” field in the “Users” collection. 7. Input fields for the stress and sleep system clears after the user has submitted his response for the day.	Not applicable
Calendar page 📆	1. Created a tag system (shared with Today page) that allows users to create and delete custom tags. Default tags for work, academics and extracurriculars are also available. 2. Upon creating an event, users are prompted to add a description and choose a tag. Selecting the work tag or extracurriculars tag prompts users to key in more specific information about the activity. 3. Clicking on an event on the calendar triggers an off-canvas component which contains the event details and a delete button which removes the selected event 4. Events are stored in the “events” field in the “Users” collection.	Not applicable
Modules page 📑	1. Retrieves all modules’ data from NUSMods API 2. Implemented live search that displays module information based on the module code entered by the user 3. Added multiple filter options which are: a. Semester that a module is offered b. Whether a module has exams c. Number of modular credits (MCs) that a module has d. Whether a module has S/U options	Not applicable
Profile page 👤	1. Styled to achieve a cleaner and more modern look 2. Split display to 2 tabs: Course Details and Account Settings 3. The functionalities below have been integrated into the course details tab: a. Users can add and remove semesters b. Users can select the semester they want to view and the last clicked semester will be stored in the “lastpage” field in the “Users” collection so that when they return, it is where they last left off c. Users can add, remove or edit module codes and grades (SU and Not taken options are available as well) and it will be stored in “modgradeinfo” field in the “Users” collection 4. The last clicked tab between course details and account settings will be saved similar to last clicked semester in the “profileLastLeftOff” field in the “Users” collection. This ensures that users will remain on the same tab regardless of page reloads or page changes	Not applicable
Dashboard page 📈	1. Displays average stress level in the form of raw percentages. Users can select whether they want their stress level to be aggregated against all exisitng records or against records from the most recent 1-12 months 2. Displays average sleep hours and sleep quality in the form of raw numbers and percentages. Users can select whether they want their sleep hours and sleep quality to be aggregated against all exisitng records or against records from the most recent 1-12 months 3. Displays activity summary in the form of raw numbers and percentages. Users can select which category (tags) they want to compare Note: The raw numbers and percentages displayed currently will be converted to suitable data forms in MS3	Not applicable
Progress Report page 🗂️	1. Calculates user's overall CAP and their CAP for individual semesters. Data is displayed as a floating point number 2. Displays best and poorest faring modules in descending order of grades attained 3. Selecting a category (tags) from the dropdown menu will display all events that have been assigned to that tag Note: The raw numbers and percentages displayed currently will be converted to suitable data forms in MS3	Not applicable

Testing 🧪

The link to our testing documentation in Milestone 2 can be found here.

Software Engineering Practices ⚙️

Approach to software design 💻

Our web application is modelled using the n-tier architectural style and the event-driven architectural style.

The n-tier architectural style was chosen because it is complements our bottom-up approach towards multi-level design. In a bottom-up approach, developing basic functionalities are a top priority because they are the foundation for progressively advanced features in an application. This means that as developers, we are always working on a range of components that, when put together, form a feature in our web application. Therefore, we must reduce dependencies within our code so that new features can be seamlessly integrated within our system and exisitng features can be refined without leading to conflicts.

Using the n-tier architectural style allows us to develop various components of our web application effectively because it involves dividing our application into 3 tiers: the presentation tier, the logic tier and the data tier.

Due to the structually distinct nature of each layer, we can introduce new features to any of the 3 layers without introducing undesirable side-effects to the remaining layers. This not only gives rise to scalability, but code reusability as well, since we can easily abstract out existing ideas and use them to develop related ideas in our web application.

The event-driven architectural style was also used in our web application as we had to stage and trigger a wide range of event sequences based on user-input.

For example, when a user decides to add an event in the Calendar page, he has to key in several input fields. Every character that he adds or deletes from the input fields triggers a state change in the related hook, which in turn causes the object hook containing the new event to be updated. Ensuring that the correct event sequences are triggered based on a unique set of actions by the user is thus central to the success of our web application.

While we do acknowledge that other architectural styles have their own merits, with the peer-to-peer pattern and the client-server architectural style being exceptionally useful in distributed applications, these architectural styles were less applicable to us as our web application is not being developed on an industrial scale.

Project management and planning 🗒️

Approximately 15 man days, the equivalent of 120 hours, was directed towards coding new functionalities, fixing technical issues, testing and deploying our web application in Milestone 2, with the breakdown of tasks by duration (in days) as follows:

After gaining familiarity with the tech stacks in Milestone 1, our main focus in Milestone 2 was to set up as many functionalities as we could in our web application. The process of setting up each page was prolonged because we conducted extensive error checks and had to resolve the technical issues that we discovered.

The quantity of the code produced in Milestone 2 was significantly greater than in Milestone 1, hence there was an urgent need for proper communication and project planning. Apart from updating each other about our progress in coding and the changes that we made to the code files, we updated the technical aspect of our README regularly to ensure that the set-up procedure is up-to-date. We also created issues in our GitHub page for technical difficulties that we struggled to resolve.

Technical difficulties encountered 🧰

Nature of Issue	Reference on GitHub	Solved/Open	Follow-up
Challenges deploying web application on Firebase	Issue 6	Solved	Consulted student advisor Solved by editing out the return statements in our useEffect hooks for the affected pages

Direction for Milestone 3 ➡️

The technical aspect of Milestone 2 was extremely demanding for us as we tried our best to code as many functionalities as possible and made it our priority to check our code extensively for technical problems. As a result, most of our time was channelled towards random testing and fixing the issues that were visible to us.

In Milestone 3, we hope that we can pivot towards more organised forms of testing through conducting unit tests or even system tests. We endeavour to set aside more time for experimenting with different testing frameworks and to familiarise ourselves with the syntax used in software testing packages like chai. At the same time, completing all the deliverables that we have planned under the Timeline and Executables section for Milestone 3 remains equally important to us.

Moving forward, we will seek the advice of our student advisor and mentor, and use their feedback to make meaningful decisions about the future direction of our project.

Progress in Milestone 3 🚩 3️⃣

Summary of tasks completed ✅

Please refer to the tasks listed under the Timeline and Executables section above for more details on the tasks completed
All the deliverables required for Milestone 3 are completed, along with the necessary error checks

Task Name	Details	Link (if applicable)
Today page 📍	1. Changed the styling for the stress and sleep quality tracking systems a. Input fields are no longer displayed in an open alert, but triggered in a pop-up when the respective buttons for stress and sleep tracking are clicked b. Stress levels are no longer selected by clicking a button, but by selecting a radio input field. 2. Added extra options to the stress tracking system a. Users can select the activities associated with their current stress level by ticking multiple checkboxes that correspond to 6 different activities b. All inputs from the stress tracking system are utilised in the Stress Management segment of the Dashboard page, where users can view the activities most likely to trigger a certain stress level of theirs. 3. Fixed technical issue where tasks added in the checklist will not be stored properly in the database 4. Fixed technical issue where events added will not be stored properly in the database and linked properly to the Calendar page 5. Re-styled the entire page and removed redundant code wherever necessary	Not applicable
Calendar page 📆	1. Restyled the modal associated with the "Add Event" functionality for greater clarity a. Selecting the Work or Extracurriculars special tag no longer triggers a modal with extra input fields, but causes more input fields to appear within the existing modal b. The organisation description input field has been removed, thus only the organisation name and organisation role input fields will appear in the current modal c. Users now key descriptions directly into the description field for all events 2. Fixed styling issues with the DateTimePicker in the "Add Event" modal which causes inputs to overflow to the next line 3. Resolved issues with the database which causes duplicate events to be added to the calendar 4. Edited the contents of the OffCanvas component (triggered by clicking on a calendar event) a. Removed the organisation description input field b. Users can now edit task/event information directly in this component 5. Restructured the Firestore database to reflect the changes in the data stored	Not applicable
Dashboard page 📈	1. Implemented the Academics segment 💯 a. Users' cumulative point average (CAP) and the changes in their CAP are represented in a multitype chart b. Users can view the average CAP of their top 5 most commonly occurring modules in a radar chart 2. Implemented the Stress Management segment 🍃 a. Users can view the frequency that each stress level occurs through a pie chart b. Users can view the ranking of the activities most likely to trigger a certain stress level by hovering over the emoji buttons c. All visualisations in this segment support 5 different views (past week, past month, past 6 months, past year and all time 3. Implemented the Productivity segment 💡 a. Users can view their progress of the day's tasks through a progress bar for the 4 main categories: Work, CCA, Academics, Others b. A stacked bar plot gives users a breakdown of the time that they spend across the Work, CCA and Academics categories c. The stacked bar plot supports 3 different views (past week, past month and past year) 4. Implemented the Sleep Quality segment 🛌 a. Users can view the frequency that each sleep quality rating (categorical variable) occurs using a heatmap b. The trend in users' sleep duration is represented through a line graph c. All visualisations in this segment support 3 different views (past week, past month, past year) 4. Manipulated and read user input from the database to transform data into the format required for the data visualisations	Not applicable
Progress Report page 🗂️	1. Implemented the contact details, education details and write-up sections a. Users can view their relevant user data eg. Name, course details, CAP etc. as part of the resume generated b. Users can also add links to their LinkedIn account, website and a description of their positive attributes c. All user input will be saved in the Firestore database d. Information displayed under the Experience, Education and Extracurriculars section of the write-up originate from tasks/events that users have chosen to log in the Progress Report upon task/event creation	Not applicable
Additional Features 🪜	1. Added custom error and success messages to all pages of the web application a. Included error checks to prevent form submission whenever input given by the user is invalid eg. User provides numbers as part of his faculty name, Science123 instead of Science b. Error messages are more specific to assist the user in troubleshooting eg. User will be notified that the event start time should come before the event end time when he has not specified the event start time correctly, rather than a generic error message that his inputs were invalid	Not applicable

Software Engineering Practices ⚙️

Database Diagram 🎞️

In Milestone 3, we have finalised our database diagram. Due to how Firebase works, we have decided to store only one class which is the Users class. This allows the query to search for the correct user ID and retrieve all the user's information. This is faster compared to having many classes such as events and modules where each query would look through the entire relevant database to find which one matches the user ID. The diagram below shows how data is being written to and retrieved from the database for each page through a series of functions.

Quality Assurance 🚦

In Milestone 3, we directed our efforts towards implementing system testing, regression testing and user testing.

Despite having attempted to implement automated testing in Milestone 2 with the aid of Mocha, Chai and Enzyme, we ultimately decided to go with a non-automated approach. One important reason is because our system is heavily reliant on user gestures to generate specific outcomes, and these gestures cannot be replicated using a testing framework.

For example, when a user resizes a calendar event or chooses to move it across diffferent timeslots in the Calendar page, he would have to perform a set of precise actions with his mouse. Simulating these gestures using a UI testing framework would not be feasible, and is further complicated by the need to check whether the shifted event has retained its associated properties, such as its title.

Furthermore, there are many elements to each component in our web application, contributing to the mounting challenges of checking the UI of each component.

This is evident in the Today page, where creating an event that falls on the present day will cause an dropdown tab to appear in the events section. In this scenario, it would be insufficient to merely test whether a dropdown tab has appeared after the event has been added. The tests run should extend towards checking the visual effect of adding one event to other exisiting events, as well as opening the dropdown tab to check whether all event details have been stated correctly. Given the vast quantities of visual elements that we have to look out for, non-automated testing would be a more accurate and efficient alternative to unit or integrated testing.

Therefore, non-automated testing was used as it will help us to create a more polished end product within an optimal period of time.

Evidence of regression testing ↩️

We run a fixed set of test cases on our web application after changes are being made. This ensures that all our components are mounted properly and that no unwanted side effects are introduced as a result of our edits. To view the documentation of our test cases, please click here.

Evidence of system testing 🔬

Usability Testing 👣

Please refer to the section titled Evidence of user testing below

Compatibility Testing 🔐

Our web application is being developed on the macOS and Windows operating systems. The appearance and functionality of our web application remains optimal on both operating systems.

Performance Testing 👟

We have conducted performance tests as part of our load tests (see Load Testing section below). Our application reponds quickly even when large volumes of data are being processed. This is applicable for the Dashboard page too, as users can switch between different time spans without significant lags or disruptions to the data visualisations.

Security Testing 🚔

We have created private routing in our web application, hence users can access pages beyond the login, forget password or signup pages only when they have successfully logged in. Modifying the website link to access the pages within the web application will cause users to be redirected to the login page.

Additionally, the risk of existing accounts being hacked is minimised as new accounts cannot be created under emails that are currently registered under existing accounts.

Load Testing ⚖️

Our dashboard page and progress report page require a substantial amount of data to be logged by the user before they can become fully functional. This is especially so for the dashboard page which supports a yearly view for certain segments that are being analysed.

Given how our web application is only developed in 2022, it would not be possible for us to access user data from 2021 that has been organically generated. Thus we have used a pre-loaded document with large quantities of data synced to our Firestore database as a substitute. Users can access this data by creating a new account under the name "tester". Wherever possible, the data in this document is generated randomly, giving user-custom views for: events/tasks, modules, as well as sleep and stress data.

By creating accounts that are linked to this pre-loaded data, we can effectively simulate the process of accessing a range of user-generated data during testing. This allows us to gain a heightened awareness of how the visual components of our web application respond to a wide spectrum of data, so our user interface can be modified to accommodate different quantities and values of data.

On top of refining our UI, we have also used the large quantities of data to test the efficiency of our web application when it has to process heavy loads. In total, we have generated 1170 data entries, with the breakdown of data entries by category as follows:

Category	Code	Lines of Data Generated
Tasks		5 today + 100 past + 100 future = 205
Events		5 today + 100 past + 100 future = 205
Stress and Sleep Data		365 * 2 = 730, 365 each for one category Data follows a normal distribution for greater accuracy as it would be unrealistic to choose a number from 0 to 24 with every number having equal weighting for sleep hours.
Module code and grade		30

Evidence of user testing 👥

Since the target audience of our web application is NUS students, we have decided to only include NUS students in our user testing group. We approached students across different faculties and year of study. We asked users to first test the web application freely. Afterwards, we provided users with a test account that has randomly generated data in order to allow users to use some of the features that requires data to be collected across long periods of time. Feedback was collected in the table below.

No.	Year	Course	Feedback	Actionables
1	1	Computer Science	You can add events that have start date after end date.	Added error message when this occurs. Also added error messages for when any of the other require inputs are empty. Also added alert messages when actions are completed succesfully.
2	1	Business Analytics	Unable to edit events on the calendar. I need to resort to deleting and then adding a new event in order to edit an existing event	Added feature to edit events directly from the calendar. Also moved event details from bottom of the screen to right of the screen for better viewing.
3	1	Life Science	Existing events are duplicated at times when events are added	Bug fixed.
4	2	Life Science	Error message for empty tag name does not disappear after closing the pop-up	Bug fixed.
5	2	Business	Can consider having an option to choose which events to add to the progress report as having everything displayed by default is very messy.	Gave users option to include event/task into progress report in the creating event/task popup. Also allowed users to edit this option in the view event details feature of the calendar.
6	2	Business	When you click task done and select cancel, the checkbox remains ticked.	Bug fixed.
7	2	Economics	Add to Progress Report feature should not be restricted to events, and should include tasks	Reconsidered and added tasks to progress report to not limit user's flexibility in using the web application.
8	3	Biomedical Engineering	Graph changes very slowly for dashboard. Very laggy and seemingly unresponsive.	Bug fixed by changing animation time for graphs.
9	3	Chemical Engineering	Does not support languages other than English.	Unfortunately due to time constraints, we are not looking into this as we assume that most users of our web application are proficient in English
10	3	Law	Profile picture shows error image before loading.	Bug fixed.
11	3	Law	Clicking the save changes button in the Course Details section without making any changes deletes every module.	Bug fixed.
12	4	Law	Overall CAP displays NaN when there are no modules logged.	Bug fixed by replacing NaN with 0.
13	4	Social Science	Tester account already has sleep and stress logged for the day upon creation.	Bug fixed.

Project management and planning 🗒️

Approximately 13 man days, the equivalent of 104 hours, was dedicated to completing our web application, enhancing the performance of existing functionalities and rectifying technical issues, with the breakdown of tasks by duration (in days) as follows:

Figuring out a coherent direction for the Dashboard page and Progress report page was our greatest challenge in Milestone 3 as we had long grappled with the task of deriving actionable insights from the user data collected. Fortunately we managed to gain inspiration and produced the code and design for these pages in a much shorter period of time than we had initially anticipated.

Our rapid progress through the Dashboard and Progress Report pages gave us the allowance to improve the performance and usability of our web application. In the days that followed, we tested the web application extensively on a regular basis, adding validation checks which would prevent erroneous user inputs from being registered in our Firebase backend. We also added custom error and success messages for greater clarity and ease of troubleshooting.

Apart from conducting system tests on our end, we invited many students from diverse backgrounds to test our web application and enhanced our functionalities based on their feedback. The greater degree of interaction that we had with our target audience, existing NUS students, was crucial to helping us build a modern and reponsive system that is relevant to their lives.

Technical difficulties encountered 🧰

No significant technical difficulties were encountered in Milestone 3. However, we did consult our student advisor on the relevance of unit/integrated tests for our web application

Direction for Splashdown ➡️

Unlike Milestone 1 and Milestone 2 which were very technically rigorous, Milestone 3 was a test of our endurance and work ethic as we had to stay focused on refining the existing features of our web application, even after we had deemed it as complete.

On multiple occasions, our perspective of our work was cast in uncertainty as we discovered many technical issues and areas for improvement during testing. While these were moments of frustration, they were also humbling as we learned to evaluate our work with a more critical mindset and to remain consistent in realising loftier goals for our project.

As Milestone 3 draws to close, we will take the feedback received into serious consideration and make the necessary improvements so that we can present a well-rounded product that is representative of our commitment to this project.

Name		Name	Last commit message	Last commit date
Latest commit History 447 Commits
nusplanner		nusplanner
.DS_Store		.DS_Store
Orbital Final Poster.png		Orbital Final Poster.png
Orbital Poster.png		Orbital Poster.png
README.md		README.md

OngMinXian/NUSPlanner

Folders and files

Latest commit

History

Repository files navigation

Summary :star2:

Proposed level of achievement 📊

Collaborators 🎏

Team Details 🎐

Link to deployed application 🚀

🚨 Important note to evaluators

Links to project materials 🔍

Project description 📝

Motivation 🔥

User stories 📄

Tech stacks involved 🔌

Installation and Set-Up 🛠️

Checkstyle with ESLint 🧹

Deployment to Firebase 🌏

Proposed system architecture 🏷️

Feature list 🖥️

Keys used to prioritise requirements 🔑

1. Login and authentication system 🔒

Login page [High]

Sign-up page [High]

Forget password page [High]

2. Today page 📍 - Landing page upon login

Stress tracking system [High] 🍃

Sleep tracking system [High] 🛌

Checklist for tasks (defined as events that start and end on that day itself) [High] 📋

Display for calendar events that fall on that day itself [High] 📅

3. Calendar page 📆

Add Events [High] ➕

View Task/Event Details [High] 👓

Edit Tasks/Events [High] 🖋️

Create custom tags [High] 🏷️

Delete custom tags [High] 🗑️

4. Dashboard page 📈

Academics Segment [High] 💯

Stress Management Segment [High] 🍃

Productivity Segment [High] 💡

Sleep Quality Segment [High] 🛌

5. Progress Report page 🗂️

View and edit a custom resume that has been generated based on user input [High] 📄

6. Modules page 📑 - Advanced Artemis feature

Search modules by module code [High] 🔍

Filter modules by multiple criteria [High] 🔦

Telegram link to group chat for module [Low] 💬

7. Profile page 👤

Course details segment [High] 📖

Account settings segment [High] ⚙️

Use Cases

Use Case: UC1 - Creating events

Use Case: UC2 - Editing account settings

Use Case: UC3 - Editing course details

Proposed system workflow 🌊

Timeline and Executables ⏰

1️⃣ Before: Evaluation Milestone 1 (30 May 2022)

Planning Stage:

Set up Stage:

2️⃣ Before: Evaluation Milestone 2 (27 Jun 2022)

3️⃣ Before: Evaluation Milestone 3 (25 Jul 2022)

Before: Splashdown (22 Aug 2022) 🏁

Progress in Milestone 1 🚩 1️⃣

Summary of tasks completed ✅

Software Engineering Practices ⚙️

Approach to software design 💻

Project management and planning 🗒️

Technical difficulties encountered 🧰

Direction for Milestone 2 ➡️

Progress in Milestone 2 🚩 2️⃣

Summary of tasks completed ✅

Testing 🧪

Software Engineering Practices ⚙️

Approach to software design 💻

Project management and planning 🗒️

Technical difficulties encountered 🧰

Direction for Milestone 3 ➡️

Progress in Milestone 3 🚩 3️⃣

Summary of tasks completed ✅

Packages