Skip to main content

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.

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.

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.
cp .env.example .env
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.
VariableDescription
VITE_AUTH0_DOMAIN_NAMEYour Auth0 tenant domain, e.g. your-tenant.us.auth0.com. Found in the Auth0 dashboard under Applications → Settings → Domain.
VITE_AUTH0_CLIENT_IDThe 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.
VariableDescription
VITE_SUPABASE_URLThe 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_KEYThe 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.
VariableDescription
VITE_CLOUDFLARE_CDN_URLThe 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_URLThe 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_KEYA 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

# Auth0 (legacy - currently not the primary auth)
VITE_AUTH0_DOMAIN_NAME = "your-tenant.us.auth0.com"
VITE_AUTH0_CLIENT_ID = "your-auth0-client-id"

# Supabase (primary backend)
VITE_SUPABASE_URL = "https://xxxxxxxxxxxx.supabase.co"
VITE_SUPABASE_ANON_KEY = "your-supabase-anon-key"

# Cloudflare R2 + Workers
VITE_CLOUDFLARE_CDN_URL = "https://pub-xxxx.r2.dev"
VITE_CLOUDFLARE_WORKERS_URL = "https://your-worker.your-subdomain.workers.dev"
VITE_CLOUDFLARE_WORKERS_API_KEY = "your-secret-api-key"

Vite Dev Server

FerreMarket uses Vite 6 as its build tool and development server. With .env in place, install dependencies and start the server:
1

Install dependencies

npm install
2

Start the development server

npm run dev
Vite will print the local URL — by default http://localhost:5173.
3

Open the app

Navigate to http://localhost:5173 in your browser. Hot Module Replacement (HMR) is active; changes to source files reflect instantly without a full page reload.
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:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['lucide-react'],
  },
});

TypeScript

The project ships with a composite TypeScript configuration. tsconfig.json is the root config that references two sub-configs:
  • tsconfig.app.json — targets the src/ directory with ES2020, strict mode, noUnusedLocals, noUnusedParameters, and noFallthroughCasesInSwitch enabled.
  • tsconfig.node.json — targets config files such as vite.config.ts.
To type-check the entire project without emitting any files, run:
npx tsc --noEmit
This is the same check that runs in CI. Fix all reported errors before opening a pull request — the strict: true flag means implicit any and unsafe nullability are treated as hard errors.

Linting

ESLint is configured via eslint.config.js with the following plugins active:
  • typescript-eslint — TypeScript-aware linting rules
  • eslint-plugin-react-hooks — enforces the Rules of Hooks
  • eslint-plugin-react-refresh — warns when a component export pattern would break Fast Refresh
Run the linter across all source files with:
npm run lint
Resolve all warnings and errors before building for production. The same command is used in CI pipelines.

Build docs developers (and LLMs) love