This page walks you through everything needed to run FerreMarket on your local machine. It covers the minimum software versions required, how to configure every environment variable the application expects, how to start the Vite development server, and how to validate the project with TypeScript and ESLint before committing changes.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/ProyectoFerretek/FerreMarket/llms.txt
Use this file to discover all available pages before exploring further.
System Requirements
FerreMarket requires the following tools to be installed before you clone the repository.Node.js v16+
Download from nodejs.org. v18 LTS or v20 LTS are recommended for best compatibility with Vite 6.
npm v8+
Bundled with Node.js v16+. Run
npm --version to confirm. Alternatively, pnpm or yarn can be used but the lockfile is npm-based.Modern Browser
Chrome, Firefox, Safari, or Edge. Required for the ES2020 module syntax used throughout the codebase.
Environment Variables
FerreMarket reads all runtime configuration from a.env file in the project root. Copy .env.example to .env and fill in each value before starting the dev server.
All variables must be prefixed with
VITE_ to be exposed to client-side code. Vite statically replaces import.meta.env.VITE_* references at build time — any variable without the prefix is invisible to the browser bundle.Auth0 (Legacy)
These two variables were used during an earlier authentication implementation. Auth0 is no longer the primary auth provider — Supabase Auth handles login and session management. The variables are retained in.env.example for projects that re-enable the Auth0 integration.
| Variable | Description |
|---|---|
VITE_AUTH0_DOMAIN_NAME | Your Auth0 tenant domain, e.g. your-tenant.us.auth0.com. Found in the Auth0 dashboard under Applications → Settings → Domain. |
VITE_AUTH0_CLIENT_ID | The client ID of your Auth0 Single Page Application. Found alongside the domain on the same settings page. |
Supabase (Primary Backend)
Supabase provides the database, authentication, storage, and Edge Functions for FerreMarket. These two variables are required — the application will fail to initialise without them.| Variable | Description |
|---|---|
VITE_SUPABASE_URL | The unique REST URL of your Supabase project, e.g. https://xxxxxxxxxxxx.supabase.co. Found in the Supabase dashboard under Project Settings → API → Project URL. |
VITE_SUPABASE_ANON_KEY | The public anonymous key used for client-side queries. Found under Project Settings → API → Project API Keys → anon / public. This key is safe to expose in the browser because Row Level Security (RLS) enforces data access. |
Cloudflare R2 + Workers
FerreMarket stores product images in a Cloudflare R2 bucket and uses a Cloudflare Worker as a proxy for authenticated image uploads.| Variable | Description |
|---|---|
VITE_CLOUDFLARE_CDN_URL | The public base URL of your R2 bucket, e.g. https://pub-xxxx.r2.dev. Found in the Cloudflare dashboard under R2 → your bucket → Settings → Public Access. |
VITE_CLOUDFLARE_WORKERS_URL | The deployed URL of your Cloudflare Worker, e.g. https://your-worker.your-subdomain.workers.dev. Found in the Cloudflare dashboard under Workers & Pages → your Worker → Triggers. |
VITE_CLOUDFLARE_WORKERS_API_KEY | A secret API key validated by the Worker to authenticate upload requests. Set this to a strong random string in both your .env file and the Worker’s environment secrets. |
Complete .env Example
Vite Dev Server
FerreMarket uses Vite 6 as its build tool and development server. With.env in place, install dependencies and start the server:
The
vite.config.ts at the project root configures the build with @vitejs/plugin-react (which enables the automatic JSX runtime and React Fast Refresh) and excludes lucide-react from dependency pre-bundling for faster cold starts:
TypeScript
The project ships with a composite TypeScript configuration.tsconfig.json is the root config that references two sub-configs:
tsconfig.app.json— targets thesrc/directory withES2020,strictmode,noUnusedLocals,noUnusedParameters, andnoFallthroughCasesInSwitchenabled.tsconfig.node.json— targets config files such asvite.config.ts.
strict: true flag means implicit any and unsafe nullability are treated as hard errors.
Linting
ESLint is configured viaeslint.config.js with the following plugins active:
typescript-eslint— TypeScript-aware linting ruleseslint-plugin-react-hooks— enforces the Rules of Hookseslint-plugin-react-refresh— warns when a component export pattern would break Fast Refresh