Skip to main content

​
Quick Start Guide

Get CAFH Platform up and running on your local machine in just a few minutes.

​
Prerequisites

Before you begin, ensure you have:
  • Node.js (v16 or higher) installed
  • npm or yarn package manager
  • A modern web browser (Chrome, Firefox, or Safari)
  • (Optional) Gemini API key for AI-powered features
The Gemini API key is optional. The platform works without it, but some AI features will be unavailable.

​
Installation Steps

1

Install Dependencies

Navigate to your project directory and install all required packages:
npm install
This will install:
  • React 18 and React Router
  • TypeScript and type definitions
  • Tailwind CSS for styling
  • Lucide React for icons
  • All other dependencies
2

Configure Environment (Optional)

If you want to use AI features, create a .env.local file in the root directory:
.env.local
GEMINI_API_KEY=your_api_key_here
Never commit your .env.local file to version control. It should be listed in .gitignore.
3

Start Development Server

Run the development server:
npm run dev
The application will start on http://localhost:5173 (or another port if 5173 is occupied).
4

Access the Application

Open your browser and navigate to the URL shown in your terminal (typically http://localhost:5173).You should see the CAFH Platform homepage with the hero section, search bar, and navigation menu.

​
First Login

The platform comes with pre-configured demo accounts for testing:
Use these credentials to access the full admin panel:
Email: [email protected]
Password: admin123
After logging in, you’ll be redirected to /admin with access to:
  • Dashboard with analytics
  • CRM & Contact management
  • Email campaigns and automations
  • CMS page builder
  • Media library
  • Settings and configuration

​
Exploring the Platform

Now that you’re logged in, here’s what to explore:

​
As an Administrator

Create a Page

Go to CMS & Contenidos → Click Nueva Página → Use the visual editor to build custom pages

Import Contacts

Go to CRM & Contactos → Importar CSV → Upload a contact list to test email campaigns

Build an Automation

Go to Automatizaciones → Nueva Automatización → Create a welcome email workflow

Schedule an Event

Go to Calendario → Nuevo Evento → Create a virtual or in-person activity

​
As a Member

Browse Content

Click Recursos in the top menu to explore the library filtered by your interests

Join an Event

Check Actividades to see upcoming events and join virtual meetings

​
Understanding the File Structure

The platform is organized as follows: 
source/
├── App.tsx                 # Main app with routing
├── types.ts                # TypeScript interfaces
├── storage.ts              # LocalStorage database API
├── constants.ts            # Default config and mock data
└── components/
    ├── Layout/             # Headers, footers, layouts
    ├── PublicViews/        # Homepage, login
    ├── UserViews/          # Member dashboard
    ├── AdminViews/         # Admin panel modules
    ├── MeetingsModule/     # Virtual room (Zoom)
    └── CalendarModule/     # Activity calendar
All data is stored in localStorage under keys prefixed with cafh_. You can inspect this in your browser’s DevTools → Application → Local Storage.

​
Key Configuration Files

​
Storage System (storage.ts:104-300)

The platform initializes with demo data on first load: 
// Excerpt from storage.ts
db.init = () => {
  initStorage(KEYS.BLOG, MOCK_BLOG_POSTS);
  initStorage(KEYS.EVENTS, MOCK_EVENTS);
  initStorage(KEYS.CONTACTS, MOCK_CONTACTS);
  initStorage(KEYS.HOME_CONFIG, DEFAULT_HOME_CONFIG);
  // ... more initializations
};

​
Routing (App.tsx:68-116)

Routes are protected based on user role: 
// Public routes
<Route path="/" element={<HomeView />} />
<Route path="/about" element={<DynamicPageView slug="quienes-somos" />} />

// Member routes (protected)
<Route path="/member/dashboard" element={
  <ProtectedRoute allowedRoles={[UserRole.MEMBER]}>
    <MemberDashboard />
  </ProtectedRoute>
} />

// Admin routes (protected)
<Route path="/admin" element={
  <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.SUPER_ADMIN]}>
    <DashboardView />
  </ProtectedRoute>
} />

​
Testing Email Features

The platform includes a simulated email queue. For production use, implement a real SMTP backend using the provided /api/email/queue endpoint structure.
To test email campaigns:
  1. Go to CRM & Contactos → Campañas
  2. Click Nueva Campaña
  3. Design your email with the rich text editor
  4. Click Enviar Prueba to send a test email to yourself
  5. Click Lanzar Campaña to queue emails to your contact list
Emails are logged in localStorage under cafh_email_logs_v1 for UI display.

​
Next Steps

Now that you have CAFH Platform running:

Learn About Roles

Understand SUPER_ADMIN, ADMIN, EDITOR, MEMBER, and GUEST roles

Explore Multi-Tenancy

See how the platform supports multiple organizations

Understand Data Model

Deep dive into entities, relationships, and storage

Architecture Overview

Learn how all the pieces fit together

​
Troubleshooting

​
Port Already in Use

If port 5173 is occupied, Vite will automatically use the next available port. Check your terminal output for the actual URL.

​
Data Not Persisting

The platform uses localStorage. If you’re in incognito/private mode, data won’t persist between sessions. Use a normal browser window.

​
Cannot Log In

Ensure you’re using the exact credentials: Passwords are case-sensitive.

​
Missing Features

Some features require optional backend services:
  • Email sending: Requires /api/email/queue endpoint
  • Mailrelay sync: Requires Mailrelay API configuration
  • File uploads: Currently uses mock URLs
For questions or issues, review the source code in storage.ts and App.tsx to understand the implementation details.

Build docs developers (and LLMs) love

Get started for freeTalk to us