Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aidanaden/icare
iCare internal project for Stone Forest
https://github.com/aidanaden/icare
Last synced: about 1 month ago
JSON representation
iCare internal project for Stone Forest
- Host: GitHub
- URL: https://github.com/aidanaden/icare
- Owner: aidanaden
- Created: 2022-05-01T17:17:20.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-09-28T09:06:10.000Z (about 2 years ago)
- Last Synced: 2024-04-14T02:00:05.671Z (8 months ago)
- Language: TypeScript
- Homepage: icare-pi.vercel.app
- Size: 29.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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
-
About The Project
-
Getting Started
- Code structure
- Potential issues and improvements
- Contributing
- License
- Contact
- 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.
### Built With
The ICare web application was built with the following frameworks/libraries.
- NextJS
- ReactJS
- Material UI
- Recoil
- React hook form
## Getting Started
In order to run the ICare web application locally, [nodejs](https://nodejs.org/en/download/) 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
```sh
npm install --global yarn
```
### Installation
To install all of the packages required by the ICare web application, run the commands below.
Clone the repo
```sh
git clone https://github.com/aidanaden/icare.git
```
Install NPM packages
```sh
cd icare
yarn
```
### 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.
## 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`
## 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
## Contact
Ryan Aidan - [email protected]
Project Link: [https://github.com/aidanaden/icare](https://github.com/aidanaden/icare)
[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge
[contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge
[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge
[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge
[issues-url]: https://github.com/othneildrew/Best-README-Template/issues
[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
[product-screenshot]: images/screenshot.png