HarvTech (Web platform)

The platform project to manage cultivation in HarvTech.

---

Production

The HarvTech production URL, access to see the project.

Install prerequisites

1. NodeJS and NPM.
2. Yarn.

Setup project

Follow all commands bellow.

Environment

Create .env file in root folder with content.

VITE_BASE_URL=<set base URL 🔑>
VITE_API_URL=<set API URL 🔑>
VITE_STORAGE_PREFIX=<set Storage prefix 🔑>

Install packages

yarn

Active Husky hooks (if not automatically configured)

yarn prepare

Start

yarn dev

Build

yarn build

Preview

yarn preview

Setup JetBrains (IDE)

Configure Lint

Go to File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint, select Automatic ESLint configuration and check Run eslint --fix on save, or read the ESLint documentation for WebStorm.

Configure Prettier

Go to File > Settings > Languages & Frameworks > JavaScript > Prettier, check On 'Reformat Code' action and check On save, or read the Prettier documentation for WebStorm.

Lint

Run commands:

Check

yarn lint

Fix

yarn lint:fix

Prettier

Run commands:

Check

yarn prettier

Fix

yarn prettier:fix

Format code

yarn format

Cypress

• You should use the data-cy attribute to select elements in your tests.
• File should be called as *.spec.cy.tsx for component tests and *.test.cy.tsx for e2e tests.
• Read the Cypress documentation.

cypress:open

and

cypress:check

About file names

Helpers, components, pages and others files should be very specific in file names.

Prototype of components, colors, fonts and others

You can access our Figma project.

Roadmap

• Upload in Netlify.
• Add a router in project.
• Configure environment variables in Netlify.
• Create a prototype in Figma and document here.
• Add Axios.
• Add and create components with Ariakit.
• Add different languages.
• Style noscript.
• Maybe use IoT components.
• Upload in Azure.
• Code Coverage with Cypress.
• Read about maps for mark points and monitoring in farming (satellite JS library), like Satellite (GitHub) and Satellite (YouTube).
• Review project.
• Add Rollbar.
• Set privacy policy in different screens in project.
• Use barrel for files like index.ts in folders.
• Adjust long imports and type problems.
• Use animations.
• Add robots.txt.
• Create checking input length above the component like 12/250 chars.
• Add React Helmet.
• Add information logged user.
• Run OWASP ZAP test.

Thanks for read

Product made by Tech Warriors.