GifsApp - Angular Administrative Dashboard

Welcome to GifsApp, an advanced Angular project designed to showcase a professional and scalable architecture. This application connects to the Giphy API to search and display trending and custom GIFs, while implementing modern Angular concepts and best practices.

---

🌟 Key Features

• Dynamic Pages & API Integration:

  • Dashboard Page: A central hub displaying trending GIFs and quick navigation options.
  • Trending Page: A dedicated page showcasing the most popular GIFs in real-time, fetching data directly from the Giphy API.
  • Search Page: A powerful search interface to find GIFs based on user queries.

• Advanced Data Handling & Architecture:

  • Data Mapping (DTO Pattern): Implementation of a GifMapper to intercept, clean, and transform complex API responses into lightweight, frontend-friendly interfaces.
  • HTTP Client Integration: Efficient HTTP requests configured with the modern provideHttpClient(withFetch()) API.

• Modern Angular Concepts (v17+):

  • State Management with Signals: Efficient and fine-grained reactive state handling using signal() for data and loading states.
  • Modern Component Communication: Utilizing the new Signal-based input.required() API for strict and reactive data flow between Parent and Child components.
  • Control Flow: Implementation of the optimized @for syntax for rendering lists.
  • Lazy Loading: Load modules and standalone components only when needed, improving performance.

• UI & Configuration:

  • Tailwind CSS Integration: Utility-first CSS framework for rapid and responsive UI development.
  • Environment Variables: Securely manage API keys and backend URLs.

---

🛠️ Technologies Used

• Angular (v21.1.0)
• TypeScript (v5.9.2)
• Tailwind CSS (v4.1.18)
• Giphy API

---

⚙️ Setup & Execution

Prerequisites

Ensure you have the following installed:

• Node.js and npm (or yarn).

• Angular CLI: Install globally using:

  npm install -g @angular/cli

Installation Steps

1. Clone the repository:

   git clone https://github.com/ClaudiaTrigo/gifs-app.git
   cd gifs-app

2. Install dependencies:

   npm install

3. Run the development server:

   npm start

   The app will be available at http://localhost:4200/.

---

📂 Project Structure

src/
├── app/
│   ├── gifs/
│   │   ├── components/
│   │   │   ├── gif-list/
│   │   │   ├── gif-list-item/
│   │   │   └── gifs-side-menu/
│   │   ├── interfaces/         # Strong typing for API responses and internal models
│   │   ├── mapper/             # Data transformation logic (GiphyItem -> Gif)
│   │   ├── pages/
│   │   │   ├── dashboard-page/
│   │   │   ├── search-page/
│   │   │   └── trending-page/
│   │   └── services/           # Centralized HTTP requests and State management
│   ├── shared/
│   └── auth/
├── environments/               # API Keys and endpoints configuration
├── index.html
├── main.ts
└── styles.css

---

✍️ Author & Contact

Project developed by Claudia Trigo.

If you have any suggestions or want to chat about Angular, feel free to reach out!

---

This project is part of my continuous learning journey in the Angular ecosystem.