Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tutosrive/ferreandina-nosql/llms.txt

Use this file to discover all available pages before exploring further.

The app/fr directory contains the Ferreandina frontend dashboard — a single-page application built with Vite 6, React 18, TypeScript 5.8, Tailwind CSS 4, and PrimeReact 10. It communicates with the backend REST API exclusively through an Axios-based service layer and provides full CRUD interfaces for every resource (branches, products, categories, customers, suppliers, and workers) plus an advanced-queries panel for cross-collection reports.

​
Prerequisites

Before setting up the frontend, make sure the following tools are available on your machine:
  • Node.js 18 or later — required by Vite 6 and the TypeScript compiler
  • pnpm (recommended) — the project uses a pnpm workspace at the monorepo root; run npm install -g pnpm if you don’t already have it
You can use npm or yarn instead of pnpm, but the lock-file committed to the repository is pnpm-lock.yaml. Using a different package manager may produce dependency version mismatches.

​
Project Structure

The key directories inside app/fr are: 
app/fr/
├── src/
│   ├── components/     # Reusable UI components
│   ├── models/         # TypeScript interfaces
│   ├── pages/          # Route pages (by resource)
│   ├── routes/         # React Router config
│   └── services/       # Axios-based API service classes
├── public/
├── index.html
├── package.json
└── vite.config.ts
Each resource group (branches, products, categories, customers, suppliers, workers) has its own sub-directory under pages/ containing four page components: list, create, update, and view.

​
Install & Run

1

Navigate to the frontend package

Move into the React application directory from the monorepo root:
cd app/fr
2

Create the environment file

Create a .env file at app/fr/.env and set the base URL of your running backend:
VITE_API_URL=http://localhost:7070/
The Axios config reads this variable at startup. If the variable is absent it falls back to http://localhost:8080/.
3

Install dependencies

Install all packages declared in package.json:
pnpm install
4

Start the development server

Launch the Vite development server with hot-module replacement:
pnpm dev
The dashboard is now available at http://localhost:5173. The Vite dev server proxies nothing by default — every API call goes directly to the URL specified in VITE_API_URL.

​
Build for Production

To compile a production-optimised bundle and preview it locally before deploying: 
pnpm build
pnpm preview
pnpm build runs tsc -b for a full TypeScript check and then Vite’s Rollup-based bundler. The output lands in app/fr/dist/. pnpm preview serves that output folder on a local static server so you can verify the build before pushing to a host.

​
Key Dependencies

The runtime dependencies that power the dashboard are:
PackageVersionPurpose
react / react-dom18.2Core UI library
axios1.9HTTP client for API calls
react-router-dom6.30Client-side routing
primereact10.9UI component library (tables, dialogs, buttons)
primeflex4.0PrimeReact’s CSS utility layer
tailwindcss4.1Utility-first CSS (via @tailwindcss/vite plugin)
react-hot-toast2.4Lightweight toast notifications
sweetalert211.21Modal alert / confirmation dialogs
formik2.4Form state management
yup1.6Schema-based form validation
react-tabulator0.21Advanced data grid (used in Advanced Queries)
lucide-react0.477Icon set
For the best development experience, install the following VS Code extensions:
  • Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) — autocomplete and linting for Tailwind utility classes
  • TypeScript + JavaScript (ms-vscode.vscode-typescript-next) — enhanced type-checking and IntelliSense for .ts / .tsx files

Build docs developers (and LLMs) love

Get started for freeTalk to us