Skip to main content

​
Get Started in 5 Minutes

This quickstart guide will help you get GIMA running on your local machine quickly. By the end, you’ll have the application running and be ready to explore its features.
Before starting, ensure you have Node.js 20 or higher installed on your system. Check with node --version.

​
Installation and Setup

Follow these steps to get GIMA running:
1

Clone the Repository

First, clone the GIMA project repository to your local machine:
git clone https://github.com/GonzalezCesar/gima-project.git
cd gima-project
2

Install Dependencies

Install all required dependencies using your preferred package manager:
npm install
This will install:
  • Next.js 16.1.1 and React 19.2.3
  • TypeScript and development tools
  • UI libraries (Tailwind CSS, Lucide icons)
  • All other dependencies defined in package.json
3

Start the Development Server

Launch the development server:
npm run dev
The server will start on http://localhost:3000 by default.
The development server includes hot module replacement - your changes will be reflected instantly without refreshing the browser.
4

Access GIMA

Open your browser and navigate to:
http://localhost:3000
You’ll be automatically redirected to the login page at /auth/login.

​
First Login

When you first access GIMA, you’ll see the login screen:
1

Enter Credentials

The login page (src/app/auth/login/page.tsx) accepts any email and password for development purposes.Test Credentials:
  • Username: Any email format (e.g., [email protected])
  • Password: Any password (e.g., Pedro123)
This is a development setup with simulated authentication. In production, you’ll need to implement proper authentication with a backend service.
2

Access the Dashboard

After logging in, you’ll be redirected to the main dashboard at /dashboard.The dashboard displays:
  • Key Metrics: Total assets, maintenance status, budget execution
  • Asset Availability: Visual charts showing asset performance over time
  • Quick Actions: Easy access to common tasks

​
Exploring the Interface

Once logged in, you’ll have access to GIMA’s main features: The application uses the MainLayout component (src/components/layout/MainLayout.tsx) with navigation to:
  • Dashboard (/dashboard): Main overview with statistics and charts
  • Maintenance (/dashboard/mantenimiento): Work orders and maintenance scheduling
  • Asset Categories (/categorias-activos): Manage asset classification
  • Reports (/reportes): Generate and view reports
  • Configuration (/configuracion): System settings including:
    • User management
    • AI settings
    • Language preferences
    • Notifications
    • Security settings
    • Locations
    • Parts and spares
  • Assistance (/asistencia): Help and support resources

​
Dashboard Overview

The dashboard (src/app/dashboard/page.tsx) features: 
<StatCard title="Total activos" value="12345" trend={12} trendLabel="este mes" />
<StatCard title="En mantenimiento" value="8" />
<StatCard title="Presupuesto ejecutado" value="100$" highlighted={true} />
These are sample values for demonstration. In production, these will be connected to your actual asset data.

​
Understanding the Project Structure

Here’s what you’ll find in the codebase: 
gima-project/
├── src/
│   ├── app/                  # Next.js pages and routes
│   │   ├── auth/login/       # Authentication pages
│   │   ├── dashboard/        # Dashboard and analytics
│   │   ├── configuracion/    # Configuration pages
│   │   └── layout.tsx        # Root layout with MainLayout
│   ├── components/
│   │   ├── layout/           # MainLayout, DashboardHeader
│   │   ├── dashboard/        # StatCard, ChartPlaceholder
│   │   ├── configuracion/    # Configuration components
│   │   └── ui/               # Reusable UI components
│   ├── types/                # TypeScript definitions
│   ├── data/                 # Static data (categories.ts)
│   ├── services/             # API services
│   └── lib/                  # Utilities
├── public/
│   ├── logo-gima.png        # Application logo
│   └── fonts/               # Custom fonts (Microgramma, Archivo)
└── Configuration files

​
Next Steps

Now that you have GIMA running, here’s what to do next:

Asset Management

Learn how to add, track, and manage assets

Maintenance Scheduling

Set up preventive maintenance and work orders

Configuration

Customize GIMA for your organization

AI Features

Explore AI-powered diagnostics and insights

​
Development Commands

Here are the available npm scripts: 
npm run dev
# Start development server with hot reload

​
Common Issues

If you encounter problems:
If port 3000 is occupied, you can specify a different port:
PORT=3001 npm run dev
Or kill the process using port 3000:
# On Linux/Mac
lsof -ti:3000 | xargs kill -9

# On Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F
If you see module resolution errors:
  1. Delete node_modules and lock files: 
    rm -rf node_modules package-lock.json pnpm-lock.yaml
  2. Clear npm cache: 
    npm cache clean --force
  3. Reinstall dependencies: 
    npm install
If TypeScript compilation fails:
  1. Ensure you’re using TypeScript 5 or higher: 
    npx tsc --version
  2. Delete the .next directory: 
    rm -rf .next
  3. Restart the development server: 
    npm run dev

​
Getting Help

Need assistance?

Build docs developers (and LLMs) love

Get started for freeTalk to us