Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Sufianeh7/AmigoInvisible/llms.txt

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

The Amigo Invisible frontend is an Angular 22 single-page application (SPA) that provides the complete user interface for organising Secret Santa draws. It covers two main flows: a group-creation form where organisers enter participant names, emails, and optional exclusions, and a review page where the organiser can inspect the final list and trigger the draw. The app communicates with the Node.js backend over HTTP via a single injectable service and requires no user registration.

​
Directory Structure

The source tree under src/app/ is kept intentionally small — two feature components, one service, and the top-level configuration files: 
Angular/src/app/
├── componentes/
│   ├── grupo/
│   │   ├── grupo.ts          # Grupo component (group creation form)
│   │   └── grupo.html        # Grupo template
│   └── sorteo/
│       ├── sorteo.ts         # Sorteo component (review & launch)
│       ├── sorteo.html       # Sorteo template
│       └── sorteo.scss       # Sorteo styles
├── servicios/
│   └── grupo.ts              # GrupoService — all HTTP calls
├── app.routes.ts             # Route definitions
├── app.config.ts             # ApplicationConfig (providers)
├── app.ts                    # Root App component
└── app.html                  # Root template (router outlet)

​
Key Dependencies

Angular 22

Core framework — @angular/core, @angular/common, @angular/platform-browser, and @angular/compiler at ^22.0.0.

@angular/forms

Provides FormsModule and ngModel for two-way data binding on all form inputs inside the Grupo component.

@angular/router

Enables client-side navigation between the group-creation page (/) and the review page (/sorteo/:adminToken).

RxJS ~7.8

Used by GrupoService to return Observable streams from every HttpClient call.

Tailwind CSS ^3.4 (dev)

Utility-first CSS framework applied directly in templates. Configured in tailwind.config.js to scan all src/**/*.{html,ts} files.

Vitest ^4.0 (dev)

Test runner invoked by ng test. Listed alongside jsdom to provide a browser-like environment for unit tests.

​
Development Setup

npm install
1

Clone the repository

Clone the Amigo Invisible repository and navigate to the Angular project directory.
cd AmigoInvisible/Angular
2

Install dependencies

Install all npm dependencies declared in package.json.
npm install
3

Start the development server

Compile the app in watch mode and serve it locally.
npm start
The Angular CLI will print the local URL (default http://localhost:4200) once compilation succeeds.

​
Build

Run the production build to compile the app into the dist/ directory: 
npm run build
# Alias for: ng build
# Output written to dist/
The build output is what gets deployed to Vercel. A vercel.json at the project root rewrites all incoming paths to /index.html so that Angular’s client-side router handles navigation.

​
Testing

Unit tests are executed with Vitest through the Angular CLI test command: 
npm test
# Alias for: ng test
Vitest runs in a jsdom environment, so DOM-dependent Angular code can be tested without a real browser.
The Angular app targets the production backend at https://amigo-invisible-node-87yz.vercel.app/api/sorteos by default — this URL is hard-coded in GrupoService. For local development you should change apiUrl in src/app/servicios/grupo.ts to http://localhost:3000/api/sorteos so requests are routed to your locally running Node server instead.

Build docs developers (and LLMs) love

Get started for freeTalk to us