Marmita App

Key Highlights

• Built with Angular 19 as a single-page application.
• Uses RxJS/EventEmitter-driven state updates for shared food list and packed meal flows.
• Optimized SPA routing with nested routes, guarded pages, redirects, and a 404 fallback.
• Demonstrates a delivery-oriented flow with packed meal selection, ingredient management, and route-based navigation.

1. The Problem

Food delivery applications need to handle several connected states at the same time: available meals, selected packed meals, ingredients, order preparation, and delivery-related navigation. As the application grows, keeping these states predictable across different screens becomes a core challenge.

This project focuses on that challenge through a marmita delivery interface, where users can browse packed meal options, inspect meal details, add ingredients to a food list, and move through a routed Angular experience.

2. The Solution

Marmita App is a robust Angular web application designed to demonstrate mastery of the Angular ecosystem and reactive programming concepts.

The application separates responsibilities across components, services, models, routing, and guards. Shared services manage food and packed meal data, while Angular Router handles the main navigation flow with nested routes for packed meal details and protected access for the food list page.

3. Technologies

• Angular 19
• TypeScript
• RxJS
• Angular Router
• Angular Forms
• Bootstrap 5
• Karma and Jasmine for testing

4. How to Run

Install the project dependencies:

npm install

Start the local development server:

npm start

Open the application in your browser:

http://localhost:4200/

Build the project for production:

npm run build

Run the test suite:

npm test