Quick Start Guide

This guide will help you quickly get started with VIP2CARS, walking you through user registration, dashboard access, and creating your first client and vehicle records.

This guide assumes you’ve already completed the Installation Guide and have the application running at http://127.0.0.1:8000.

Prerequisites

Before starting, ensure:

Both development servers are running:
- PHP server: php artisan serve
- Vite dev server: npm run dev
Your browser is pointed to: http://127.0.0.1:8000
Database migrations have been executed successfully

Getting Started

VIP2CARS uses authentication to protect client and vehicle data. You’ll need to create an account first.

Navigate to http://127.0.0.1:8000/register

Fill in the registration form:

Name: Your full name
Email: A valid email address
Password: At least 8 characters
Confirm Password: Match the password above

Click the Register button

If you ran the migrations with seeders (php artisan migrate --seed), sample client and vehicle data will already be available after you log in.

After successful registration, you’ll be automatically logged in and redirected to the dashboard.

Access the Dashboard

The dashboard is your central hub for managing clients and vehicles.

Dashboard URL: http://127.0.0.1:8000/dashboard

From the dashboard, you can:

View system overview

Navigate to client management

Navigate to vehicle management

Access documentation

Manage your account settings

The sidebar menu provides quick navigation to all major sections:

Dashboard - Overview page
Clientes - Client management
Vehículos - Vehicle management
Documentation - Technical documentation

Navigate the Interface

VIP2CARS uses a modern sidebar layout with the following components:

Sidebar Navigation:

Logo and application name at the top

Main navigation links (Dashboard, Clientes, Vehículos)

Documentation link

User menu at the bottom (Settings, Logout)

Main Content Area:

Page title and breadcrumbs

Action buttons (Create, Edit, Delete)

Data tables with search and pagination

Forms for data entry

User Menu:

Profile settings

Password management

Two-factor authentication

Theme preferences (Dark/Light mode)

Logout

Create Your First Client

Let’s add a new client to the system.

Click Clientes in the sidebar navigation

Click the Crear Cliente (Create Client) button

Fill in the client form:

Nombres: Juan Carlos
Apellidos: García Rodríguez
Nro. Documento: 12345678
Correo: [email protected]
Teléfono: +51 987 654 321

Click Guardar (Save) to create the client

Unique Constraints:

Nro. Documento (Document Number) must be unique across all clients
Correo (Email) must be unique across all clients

Attempting to create a client with duplicate values will result in a validation error.

Field Validation Rules:

FieldTypeRulesMax LengthNombresStringRequired255ApellidosStringRequired255Nro. DocumentoStringRequired, Unique-CorreoEmailRequired, Unique, Valid Email-TeléfonoStringRequired20

After saving, you’ll be redirected to the clients list where your new client appears.

View Client Details

From the clients list:

Locate your newly created client

Click the Ver (View) or Editar (Edit) button

View or modify client information

See associated vehicles (if any)

Create a Vehicle Record

Now let’s add a vehicle for your client.

Click Vehículos in the sidebar

Click Crear Vehículo (Create Vehicle)

Fill in the vehicle form:

Placa: ABC-123
Marca: Toyota
Modelo: Corolla
Año de Fabricación: 2022
Cliente: Juan Carlos García Rodríguez

Select the client from the dropdown

Click Guardar (Save)

Client Selection: The client dropdown shows all registered clients in the system. You must associate each vehicle with an existing client.

Vehicle Field Validation:

FieldTypeRulesPlacaStringRequired, UniqueMarcaStringRequiredModeloStringRequiredAño de FabricaciónIntegerRequired, Valid YearClienteForeign KeyRequired, Must Exist

The Placa (license plate) must be unique. No two vehicles can have the same license plate number.

View Vehicle and Client Relationship

VIP2CARS maintains relationships between clients and vehicles:

From Vehicle View:

Each vehicle shows its associated client

Click the client name to view client details

From Client View:

Client detail pages show all associated vehicles

View the complete history of vehicles owned by a client

Database Relationship:

public function vehiculos()
{
    return $this->hasMany(Vehiculo::class, 'id_cliente', 'id_cliente');
}

public function cliente()
{
    return $this->belongsTo(Cliente::class, 'id_cliente', 'id_cliente');
}

Edit Records

To modify existing records:

Edit a Client:

Go to Clientes list

