Documentation Index
Fetch the complete documentation index at: https://mintlify.com/No-Country-simulation/S02-26-Equipo-33-Web-App/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
The Horse Trust frontend is a modern web application built with Next.js 16, utilizing the App Router architecture for optimal performance and developer experience. The platform provides a premium equestrian marketplace with advanced features for buying and selling elite horses.
Tech Stack
Core Framework
- Next.js 16.1.6 - React framework with App Router
- React 19.2.3 - UI library
- TypeScript 5 - Type-safe development
Styling
- Tailwind CSS 4 - Utility-first CSS framework
- @tailwindcss/postcss 4 - PostCSS plugin for Tailwind
- Custom Design System - Equestrian-themed color palette
UI Components
- Lucide React 0.575.0 - Icon library for consistent iconography
Development
{
"scripts": {
"dev": "next dev -p 8030",
"build": "next build",
"start": "next start -p 8030",
"lint": "eslint"
}
}
Project Structure
client/
├── app/ # Next.js App Router
│ ├── actions/ # Server Actions
│ │ ├── auth.ts # Authentication actions
│ │ └── horses.ts # Horse management actions
│ ├── dashboard/ # Dashboard page
│ ├── login/ # Login page
│ ├── marketplace/ # Marketplace pages
│ │ └── [id]/ # Dynamic horse detail page
│ ├── registro/ # Registration page
│ ├── registro-caballo/ # Horse registration
│ ├── utils/ # Utility functions
│ │ └── apiFetch.ts # API fetch wrapper
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Homepage
│ └── globals.css # Global styles
├── component/ # Reusable components
│ ├── GetServerData/ # Server data components
│ ├── home/ # Homepage components
│ ├── layout/ # Layout components
│ └── marketplace/ # Marketplace components
├── types/ # TypeScript type definitions
├── next.config.ts # Next.js configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies
Key Features
Server-Side Rendering (SSR)
The application leverages Next.js 16’s App Router for server-side rendering:
import { cookies } from 'next/headers';
export default async function RootLayout({
children,
}: { children: React.ReactNode }) {
const cookieStore = await cookies();
const isLoggedIn = cookieStore.has('horse_trust_token');
return (
<html lang="en">
<body>
<Header initialIsLoggedIn={isLoggedIn}/>
{children}
<Footer/>
</body>
</html>
);
}
Server Actions
Server Actions provide secure backend communication:
"use server";
import { cookies } from 'next/headers';
export async function loginUser(email: string, password: string) {
try {
const res = await apiFetch('/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password }),
});
const data = await res.json();
const cookieStore = await cookies();
cookieStore.set('horse_trust_token', data.token, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
maxAge: 60 * 60 * 24 * 7,
path: '/',
});
return { success: true, data };
} catch (error: any) {
return { success: false, error: error.message };
}
}
Dynamic Routes
Dynamic routing for horse details:
app/marketplace/[id]/page.tsx → /marketplace/123
Data Fetching
Server-side data fetching with revalidation:
async function getHorses() {
const res = await fetch(`${apiUrl}/horses`, {
next: { revalidate: 60 } // Revalidate every 60 seconds
});
const data = await res.json();
return Array.isArray(data) ? data : data.data;
}
Environment Configuration
Environment Variables
NEXT_PUBLIC_API_URL=https://s02-26-e33-horse-trust-api.vercel.app/api
NODE_ENV=production
API Integration
The frontend communicates with the backend API using a custom apiFetch wrapper:
export async function apiFetch(endpoint: string, options?: RequestInit) {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
return fetch(`${apiUrl}${endpoint}`, options);
}
Image Optimization
Next.js Image component for optimized loading:
import Image from 'next/image';
<Image
src="/img/logo.png"
alt="HorseTrust Logo"
width={80}
height={23.3}
className="object-contain"
priority
/>
Font Loading
Google Fonts loaded via CSS with display swap:
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
Code Splitting
Automatic code splitting through Next.js App Router with client components marked with "use client" directive.
export const metadata: Metadata = {
title: "HorseTrust | Mercado de Caballos de Élite Verificados",
description: "La plataforma líder para la compra y venta de caballos de alto valor.",
};
Development Workflow
Local Development
# Install dependencies
npm install
# Start development server on port 8030
npm run dev
# Build for production
npm run build
# Start production server
npm start
Type Safety
TypeScript interfaces ensure type safety across the application:
export interface ApiResponse {
success: boolean;
message: string;
data: {
team: string;
status: string;
}
}
Authentication Flow
- User submits credentials via login form
- Client-side form calls
loginUser server action
- Server action communicates with backend API
- HTTP-only cookie is set on successful authentication
- User is redirected to dashboard
- Header component reads cookie to display user state
Deployment
The frontend is optimized for deployment on Vercel with automatic:
- Edge runtime optimization
- Static page generation where applicable
- Incremental Static Regeneration (ISR)
- Image optimization via Next.js Image component
