NOTE: Google Oauth2 does not work well with the current 3rd party React library, hence you might need to log in twice to use the app.
We decided to create an admin portal that allows user to use the following features with relative ease.
- A data table that displays all the vouchers
- Create new voucher for the system
- Update any existing vouchers
- Delete any existing vouchers
- A dummy checkout page to show that the vouchers can be applied
- PostgreSQL is currently our choice of database, and we are calling REST API endpoints to perform CRUD operations on it.
- Add a new SSH key to your GitHub account. Instructions to how to generate.
-
Install Docker Desktop
-
With package manager pnpm
- Install any version of node that is >= 14.0.0.
💁 Tip: You can use nvm to easily manage multiple versions of node. Once installed, run
nvm usein the project directory.- Install pnpm
💁
npm install -g pnpm
Once you have your SSH key added and environment setup, you can clone the repository.
git clone https://github.com/nicholas5538/fp-voucher-FE.git
cd fp-voucher-FEOnce you have set up the repo, you're ready to start developing. Starting the development environment is managed by the following command(s).
- With Docker (recommended)
# Docker compose command
docker compose up -d --build
# Or you could build your own image
docker build --compress -t <image name> --target dev .
# For Windows PowerShell: ${pwd}, the rest: $(pwd)
docker run -d -p 3000:3000 -v $(pwd):/home/node/app --name <container name> fp-voucher-fe-dev- With pnpm
pnpm run i # Only run this when you have not installed any dependencies
pnpm run devThe dev command will start the application in your local environment (port 5173).
In addition to the dev command, there are other scripts available in the package.json. Some of the most common you
might get to use are:
-
pnpm run format- Check prettier formatting through all the codes💁 Tip: use
pnpm run format:fixto run auto prettier formatting across all the codes -
pnpm run lint- Runs TS linter through all the codes