ruishanteo / arc

ARC is a one-stop web application designed to meet the academic needs of students.

ARC

ARC is a one-stop web application designed to meet the academic needs of students, providing a convenient platform to manage study plans, calculate grades, and check degree requirements. The platform aims to streamline academic processes, allowing students to focus on other important aspects of university life. It is accessible here: https://arc123.netlify.app.

Scope of Project

ARC is a web application with the following key features:

Grade Calculator

Users can enter their module assessment scores and calculate their overall scores. The calculator will display the scores needed to achieve the desired grade.

Module Planner

Users can plan their modules for multiple semesters, adding and removing modules as needed. The platform will support different degree programs and update the degree requirement tables accordingly.

Forum

ARC will include a forum where students can share their study plans with others, fostering collaboration and providing valuable references for academic planning.

Profile

The profile page in ARC serves as a central hub for users to manage their account information and settings. It provides users with the ability to update their user properties and make changes to their account details.

Feedback Form

The feedback form in ARC allows authenticated users to submit feedback, bug reports, or issues by clicking a button located at the bottom right of any page, which opens a form for users to type their feedback and submit it.

Testing

The test plan for ARC ensures the quality and reliability of the application through three main types of tests: system testing, integration testing, and unit testing. System tests cover the complete user flow using Puppeteer, while integration tests verify interactions between components with the help of MockProvider and mockStore for isolation. Unit tests use Jest and @testing-library/react for UI and Firebase backend testing, with Jest-Environment-JSDOM providing the simulated DOM environment.

Tools

System Tests: Puppeteer, Local Firebase emulator server, Axios Integration and Unit Tests: Jest, @testing-library/react, jest-environment-jsdom, MockProvider, mockStore, MockFirebase, MockFirestore The test suite covers various scenarios and ensures thorough testing of the core functionalities, combining different testing methodologies for comprehensive coverage and early bug detection.

Getting Started

To run ARC locally on your machine, follow these steps:

1. Clone the repository: [git clone https://github.com/ruishanteo/arc
2. Install the necessary dependencies: yarn install
3. Start the development server: yarn start
4. Open your browser and navigate to http://localhost:3000 to access ARC.

Technologies Used

• React.js: Frontend development framework.
• MUI: Frontend component library.
• Formik, Yup: Form building and input validation.
• Firebase: Database for storing user data.
• Netlify: Deployment of project.

arc's Issues

Changing password to one under 6 characters generates a silent error

When changing password to a new one that is less than 6 characters, a Firebase error is thrown but it is not displayed in the website (no alert is shown).

User reported bugs for planner

Issues:

1. When the total MCs exceed 160, the progress bar will shift to the right rather than remaining filled.
2. After users select their degree and programme and clears the autocomplete, when selecting either category or module, there will be an error due to the filtering function.
3. When users select the same module, they will contribute to the total MCs count.
4. Instruction panel continues to show even after checking the Don't Show Again box.

Fixes:

1. Add condition to keep the value at 100 if the total MCs exceed 160.
2. Add a condition to check if the degree is present first before filtering.
3. Count only unique modules.
4. Set localStorage when checking the box.

User can create account without name

Currently, a new user is able to leave the name field blank when registering a new account.

This leaves their profile.displayName as null which is unwanted and unexpected.

updateProfile still called despite wrong password during reAuth

There is no check for the result of reAuth, causing changeProfile to be called even when a wrong password is entered during confirmation.

Deletion of user still proceeds despite wrong password

User is still deleted even after the wrong password is entered for confirmation.

Users with Google Providers failing reAuth process in profile page

Issues:

1. Currently, accounts created via Google have the same re-authentication process as local accounts (accounts created with email and password).
   This leads to reAuth always failing for Google users.

2. Additionally the same set of user properties is being displayed in Profile for both local and Google accounts.
   This allows for unexpected behavior where Google users can have a mismatch of email addresses as well as a redundant password field.

Fixes:

• Separate reauthentication logic based on account provider.
• Disable updating of email and password for accounts provided by Google.

Refactor Firebase.js

Currently, Firebase.js contains outdated collections and duplicated code for displaying error messages from Firebase.

Below are recommended changes to be made:

• Remove unused db collections for storing user information
• Refactor error messages from Firebase API calls

Suitable testing will be done to ensure functionality is preserved before merging.

• Tested

User profile pictures and names not updated in posts and comments

After posting posts or comments, users' changes in any user properties are not reflected in the forum.

Problem:

• User properties are recorded on creation of posts and comments
• Updates of user properties are not reflected in above fields
• Only currentUser can be accessed via Firebase Authentication

To do:

• Implement users collections on Cloud Firestore (database)
• Update users' fields on changes in user properties
• Query database to reflect user properties

Unhandled firebase exception in Profile

Issue: Wrong password or similar errors is not being handled when confirming password in Profile page.

Fix: Catch and handle such errors

Steps to reproduce:

1. Go to Profile page
2. Edit any particular field
3. Press done
4. Enter wrong password
5. Click confirm
6. A runtime error message will be displayed on screen. See below.

user data not deleted after user deletion

Assessments document in firebase not deleted after user account is deleted.
When the deleted email is used to make a new account, document content can be read and accessed.