Click Editar (Edit) on the client row

Modify the fields

Click Actualizar (Update)

Edit a Vehicle:

Go to Vehículos list

Click Editar (Edit) on the vehicle row

Modify the fields

Click Actualizar (Update)

When editing, unique constraint validation is adjusted to allow the current record’s values while preventing duplicates with other records.

Delete Records

To remove records from the system:

Delete a Vehicle:

Navigate to the vehicles list

Click Eliminar (Delete) on the vehicle row

Confirm the deletion

The vehicle is permanently removed

Delete a Client:

Navigate to the clients list

Click Eliminar (Delete) on the client row

Confirm the deletion

Cascade Delete: When you delete a client, ALL associated vehicles are automatically deleted. This action cannot be undone.Database Foreign Key:

FOREIGN KEY (id_cliente) 
REFERENCES clientes(id_cliente) 
ON DELETE CASCADE

Common Workflows

Workflow 1: Register New Customer with Vehicle

Create Client Record
- Navigate to Clientes → Crear Cliente
- Enter customer details
- Save the client
Create Vehicle Record
- Navigate to Vehículos → Crear Vehículo
- Enter vehicle details
- Select the newly created client
- Save the vehicle
Verify Relationship
- View the client record
- Confirm the vehicle appears in the client’s vehicle list

Workflow 2: Update Client Information

Locate Client
- Go to Clientes list
- Search for the client by name or document number
Edit Details
- Click Editar
- Update the necessary fields
- Click Actualizar
Verify Changes
- Return to client list
- Confirm updated information is displayed

Workflow 3: Transfer Vehicle to Another Client

Edit Vehicle
- Navigate to Vehículos
- Click Editar on the vehicle to transfer
Change Client Association
- Select a different client from the dropdown
- Save the changes
Verify Transfer
- Check the old client’s record (vehicle should be gone)
- Check the new client’s record (vehicle should appear)

Authentication Features

Login:

URL: http://127.0.0.1:8000/login
Enter your email and password
Optional: Check “Remember Me” for persistent login

Logout:

Click your name in the sidebar
Select Logout
You’ll be redirected to the homepage

Password Reset

If you forget your password:

Go to the login page
Click Forgot Password?
Enter your email address
Check your email for reset instructions
Follow the link to set a new password

Password reset requires proper mail configuration in your .env file. For development, check storage/logs/laravel.log if MAIL_MAILER=log.

Account Settings

Access account settings from the user menu: Profile Settings:

Update your name and email
View account information

Password Management:

Change your password
Requires current password for verification

Two-Factor Authentication:

Enable 2FA for enhanced security
Scan QR code with authenticator app
Save recovery codes

Appearance:

Toggle between light and dark modes
Preferences are saved per user

Tips for Efficient Use

Keyboard Navigation:

Use Tab to navigate between form fields
Press Enter to submit forms
Use browser back button or breadcrumbs to navigate

Search and Filter: While not explicitly shown in controllers, you can use browser’s find function (Ctrl+F / Cmd+F) to search within tables on the page.

Data Validation: The system validates all input before saving. If you see an error message, check:

Required fields are filled
Email format is valid
Document number and email are unique
Numeric fields contain valid numbers

API Routes

VIP2CARS uses Laravel resource routes for RESTful operations:

Client Routes

Method	URI	Action	Route Name
GET	/clientes	List all clients	clientes.index
GET	/clientes/create	Show create form	clientes.create
POST	/clientes	Store new client	clientes.store
GET	/clientes/	Show client	clientes.show
GET	/clientes//edit	Show edit form	clientes.edit
PUT/PATCH	/clientes/	Update client	clientes.update
DELETE	/clientes/	Delete client	clientes.destroy

Vehicle Routes

Method	URI	Action	Route Name
GET	/vehiculos	List all vehicles	vehiculos.index
GET	/vehiculos/create	Show create form	vehiculos.create
POST	/vehiculos	Store new vehicle	vehiculos.store
GET	/vehiculos/	Show vehicle	vehiculos.show
GET	/vehiculos//edit	Show edit form	vehiculos.edit
PUT/PATCH	/vehiculos/	Update vehicle	vehiculos.update
DELETE	/vehiculos/	Delete vehicle	vehiculos.destroy

All client and vehicle routes are protected by the auth and verified middleware, requiring authenticated users.

Understanding the Tech Stack

