Build complete course landing pages dynamically from JSON — no hardcoded UI.
Angular Course Engine is a frontend system that renders full course landing pages dynamically from structured JSON configurations.
Instead of building static pages, the entire UI is driven by data, allowing instant reconfiguration without modifying component logic.
- Removes hardcoded UI by rendering layouts from JSON
- Allows adding new courses without modifying components
- Scales from a single landing page to multi-course platforms
- Data-driven rendering architecture
- Modular standalone Angular components
- Reactive state management with Angular Signals
- Centralized data orchestration via
CourseCatalogService - Strict separation between content and presentation
Course configurations are loaded from JSON files, stored in reactive signals, and rendered dynamically through reusable UI components.
- Designing a reusable, data-driven UI architecture
- Keeping components strictly presentation-focused
- Managing application state using Angular Signals
- Preparing the system for future backend integration
- Angular (Standalone + Signals)
- TypeScript
- Bootstrap
- CSS Variables (custom theming system)
src/ ├── app/ │ ├── components/ │ ├── pages/ │ ├── services/ │ └── models/ ├── assets/ │ ├── course-frontend-angular.json │ ├── course-backend-symfony-api.json │ └── course-fullstack-angular-symfony.json
- Replaces static pages with a configurable rendering system
- Reduces development time for new landing pages to near zero
- Demonstrates scalable, production-oriented frontend architecture
- Course platforms
- Multi-product landing systems
- Content-driven SaaS frontends
- Headless CMS integration
- Admin panel for content management
- Multi-language support (i18n)
- Authentication & personalization
Gastón Omar Lino Levy
GitHub Profile