The Fish Commodity Management System is a Frontend Web Application + (PWA) for managing farmer and price data.
- Node.js v20+
- npm
- React 18
- Next.js 14 with TypeScript
- Zustand
- React Query
- SCSS
- Zod
- React Hook Form
- Framer Motion
- Next PWA
- Husky
- ESLint
- Prettier
- Jest
Clone the project
git clone https://github.com/raybagas7/eFishery-THT-FE.git
Go to the project directory
cd eFishery-THT-FE
Install dependencies
npm install
Environment variable
cp .env.example .env
follow the .env.example and fill every variable and base api url with your needs
Start the application in Development mode.
npm run dev
(Web app will run on port 3000)
To build and start the application you can run this command
npm run build
npm run start
(Web app will run on port 3000)
To install the Progressive Web App (PWA) on your device, follow these steps:
- Open the application in your web browser.
- If the browser supports PWAs, you should see an option to "Install" or "Add to Home Screen. (Works on phone)" Click on this option.
- Follow the prompts to install the PWA on your device's home screen / setup installer.
- Once installed, you can launch the PWA directly from your device's home screen or shortcut from your desktop, just like any other app.
Note: The availability of the "Install" or "Add to Home Screen" option may vary depending on the browser and device you are using.
By following these steps, users will be able to install this application on their devices for easy access and a more app-like experience.
When you want to continue developing this application, follow these steps:
-
Initialize Husky: Run the following command to initialize Husky:
npm run prepare
Husky will be initiated, and every time you commit, Husky pre-commit will intercept the commit and run tests before it is committed.
1.Prettier Test: Husky will run a Prettier test. If it fails, you must fix it manually by following the Prettier style or by running:
npm run write-format
2.Linter Check: Husky will perform a linting check. If the linter fails, there will be information in the terminal, and you must fix it manually.
3.TypeScript Type Checking: Husky will check TypeScript types. If it passes, the commit will be completed if you have already defined the commit message. If not, you will need to write the commit message.
4.Build Test (Optional): Additionally, there is a build test included in the pre-commit file. This test is currently commented out to avoid slowing down the development process, as the build process may take some time. If you want to run the build test, uncomment the script in the pre-commit file.
Before get into docker build, ensure you have Docker installed on your machine. You can download and install Docker from the . official website
-
Navigate to the project when you clone this project already.
-
Build the Docker image for the Node.js application
docker-compose build
-
Run the Docker container
docker-compose build
docker-compose up
This command will start the Docker container and run the application.
Once the Docker container is running, you can access the Node.js application by opening a web browser and navigating to localhost:3000.
This project is covered by two types of tests: unit tests using Jest and end-to-end tests using Cypress.
To test the application, you can run unit tests with Jest. To run the tests once, use the following command:
npm run test
If you want to develop more or perform continuous testing, you can run the tests in watch mode:
npm run test:watch
If you want to add more test case, the test directory is on root directory