Documentation Index
Fetch the complete documentation index at: https://mintlify.com/joaoelian204/Portal-Ciudadano-Manta-web/llms.txt
Use this file to discover all available pages before exploring further.
Installation Guide
This comprehensive guide will walk you through setting up Portal Ciudadano Manta from scratch, including all prerequisites, environment configuration, and Supabase backend setup.Prerequisites
Before you begin, ensure your development environment meets these requirements:Node.js
Package Manager
Git
Supabase Account
Step 1: Clone the Repository
First, clone the project repository to your local machine:Step 2: Install Dependencies
Install all required npm packages:Key Dependencies Installed
The installation includes:Frontend Framework
Frontend Framework
TypeScript & Build Tools
TypeScript & Build Tools
Styling
Styling
Backend & Database
Backend & Database
Maps & Geolocation
Maps & Geolocation
Internationalization
Internationalization
PDF Generation
PDF Generation
Step 3: Supabase Project Setup
Supabase provides the backend infrastructure including database, authentication, and file storage.Create Supabase Project
- Go to supabase.com and sign in
- Click “New Project”
- Fill in project details:
- Name: Portal-Ciudadano-Manta
- Database Password: Strong password (save this!)
- Region: Choose closest to Ecuador (e.g., US East)
- Pricing Plan: Free tier is sufficient for development
- Click “Create new project”
Get API Credentials
- Go to Settings → API
- Copy these values:
- Project URL (
VITE_SUPABASE_URL) - anon public key (
VITE_SUPABASE_ANON_KEY)
- Project URL (
Create Database Schema
Configure Row Level Security (RLS)
Configure Storage Buckets
- Go to Storage in Supabase dashboard
- Create a new bucket called
reportes-fotos - Set it to Public
- Create another bucket called
noticias-imagenes - Set it to Public
Configure Authentication Settings
- Enable Email confirmation
- Set Site URL: Your production URL (or
http://localhost:5173for dev) - Add Redirect URLs:
http://localhost:5173/login?verified=truehttp://localhost:5173/reset-password- Your production URLs
- Confirmation email
- Password reset email
- Magic link email
Step 4: Environment Configuration
Create your environment file with the Supabase credentials:How Environment Variables Are Used
The app loads these variables in the Supabase client:Step 5: Start Development Server
With everything configured, start the development server:http://localhost:5173Step 6: Verify Installation
Test that everything is working:Check Browser Console
- No errors in console
- Supabase client initialized successfully
- No 404s for assets
Test Registration
/register and create a test account to verify:- Form validation works
- Supabase authentication works
- User record created in database
- Confirmation email sent
Building for Production
When ready to deploy:Deploy to Netlify
netlify.toml configuration for easy deployment:Option 1: Netlify CLI- Push your code to GitHub
- Connect repository in Netlify dashboard
- Configure build settings:
- Build command:
npm run build - Publish directory:
dist - Node version:
20
- Build command:
- Add environment variables in Netlify:
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
netlify.toml configures redirects for SPA routing, security headers, and caching automatically.Troubleshooting
Supabase Connection Errors
Supabase Connection Errors
- Verify
.envfile exists and has correct credentials - Check Supabase project status (not paused)
- Verify API keys are copied correctly (no extra spaces)
- Check browser console for specific error messages
- Ensure Supabase project URL uses HTTPS
Build Errors
Build Errors
- Delete
node_modulesand reinstall: - Clear Vite cache:
- Check Node.js version (must be 16+)
Map Not Loading
Map Not Loading
- Check browser console for CORS errors
- Verify Leaflet CSS is imported in
main.ts - Check network tab for tile loading issues
- Ensure location permissions are granted
Authentication Issues
Authentication Issues
- Verify redirect URLs in Supabase settings
- Check site URL configuration
- Clear browser cookies and local storage
- Verify RLS policies are correct
- Check email confirmation settings
