Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/giangartun/Tis-GOAT-Frontend/llms.txt

Use this file to discover all available pages before exploring further.

By the end of this guide you will have a fully live GOAT Portfolio: a verified account, at least one project on record, and a public URL ready to share. The whole process takes about five minutes if your backend is already running.
Before you begin, make sure the VITE_API_URL environment variable in your .env file points to your running backend. The frontend’s Axios client and Vite dev-server proxy both depend on this value. See Configuration for details.
1

Register an account

Create a new user account by sending a POST request to /api/usuario/pre-registro. The backend will create the account in a pending verification state and send a confirmation email.Required fields
FieldTypeRules
nombrestringLetters only, no numbers or special characters
apellido_paternostringLetters only
apellido_maternostringLetters only
emailstringValid email address, must be unique
contrasenastringMinimum 6 characters
contrasena_confirmationstringMust match contrasena exactly
curl -X POST https://your-backend.example.com/api/usuario/pre-registro \
  -H "Content-Type: application/json" \
  -d '{
    "nombre": "Ada",
    "apellido_paterno": "Lovelace",
    "apellido_materno": "Byron",
    "email": "ada@example.com",
    "contrasena": "securepass123",
    "contrasena_confirmation": "securepass123"
  }'
On success you will receive a 201 Created response confirming the account was created and the verification email was dispatched.
Name fields (nombre, apellido_paterno, apellido_materno) accept letters only — digits and special characters are rejected with a validation error. Passwords must be at least 6 characters long.
2

Verify your email

Check your inbox for the verification email sent in Step 1. Click the link inside; it will call:
GET /api/usuario/verificar-email/:token
The :token is a unique, time-limited string embedded in the link by the backend. On the frontend, this route is handled by the <VerificarEmail /> page component (/verificar-email/:token).Once the token is validated server-side, your account status changes to active and the app redirects you to /login so you can sign in for the first time.
If you do not receive the email within a few minutes, check your spam folder. Verification links expire after a set period — if yours has expired, contact your platform administrator to resend it.
3

Log in

Authenticate with your email and password to receive a JWT Bearer token.
curl -X POST https://your-backend.example.com/api/usuario/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "ada@example.com",
    "contrasena": "securepass123"
  }'
A successful response returns (among other fields) a token and your id_portafolio:
{
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
  "id_portafolio": 42,
  "user": {
    "id": 7,
    "nombre": "Ada",
    "email": "ada@example.com"
  }
}
Store both values — the frontend Axios interceptor reads token from localStorage (localStorage.setItem("token", response.token)) and attaches it automatically to every subsequent request as:
Authorization: Bearer <token>
You will need id_portafolio in the next step.
4

Add your first project

With your token in hand, create a project linked to your portfolio.Required fields
FieldTypeDescription
id_portafoliointegerYour portfolio ID from Step 3
nombrestringProject display name
descripcionstringShort description shown on your portfolio
fecha_inistringStart date in YYYY-MM-DD format
tecnologias[]array (optional)Technology tags, e.g. ["React", "TypeScript"]
curl -X POST https://your-backend.example.com/api/proyecto/gestion-proyectos \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..." \
  -d '{
    "id_portafolio": 42,
    "nombre": "GOAT Portfolio",
    "descripcion": "A SaaS platform for building interactive developer portfolios.",
    "fecha_ini": "2024-01-15",
    "tecnologias": ["React", "TypeScript", "Tailwind CSS", "Vite"]
  }'
The project will appear immediately on your portfolio’s My Projects page (/mis-proyectos) once the frontend re-fetches data.
You can add as many projects as you like — there is no limit. Each project’s tecnologias array renders as badge chips on your public portfolio page, so keep tag names short and consistent.
5

Choose a template and go live

Select the visual layout for your public portfolio by patching the id_plantilla field. There are three templates available:
id_plantillaTemplate nameStyle
1BentoGrid-based, magazine-style layout
2SidebarTwo-column layout with persistent side navigation
3EditorialClean, content-first vertical layout
curl -X PATCH https://your-backend.example.com/api/portafolio/actualizar-plantilla \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..." \
  -d '{
    "id_plantilla": 1
  }'
Your portfolio is now live. Visitors can view it at the public profile endpoint — share the link from your dashboard or from the /perfil-publico/:id route, where :id is your portfolio ID.
You can switch templates at any time from the Customise Portfolio page (/personalizacion-portafolio) without losing any of your content. Changes take effect immediately on your public URL.

​
What’s next?

Now that your portfolio is live, explore these topics to get the most out of GOAT Portfolio:

Add skills & links

Navigate to /habilidades and /enlaces to enrich your portfolio with technology skills and social/professional links.

Configure privacy

Use the Privacy page (/privacidad) to control exactly who can view your portfolio — public, link-only, or private.

Authentication deep-dive

Learn about password reset, token expiry handling, and protecting client-side routes with route guards.

API reference

Full reference for every endpoint: request/response shapes, validation rules, and HTTP status codes.

Build docs developers (and LLMs) love

Get started for freeTalk to us