Skip to main content

​
Quickstart

This guide will help you set up the Seguros NAG project on your local machine and start developing.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (LTS version recommended)
  • npm (comes with Node.js)
  • Git for version control
Verify your installation: 
node -v
npm -v
git --version

​
Getting Started

1

Clone the repository

Clone the Seguros NAG repository from GitHub:
git clone https://github.com/p0nkx/seguros-web.git
2

Navigate to project directory

Move into the project folder:
cd seguros-web
3

Install dependencies

Install all required packages using npm:
npm install
This command installs all dependencies defined in package.json, including:
  • Next.js 16.1.6
  • React 19.2.3
  • TypeScript 5
  • Tailwind CSS 4
  • Nodemailer for email functionality
  • Testing libraries (Vitest, React Testing Library)
4

Configure environment variables

Create a .env.local file in the root directory for email configuration:
EMAIL_USER=[email protected]
EMAIL_PASS=your-app-password
The email API route at app/api/enviar-email/route.ts uses these credentials to send quote submissions via Gmail.
5

Start the development server

Run the development server:
npm run dev
The application will be available at:
http://localhost:3000
The development server supports hot module replacement - changes will be reflected automatically when you save files.

​
Available Scripts

The project includes several npm scripts defined in package.json: 
npm run dev

​
Script Details

  • dev - Starts Next.js development server with hot reload
  • build - Creates an optimized production build
  • start - Runs the production server (requires build first)
  • lint - Runs ESLint to check code quality
  • test - Executes Vitest test suite

​
Project Structure

Understanding the key directories will help you navigate the codebase:

​
app/ Directory

The main application code using Next.js App Router: 
app/
├── api/
│   └── enviar-email/
│       └── route.ts          # Email API endpoint
├── components/
│   ├── CotizacionForm.tsx    # Quote form component
│   ├── Footer.tsx            # Site footer
│   ├── Header.tsx            # Navigation header
│   ├── ScrollToTop.tsx       # Scroll to top button
│   └── WhatsappButton.tsx    # WhatsApp contact button
├── cotizacion/
│   └── page.tsx              # Quote request page
├── login/
│   └── page.tsx              # Login page
├── globals.css               # Global styles and Tailwind directives
├── layout.tsx                # Root layout with metadata
└── page.tsx                  # Homepage

​
lib/ Directory

Shared utilities and configuration: 
lib/
├── segurosConfig.ts          # Insurance types configuration
└── validators.ts             # Form validation logic
The segurosConfig.ts file defines all insurance types (automotor, vida, hogar, etc.) with their respective form fields, validation rules, and options.

​
public/ Directory

Static assets served directly: 
public/
├── banner.jpg                # Hero banner image
├── hero-mobile.jpg           # Mobile hero image
├── hero.png                  # Desktop hero image
├── logo-blanco-cuadrado.png  # White square logo
├── logo-blanco.png           # White logo
├── logo-oscuro-cuadrado.png  # Dark square logo
└── favicon files             # Site icons

​
Configuration Files

  • next.config.ts - Next.js configuration
  • tsconfig.json - TypeScript compiler options
  • tailwind.config.js - Tailwind CSS customization
  • vitest.config.ts - Vitest test runner configuration
  • eslint.config.mjs - ESLint rules

​
Key Features to Explore

​
Quote Form System

The quote form system is powered by the configuration in lib/segurosConfig.ts:42-150. Each insurance type has:
  • Custom field definitions
  • Type-specific validation (min/max values, required fields)
  • Dropdown options for selections
  • Dynamic rendering based on insurance type

​
Email Templates

Email submissions are handled by the API route at app/api/enviar-email/route.ts:4-123. The route:
  • Accepts POST requests with quote data
  • Generates branded HTML emails with gradient styling
  • Includes WhatsApp contact links with Argentina country code
  • Uses Nodemailer with Gmail SMTP

​
Layout and Metadata

The root layout at app/layout.tsx:58-76 configures:
  • Geist font families
  • Open Graph metadata for social sharing
  • Favicon and Apple touch icons
  • Vercel Analytics integration
  • Global components (Header, Footer, WhatsApp button)

​
Next Steps

Now that you have the project running:
  1. Explore the homepage at app/page.tsx
  2. Test the quote form at /cotizacion
  3. Review the insurance configuration in lib/segurosConfig.ts
  4. Check out the reusable components in app/components/
Remember to configure your .env.local file with valid Gmail credentials to test the email functionality.

Build docs developers (and LLMs) love

Get started for freeTalk to us