{"id":42399878,"url":"https://github.com/ai-cfia/nachet-frontend","last_synced_at":"2026-01-28T01:14:35.594Z","repository":{"id":180721728,"uuid":"665611401","full_name":"ai-cfia/nachet-frontend","owner":"ai-cfia","description":"Frontend application for seed classification of images acquired from digital microscopes","archived":false,"fork":false,"pushed_at":"2024-10-29T14:01:01.000Z","size":14766,"stargazers_count":2,"open_issues_count":29,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-29T17:11:58.573Z","etag":null,"topics":["annotation-tool","artificial-intelligence","deep-learning","frontend","image-analysis","image-classification","image-processing","science"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ai-cfia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-12T15:28:37.000Z","updated_at":"2024-09-09T17:07:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"bca27f91-b1f0-418a-9a1f-187e4b6c5cbe","html_url":"https://github.com/ai-cfia/nachet-frontend","commit_stats":{"total_commits":205,"total_committers":11,"mean_commits":"18.636363636363637","dds":0.7463414634146341,"last_synced_commit":"d368e3e83f104fcdf69d437cfe1c0205f6713413"},"previous_names":["ai-cfia/nachet-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ai-cfia/nachet-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ai-cfia%2Fnachet-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ai-cfia%2Fnachet-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ai-cfia%2Fnachet-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ai-cfia%2Fnachet-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ai-cfia","download_url":"https://codeload.github.com/ai-cfia/nachet-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ai-cfia%2Fnachet-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28831241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T23:29:49.665Z","status":"ssl_error","status_checked_at":"2026-01-27T23:25:58.379Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["annotation-tool","artificial-intelligence","deep-learning","frontend","image-analysis","image-classification","image-processing","science"],"created_at":"2026-01-28T01:14:34.881Z","updated_at":"2026-01-28T01:14:35.587Z","avatar_url":"https://github.com/ai-cfia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite React Project\n\nThis project was initialized with [Vite](https://vitejs.dev/), a build tool that\naims to provide a faster and leaner development experience for modern web\nprojects.\n\n## Setting up @saithodev/ts-appversion\n\nTo ensure a smooth development experience, it's crucial to manage the\napplication versioning right from the start. We use @saithodev/ts-appversion for\nthis purpose. Please install it by executing the command below before moving\nforward with the development or build process:\n\n```bash\nnpm install @saithodev/ts-appversion\n```\n\nAfter installing @saithodev/ts-appversion, run the prestart script to ensure\nyour application version is correctly set based on the latest git tag:\n\n```bash\nnpm run prestart\n```\n\nAfter installing, you can proceed with the development or build processes of\nyour project.\n\n```bash\nnpm run dev\n```\n\nThis will serve your application on localhost:5173, where you can view it in\nyour preferred browser. The server is configured to automatically reload upon\nany changes to your code, providing instant feedback on your development\nprogress. Additionally, build errors and lint warnings will be prominently\ndisplayed in the console, helping you maintain a clean and efficient codebase.\n\nThe app will automatically reload if you make changes to the code. You will see\nthe build errors and lint warnings in the console.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm run dev`\n\nStarts the development server. Open localhost:5173 to view it in your browser.\n\nThe app will automatically reload if you make changes to the code. You will see\nthe build errors and lint warnings in the console.\n\n### `npm run prebuild`\n\nPrepares the application versioning before building. It's an essential step to\nensure that the build includes the correct version of your application.\n\n### `npm run build`\n\nBuilds the app for production to the `dist` folder. It correctly bundles React\nin production mode and optimizes the build for the best performance. Your app is\nready to be deployed!\n\n### `npm run preview`\n\nLocally preview production build.\n\n### `npm run lint`\n\nRuns eslint to find and fix problems in your JavaScript code.\n\n### `npm run test`\n\nLaunches the test runner in the interactive watch mode.\n\n## Code Formatting with Prettier\n\nTo ensure your codebase remains clean and consistent, we use\n[Prettier](https://prettier.io/) for automatic code formatting. Before\ncommitting your changes, you can format your code by running the following\ncommand:\n\n```bash\nnpx prettier --write .\n```\n\nExecuting this command automatically formats the specified files. You can\nreplace `.` with the relative path of any specific file or directory you wish to\nformat. This allows for targeted formatting, ensuring that only the desired\nsections of your codebase are adjusted.\n\n### Running the application with docker\n\n1. Build the docker image:\n\n   ```bash\n   docker build -t finesse-frontend .\n   ```\n\n2. Run the image: `docker run -p 3000:3000 finesse-frontend`.\n\n### Docker-compose (optional)\n\nYou can also use `docker-compose` to run the API with the client. The API is the\nbackend that this client uses and is available at\n\u003chttps://github.com/ai-cfia/finesse-backend\u003e.\n\nTo run the API and the client together, make sure you have all the environment\nvariables required from the backend (see .env.template in the repository) and\nthen you can use the following command:\n\n```bash\ndocker-compose up --build\n```\n\nYou can then access the client at `http://localhost`. Take note that the backend\nimage is being pulled from our Github registry and the frontend image is being\nbuilt from the Dockerfile in the repository. This enables preview of local\nchanges in the frontend.\n\n## Deployment Environment Configuration Management\n\nFor managing and configuring different deployment environments (development,\nstaging, production), we follow a structured approach to ensure consistency and\nreliability across all stages of deployment. Detailed guidelines and practices\ncan be found in our [Deployment Environment Configuration Management\ndocumentation](https://github.com/ai-cfia/dev-rel-docs/blob/103-documentation-request-environment-configuration-guidelines/TypeScript-AppVersion/DEPLOYMENT_ENV_CONFIG_MANAGEMENT.md).\n\nThis documentation covers:\n\n- Overview and purpose of different environment files (`environment.ts`,\n`environment.staging.ts`, `environment.prod.ts`).\n- The process for selecting and applying the correct environment configuration\nduring the build and deployment.\n- Best practices for maintaining clear, consistent, and secure configuration\nmanagement across all frontend components.\n\nRefer to this documentation to understand how to effectively manage and utilize\nenvironment configurations in your project.\n\n## Environment Variable Setup\n\nTo run the application correctly, certain environment variables need to be set.\nThese variables control various aspects of how the application behaves in\ndifferent environments (development, staging, production).\n\n### Required Variables\n\n1. `VITE_BACKEND_URL`: URL of the backend server. This is used to make API calls\nfrom the frontend.\n2. `VITE_APP_MODE`: Determines the mode in which the application runs. Set to\n`\"test\"` for using test data, any other value will use real data from the\nbackend.\n\n### Setting Up Environment Variables\n\nYou can set these variables in a `.env` file in the root of your project.\n\nRemember to replace the values with the appropriate URLs and modes for your\nspecific environment. Also, ensure that you do not commit sensitive information\nlike production URLs or credentials in the `.env` file to your version control\nsystem.\n\n### Accessing Environment Variables in the Application\n\nIn your React application, you can access these variables using `process.env`.\nFor example:\n\n- `process.env.VITE_BACKEND_URL` to get the backend URL.\n- `process.env.VITE_APP_MODE` to check the current mode of the application.\n\nNote: After changing the values in your `.env` file, you will need to restart\nyour development server for the changes to take effect.\n\n## Learn More\n\nTo learn more about Vite, check out the [Vite\ndocumentation](https://vitejs.dev/guide/).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fai-cfia%2Fnachet-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fai-cfia%2Fnachet-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fai-cfia%2Fnachet-frontend/lists"}