{"id":33346883,"url":"https://github.com/atelesjr/brain_agriculture","last_synced_at":"2026-04-14T10:31:37.002Z","repository":{"id":323754817,"uuid":"1094537189","full_name":"atelesjr/brain_agriculture","owner":"atelesjr","description":" “Rural producers management UI — React + TypeScript, Vite, Recharts; live demo available.”","archived":false,"fork":false,"pushed_at":"2025-11-19T15:09:17.000Z","size":496,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-19T15:36:21.670Z","etag":null,"topics":["react-hook-forms","reactjs","recharts-js","redux-toolkit","styled-component","typescript","vitejs","zod"],"latest_commit_sha":null,"homepage":"https://brainagriculture-seven.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atelesjr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-11T20:58:05.000Z","updated_at":"2025-11-19T15:09:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/atelesjr/brain_agriculture","commit_stats":null,"previous_names":["atelesjr/brain_agriculture"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/atelesjr/brain_agriculture","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atelesjr%2Fbrain_agriculture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atelesjr%2Fbrain_agriculture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atelesjr%2Fbrain_agriculture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atelesjr%2Fbrain_agriculture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atelesjr","download_url":"https://codeload.github.com/atelesjr/brain_agriculture/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atelesjr%2Fbrain_agriculture/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31793212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-hook-forms","reactjs","recharts-js","redux-toolkit","styled-component","typescript","vitejs","zod"],"created_at":"2025-11-22T08:00:38.208Z","updated_at":"2026-04-14T10:31:36.996Z","avatar_url":"https://github.com/atelesjr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Brain Agriculture — Delivery Guide\n\n[![CI](https://github.com/atelesjr/brain_agriculture/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/atelesjr/brain_agriculture/actions/workflows/ci.yml)\n\nThis file contains installation, test and delivery instructions intended for the final handoff.\n\n## Quick summary\n\n- Project: React + TypeScript + Vite\n- State: Redux Toolkit\n- Charts: Recharts\n- Styling: styled-components\n- Forms \u0026 validation: react-hook-form + zod\n- Tests: Vitest + Testing Library (happy-dom)\n- Mock API: json-server (dev)\n\n## Prerequisites\n\n- Node.js \u003e= 18\n- npm\n\n## Install\n\n```powershell\nnpm install\n```\n\n## Development\n\nStart mock API (separate terminal):\n\n```powershell\nnpm run server\n```\n\nStart dev server:\n\n```powershell\nnpm run dev\n```\n\nOpen: http://localhost:5173\n\nAlternatively, start both the dev server and the mock API together (single terminal):\n\n```powershell\nnpm run dev:all\n```\n\nThis runs `vite` and `json-server` concurrently so you can develop without opening multiple terminals.\n\n## Tests\n\nRun the full deterministic suite (project serial runner):\n\n```powershell\nnpm run test:local\n```\n\nRun vitest once (parallel):\n\n```powershell\nnpm run test:run\n```\n\nRun a single test file:\n\n```powershell\nnpx vitest run src/pages/Home/index.test.tsx --reporter=verbose\n```\n\n## Build\n\nTo verify TypeScript + Vite build:\n\n```powershell\nnpm run build\n```\n\n## Notes about Dashboard and tests\n\n- `useDashboardData` contains aggregation logic for totals and chart data.\n- `ChartsPanel` renders three pie charts and also exposes accessible HTML legends so tests do not rely on Recharts internals.\n- Tests were stabilized by adding explicit legends and fixing fixtures to match `src/types/producer.ts` types.\n\n## Forms and validation\n\n- The application uses `react-hook-form` for form state management and integration with UI inputs.\n- `zod` is used to declare validation schemas that are integrated with `react-hook-form` via `@hookform/resolvers`.\n\nThis combination provides performant form state, decoupled validation schemas and strong TypeScript inference for form values.\n\n## Create a PR\n\n1. Push branch:\n\n```powershell\ngit push -u origin feat/Dashboard\n```\n\n2. Open compare page in browser:\n\nhttps://github.com/atelesjr/brain_agriculture/compare/feat/Dashboard?expand=1\n\n3. Suggested PR title: `feat(dashboard): add ChartsPanel, useDashboardData and tests`\n\nIf you have `gh` available:\n\n```powershell\ngh pr create --base main --head feat/Dashboard --title \"feat(dashboard): add ChartsPanel, useDashboardData and tests\" --body \"See commits for details.\"\n```\n\n## Delivery checklist\n\n- [ ] Run `npm run test:local` and confirm all tests pass\n- [ ] Run `npm run build` successfully\n- [ ] Open PR and request review\n\n---\n\nIf you want, I can:\n\n- Run `npm run build` and upload artifacts\n- Create a draft PR body and open a PR (requires `gh` or manual confirmation to open in browser)\n- Prepare deployment instructions (Vercel/Netlify/Docker)\n\n## Project structure\n\nTop-level tree (important files and folders):\n\n```\n.\n├─ .github/\n│  └─ workflows/ci.yml\n├─ public/\n├─ server/\n│  └─ db.json\n├─ src/\n│  ├─ assets/\n│  ├─ components/\n│  │  ├─ atoms/\n│  │  ├─ molecules/\n│  │  └─ organisms/\n│  ├─ hooks/\n│  ├─ pages/\n│  │  ├─ Dashboard/\n│  │  └─ Home/\n│  ├─ routes/\n│  ├─ services/\n│  ├─ store/\n│  ├─ styles/\n\t│  └─ GlobalStyles.tsx\n│  └─ types/\n├─ dist/ (build output)\n├─ scripts/\n├─ test-results/\n├─ README_DELIVERY.md\n├─ README.md\n├─ package.json\n├─ tsconfig.json\n└─ vite.config.ts\n```\n\nIf you want a more detailed tree (including tests and internal files), I can generate it and append here.\n\n````\n\n## Mock API / Producers\n\nThis project includes a small mock REST API used for development, served by `json-server` from the `server/db.json` file.\n\n\u003c!-- ci: trigger --\u003e\n\n- Start the mock API server (separate terminal):\n\n```powershell\nnpm run server\n```\n\n- Default API base URL: `http://localhost:3001`.\n- Producers resource path: `/producers` (see `server/db.json`).\n\nClient-side service helpers are available at `src/services/producers.ts` and use the types in `src/types/producer.ts`.\n\nExample usage:\n\n```ts\nimport producersService from '@/services/producers';\n\n// list producers\nconst all = await producersService.listProducers();\n```\n\n## Production / Deploy notes\n\n- The frontend reads the API base from `import.meta.env.VITE_API_URL` at build time. When deploying to Vercel (or similar), set the environment variable `VITE_API_URL` to the production API URL.\n\t- Example (Render fake API): `https://brain-agriculture-api-4qkm.onrender.com`\n\t- The client code now strips trailing slashes, but it's good practice to set the env value without a trailing slash.\n\n- Important: Vite inlines `import.meta.env` values during the build, so the runtime host must be the one configured in the environment used for the production build (Vercel build settings).\n\n- If you deploy the mock API (json-server) to a service like Render, ensure the start command points to `server/db.json` (we include `render.yaml` and `Dockerfile` in the repo for convenience).\n\n- To verify production after deploy:\n\t1. Open the deployed site.\n 2. In the browser devtools Network tab, confirm requests go to the API URL defined in `VITE_API_URL` and that the resource path `/producers` returns JSON (HTTP 200).\n\n## Useful commands\n\n- Start both dev server + mock API in one terminal:\n\n```powershell\nnpm run dev:all\n```\n\n````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatelesjr%2Fbrain_agriculture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatelesjr%2Fbrain_agriculture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatelesjr%2Fbrain_agriculture/lists"}