/icare

iCare internal project for Stone Forest

Primary LanguageTypeScript


Logo

ICare Web Application

Front-end web application for RSM Stone Forest employees to nominate each other for good service awards.
Explore the docs »

View Demo · Report Bug

Table of Contents
  1. About The Project
  2. Getting Started
  3. Code structure
  4. Potential issues and improvements
  5. Contributing
  6. License
  7. Contact
  8. Acknowledgments

About The Project

The ICare web application project was set up to digitalise the existing ICare internal program by RSM Stone Forest, so as to encourage employees and clients to vote for employees as well as award employees that have shown to display good service towards clients, while reducing the man-hours required for the ICare committee members and HOD staff to vet the nominations.

(back to top)

Built With

The ICare web application was built with the following frameworks/libraries.

  • NextJS
  • ReactJS
  • Material UI
  • Recoil
  • React hook form

(back to top)

Getting Started

In order to run the ICare web application locally, nodejs must be installed.

It's highly recommended to use macos or linux for easier installation.

Prerequisites

The ICare web app uses yarn as its package manager. To install, run the command below (AFTER installing nodejs).

yarn

npm install --global yarn

Installation

To install all of the packages required by the ICare web application, run the commands below.

Clone the repo

git clone https://github.com/aidanaden/icare.git

Install NPM packages

cd icare
yarn

(back to top)

Deployment

  • Development: When deploying the ICare web application to development, enter the development API server url (can be found in .env.example file) in the variable BASE_URL_API variable in the .env file.

  • Production: When deploying the ICare web application to production, enter the production API server url (can be found in .env.example file) in the variable BASE_URL_API variable in the .env file.

After you've set up the BASE_URL_API and FORGET_API_URL variables in the .env file, run the command

yarn build

The output files will be created in the /out directory, which you can copy/paste into your web server.

(back to top)

Code structure

The code structure will be explained via:

  1. folder directory: explains the general use/purpose of code within each directory
  2. each web page: explains where the relevant code is for each web page

Code structure via folder directory

/pages

  • The pages directory stores all of the entry files for each page. E.g. To find the code for the /nominations page, simply look for the file /src/pages/nominations/index.tsx, To find the code for the /dashboard page, simply look for the file /src/pages/dashboard.tsx.

/lib

  • The lib directory stores all of the functions used to fetch data from the backend via api requests (functions are stored in /lib/nominations.ts)

/hooks

  • The hooks directory stores the useAuth context that handles all authentication requests as well as the useInterval hook that ensures that inactive users are logged out within a 15min interval

/enums and /interfaces

  • The enums and interfaces directories store the different data types used within the app

/constants

  • The constants directory stores all constants (including the dev/prod api urls) used within the app

/components

  • The components directory stores all the components used within the app (sorted in different folders according to the component type)

/styles

  • The styles directory stores all theme stylings used within the app (e.g. colors, fonts, etc)

/atoms

  • The atoms directory is used by the Recoil library to store shared state across the app (used mainly by the create/edit nomination step form component)

Code structure via web pages

Login page

  • All code can be found in the /src/pages/login.tsx file
  • Uses authentication api calls that can be found in the /src/hooks/useAuth.tsx file

Dashboard page

  • All code found in /src/pages/dashboard.tsx
  • Fetches data using the useNominations hook found in /src/lib/nominations.ts

Create/Edit nominations page

  • All code found in /src/pages/nominations/new.tsx and /src/pages/nominations/edit/[id].tsx
  • Both files share similar layouts and components, only differ in data fetched (edit page fetches existing nomination data)
  • Fetches data using the useStaffDepts and useNominationDetails hooks found in /src/lib/nominations.ts

Nominations, Endorsements and Committee pages

  • All code found in /src/pages/nominations.tsx, /src/pages/endorsements.tsx, /src/pages/committee.tsx
  • All 3 pages share similar layouts and components and only differ in the different nomination data
  • Uses the useNominations hook found in /src/lib/nominations.ts

Nomination details page

  • All code found in /src/pages/nominations/[id].tsx
  • Uses the useNominationDetails hook found in /src/lib/nominations.ts

(back to top)

Potential issues and improvements

Issues

  • Staff ID is stored in local storage which is accessible by malicious javascript code (either via website or chrome extension)

Improvements

  • Add user profile pictures
  • Re-design nomination details page for better UI/UX
  • Add captcha to login authentication
  • Optimizing number of fetch requests made in the nomination quiz form
  • Refactor the nomination step form component used in create/edit nomination form page
  • Refactor the table component used in nominations/endorsements/committee pages

(back to top)

Contact

Ryan Aidan - aidan@u.nus.edu

Project Link: https://github.com/aidanaden/icare

(back to top)