Skip to main content

​
Quickstart Guide

This guide will help you set up Portal Ciudadano Manta quickly and explore its key features. You’ll be up and running in under 15 minutes.
Before starting, ensure you have Node.js 16+ and npm installed, plus a free Supabase account.

​
Installation Steps

1

Clone the Repository

git clone https://github.com/joaoelian204/Portal-Ciudadano-Manta-web.git
cd portalCiudadanoManta
2

Install Dependencies

npm install
This will install all required packages including:
  • Vue 3.5.22 (Composition API)
  • TypeScript 5.9.3
  • Vite 7.1.7
  • Tailwind CSS 4.1.14
  • Supabase JS Client 2.76.1
  • Leaflet 1.9.4 (maps)
  • Pinia 3.0.3 (state management)
  • Vue I18n 9.14.5 (internationalization)
3

Configure Environment Variables

Create a .env file in the project root:
touch .env
Add your Supabase credentials:
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
You’ll need to create a Supabase project first. See the Installation guide for detailed Supabase setup.
4

Start Development Server

npm run dev
The app will be available at http://localhost:5173
Your development environment is now ready! The app should open automatically in your browser.

​
First-Time User Experience

Let’s walk through creating an account and exploring the main features.

​
Creating a Citizen Account

1

Navigate to Registration

Click the “Registrarse” (Register) button in the navigation bar or go to /register.
2

Fill in Personal Information

The registration form requires:
{
  nombres: string,      // First name
  apellidos: string,    // Last name  
  cedula: string,       // 10-digit national ID
  email: string,        // Valid email address
  password: string,     // Strong password
  parroquia: string,    // Parish (neighborhood zone)
  barrio: string        // Specific neighborhood
}
Password Requirements:
  • Minimum 8 characters
  • At least one uppercase letter
  • At least one number
  • At least one special character
The system validates the Ecuadorian cédula format in real-time using the official checksum algorithm.
3

Select Your Location

Choose your parish (parroquia) from the dropdown. Available options include:
  • Eloy Alfaro
  • Los Esteros
  • Tarqui
  • Manta (rural parishes)
  • San Mateo
The neighborhood (barrio) dropdown will populate based on your selected parish.
4

Complete Registration

Accept the terms and conditions, then click “Registrarse”.The system will:
  1. Create your account in Supabase Auth
  2. Store your profile in the usuarios table
  3. Send a verification email
  4. Redirect you to the login page
src/stores/auth.store.ts
const register = async (
  email: string,
  password: string,
  userData: {
    nombres: string;
    apellidos: string;
    cedula: string;
    parroquia?: string;
    barrio?: string;
    tipo: "ciudadano" | "administrador";
  }
) => {
  // Register in Supabase Auth
  const { data: authData, error: authError } = await supabase.auth.signUp({
    email,
    password,
    options: {
      data: userData,
      emailRedirectTo: `${window.location.origin}/login?verified=true`,
    },
  });
  
  // Create user profile in database
  if (userData.tipo === "ciudadano") {
    await supabase.from("usuarios").insert({
      id: authData.user.id,
      email,
      ...userData,
      activo: true,
    });
  }
}

​
Logging In

1

Go to Login Page

Navigate to /login or click “Iniciar Sesión” in the navbar.
2

Enter Credentials

Login Flow
{
  email: "[email protected]",
  password: "YourSecurePassword123!",
  rememberMe: true  // Optional
}
Security Feature: After 3 failed login attempts, your account will be temporarily locked. The lockout duration increases with each subsequent violation:
  • 1st lockout: 1 minute
  • 2nd lockout: 5 minutes
  • 3rd+ lockout: 15 minutes
3

Access Dashboard

Upon successful login, you’ll be redirected to the main Dashboard (/dashboard) where you can access all platform features.

​
Exploring Key Features

​
Reporting an Urban Issue

One of the most important features is reporting problems in your community.
1

Navigate to Report Form

From the dashboard, click “Reportar Problema” or go to /reportar-problema.
2

Select Issue Category

Choose from the following categories:
src/types/database.types.ts
type ReporteCategoria =
  | "alumbrado"      // Street lighting
  | "baches"         // Potholes
  | "limpieza"       // Cleanliness/trash
  | "agua"           // Water supply
  | "alcantarillado" // Sewage system
  | "parques"        // Parks maintenance
  | "señalizacion"   // Traffic signs
  | "seguridad"      // Security
  | "ruido"          // Noise pollution
  | "otro";          // Other
3

Describe the Problem

Provide a clear description and optionally upload photos of the issue.
4

Select Location on Map

Use the interactive Leaflet map to pinpoint the exact location of the problem. Click on the map to set coordinates.
The map uses OpenStreetMap data and supports geolocation to help you quickly find your current location.
5

Submit Report

Click “Enviar Reporte”. Your report will be created with:
Report States
{
  estado: "pendiente",        // Initial state
  prioridad: "media",         // Auto-assigned or manual
  usuario_id: "<your_uuid>",
  categoria: "baches",
  descripcion: "Hole in the road...",
  ubicacion: "POINT(-80.709 -0.946)",  // PostGIS geometry
  fotos: ["url1", "url2"]     // Stored in Supabase Storage
}
Report Lifecycle:
  • pendiente → Initial state
  • en_revision → Admin is reviewing
  • en_proceso → Accepted and being resolved
  • resuelto → Completed successfully
  • rechazado → Not actionable or duplicate

​
Participating in Surveys

1

View Active Surveys

Navigate to /encuestas to see all active surveys targeting your neighborhood.
2

Select a Survey

Click on any survey card to view details and participate.Surveys can be:
  • Multiple choice (opcion_multiple)
  • Open text (abierta)
  • Rating scale (calificacion)
3

Submit Your Response

Answer the questions and submit. Surveys may be targeted by:
  • Specific parish (parroquia)
  • Specific neighborhood (barrio)
  • City-wide (no geographic filter)

​
Viewing Municipal News

1

Browse News Feed

Go to /noticias to see the latest municipal announcements.
2

Read Full Article

Click on any news item to view the complete article at /noticias/:id.

​
Managing Your Profile

1

Open Profile Settings

Navigate to /mi-perfil to view and edit your information.
2

Update Information

You can modify:
  • Name and contact information
  • Parish and neighborhood
  • Password
src/stores/auth.store.ts
const updateProfile = async (updates: Partial<Usuario>) => {
  const { error } = await supabase
    .from("usuarios")
    .update(updates)
    .eq("id", user.value.id);
}
3

View Your Reports

See all your submitted reports with their current status.

​
Administrator Access

If you’re an administrator, you’ll have access to additional features:

Admin Guide

Overview dashboard with statistics

News Management

Create, edit, and publish news

Survey Management

Create and monitor surveys

Report Management

Review and update citizen reports
Administrator accounts must be created with tipo: "administrador" and registered in the administradores table in addition to Supabase Auth.

​
Development Commands

Useful commands for development: 
npm run dev
# Starts Vite dev server with HMR at localhost:5173

​
Next Steps

Full Installation Guide

Set up Supabase database, configure Row Level Security, and deploy to production

Architecture Overview

Learn about the system architecture and design decisions
You’re now ready to use Portal Ciudadano Manta! Explore the platform and help improve your community.

Build docs developers (and LLMs) love

Get started for freeTalk to us