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

Clone the Repository

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

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)

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.

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

Navigate to Registration

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

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.

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.

Complete Registration

Accept the terms and conditions, then click “Registrarse”.The system will:

Create your account in Supabase Auth
Store your profile in the usuarios table
Send a verification email
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

Go to Login Page

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

Enter Credentials

{
  email: "citizen@example.com",
  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

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.

Navigate to Report Form

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

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

Describe the Problem

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

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.

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

View Active Surveys

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

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)

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

Browse News Feed

Go to /noticias to see the latest municipal announcements.

Read Full Article

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

Managing Your Profile

Open Profile Settings

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

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);
}

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.

Documentation Index

​Quickstart Guide

​Installation Steps

​First-Time User Experience

​Creating a Citizen Account

​Logging In

​Exploring Key Features

​Reporting an Urban Issue

​Participating in Surveys

​Viewing Municipal News

​Managing Your Profile

​Administrator Access

Admin Guide

News Management

Survey Management

Report Management

​Development Commands

​Next Steps

Full Installation Guide

Architecture Overview

Quickstart Guide

Installation Steps

First-Time User Experience

Creating a Citizen Account

Logging In

Exploring Key Features

Reporting an Urban Issue

Participating in Surveys

Viewing Municipal News

Managing Your Profile

Administrator Access

Development Commands

Next Steps