Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v18 or higher)
  • npm, yarn, or pnpm package manager
  • Git for version control
  • Supabase CLI (optional, for local development)

​
Quick Start

​
1. Clone the Repository

git clone <repository-url>
cd creativa-labs-cabina-de-fotos

​
2. Install Dependencies

npm install

​
3. Configure Environment Variables

Create a .env.local file in the root directory: 
cp .env.example .env.local
See Environment Variables for detailed configuration.

​
4. Run Development Server

npm run dev
The application will start on https://localhost:3000 with HTTPS enabled.
The development server uses a self-signed SSL certificate for local HTTPS. Your browser may show a security warning - this is normal for local development.

​
Project Structure

creativa-labs-cabina-de-fotos/
├── src/
│   ├── components/         # React components
│   │   ├── dashboards/    # Admin, Partner, Client dashboards
│   │   ├── kiosk/         # Event mode UI
│   │   └── shared/        # Reusable components
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utilities and clients
│   ├── types/             # TypeScript definitions
│   └── index.tsx          # Main app entry point
├── supabase/
│   ├── functions/         # Edge Functions
│   ├── migrations/        # Database migrations
│   └── config.toml        # Supabase configuration
├── public/                # Static assets
├── index.html             # Main app HTML
├── dashboard.html         # Dashboard HTML
├── vite.config.ts         # Vite configuration
└── package.json           # Dependencies

​
Key Dependencies

The project uses the following main dependencies:
PackageVersionPurpose
@supabase/supabase-js^2.90.1Supabase client
react^19.2.0UI framework
react-dom^19.2.0React rendering
framer-motion^12.27.5Animations
@react-three/fiber^9.4.03D graphics
lucide-react^0.554.0Icons
qrcode.react^4.2.0QR code generation
vite^6.2.0Build tool
typescript~5.8.2Type safety

​
Build for Production

npm run build
The production build outputs to the dist/ directory.

​
Preview Production Build

npm run preview

​
Troubleshooting

The app is configured to run on port 3000. If this port is busy, you can:
  1. Stop the process using port 3000
  2. Modify the port in vite.config.ts under server.port
The development server uses @vitejs/plugin-basic-ssl for HTTPS. Browser warnings are expected.To trust the certificate:
  • Chrome: Click “Advanced” → “Proceed to localhost”
  • Firefox: Click “Advanced” → “Accept the Risk and Continue”
Ensure your .env.local contains valid Supabase credentials:
  • VITE_SUPABASE_URL
  • VITE_SUPABASE_ANON_KEY
Check that your Supabase project is active and accessible.

​
Next Steps

Environment Variables

Configure all required environment variables

Database Schema

Understand the database structure

Deployment

Deploy to production

Supabase Integration

Learn about Supabase setup

Build docs developers (and LLMs) love

Get started for freeTalk to us