Livewire Components

VIP2CARS uses Livewire for reactive components without writing JavaScript:

Real-time Validation: Form fields validate as you type
Dynamic Updates: Pages update without full page refresh
Component Communication: Seamless data flow between components

Flux UI Components

The interface uses Flux UI components for consistent design:

Buttons: Primary, secondary, danger actions
Forms: Input fields, selects, textareas
Tables: Data display with sorting and actions
Modals: Confirmation dialogs and forms
Navigation: Sidebar, breadcrumbs, menus

Tailwind CSS

Styling is powered by Tailwind CSS v4:

Utility-First: Rapid UI development
Responsive Design: Mobile-first approach
Dark Mode: Built-in theme switching
Custom Components: Reusable design patterns

Troubleshooting Common Issues

Issue: Can’t Access Dashboard

Symptom: Redirected to login when accessing /dashboard Solution: You must be logged in. Register a new account or log in with existing credentials.

Issue: Validation Errors on Form Submit

Symptom: Form shows error messages Solution: Check that:

All required fields are filled
Email format is correct ([email protected])
Document number and email are not already used by another client
Year is a valid 4-digit number

Symptom: No clients appear in vehicle creation form Solution: Create at least one client first. Vehicles must be associated with existing clients.

Issue: Changes Not Appearing

Symptom: Updates don’t show immediately Solution:

Refresh the page (F5)
Clear browser cache
Check that Vite dev server is running

npm run dev

Next Steps

Now that you’re familiar with the basics:

Explore Advanced Features:
- Set up two-factor authentication
- Customize your profile
- Export technical documentation
Learn More About Laravel:
Customize VIP2CARS:
- Add custom fields to models
- Create additional reports
- Implement search functionality
- Add PDF export features

Access the built-in technical documentation by clicking Documentation in the sidebar menu for detailed information about the system architecture.

Getting Help

If you encounter issues:

Check Laravel logs: storage/logs/laravel.log
Review validation error messages
Ensure all services are running
Verify database connection

For development questions, consult the Laravel Documentation which covers all framework features used in VIP2CARS.

Get Started

Core Features

User Guide

Deployment

Quick Start Guide

Quick Start Guide

Prerequisites

Getting Started

Common Workflows

Workflow 1: Register New Customer with Vehicle

Workflow 2: Update Client Information

Workflow 3: Transfer Vehicle to Another Client

Authentication Features

Password Reset

Account Settings

Tips for Efficient Use

API Routes

Client Routes

Vehicle Routes

Understanding the Tech Stack

Livewire Components

Flux UI Components

Tailwind CSS

Troubleshooting Common Issues

Issue: Can’t Access Dashboard

Issue: Validation Errors on Form Submit

Issue: Changes Not Appearing

Next Steps

Getting Help

Build docs developers (and LLMs) love

Get Started

Core Features

User Guide

Deployment

​Quick Start Guide

​Prerequisites

​Getting Started

​Common Workflows

​Workflow 1: Register New Customer with Vehicle

​Workflow 2: Update Client Information

​Workflow 3: Transfer Vehicle to Another Client

​Authentication Features

​Login and Logout

​Password Reset

​Account Settings

​Tips for Efficient Use

​API Routes

​Client Routes

​Vehicle Routes

​Understanding the Tech Stack

​Livewire Components

​Flux UI Components

​Tailwind CSS

​Troubleshooting Common Issues

​Issue: Can’t Access Dashboard

​Issue: Validation Errors on Form Submit

​Issue: Client Dropdown Empty in Vehicle Form

​Issue: Changes Not Appearing

​Next Steps

​Getting Help

Build docs developers (and LLMs) love

Quick Start Guide

Prerequisites

Getting Started

Common Workflows

Workflow 1: Register New Customer with Vehicle

Workflow 2: Update Client Information

Workflow 3: Transfer Vehicle to Another Client

Authentication Features

Login and Logout

Password Reset

Account Settings

Tips for Efficient Use

API Routes

Client Routes

Vehicle Routes

Understanding the Tech Stack

Livewire Components

Flux UI Components

Tailwind CSS

Troubleshooting Common Issues

Issue: Can’t Access Dashboard

Issue: Validation Errors on Form Submit

Issue: Client Dropdown Empty in Vehicle Form

Issue: Changes Not Appearing

Next Steps

Getting Help