loader image
Drag
Book Appointment
Book Appointment
Contact Info

Angular Project

Home > Portfolios > High School > Angular Project

Olense Feesten – Angular Project

Overview:
The Olense Feesten project is a comprehensive Angular application developed as part of the Angular course during the final year of the Applied Computer Sciences program (specialization in app development) at Thomas More Geel. This application serves as a festival platform offering users detailed event information, ticket purchases, practical guidelines, sponsor requests, and more. The project is integrated with an Azure-powered backend for efficient data management, media storage, and seamless API connectivity.

Features Overview

  1. Core Functionalities:
    • Festival schedule and lineup details.
    • Practical event information (weather, maps, facilities).
    • Secure ticket purchasing with Stripe integration.
    • Sponsor and contact request forms via Postmark API.
  2. Extra Functionalities Added:
    • Mailchimp Integration: Newsletter sign-ups linked directly to Mailchimp audiences.
    • OpenWeatherMap Integration: Dynamic weather updates with actionable advice (e.g., “bring boots”).
    • Enhanced Security: Secure admin portal with additional DTO layers for backend security.
    • Interactive Map: A Leaflet-based map with festival location, parking spots, and restricted zones.
    • Countdown Timer: Displays the time remaining until the festival starts.
    • PDF Lineup Download: Export daily schedules into downloadable PDFs.
    • Chatbot Integration: A custom-trained LLM chatbot for answering festival-related queries.
    • Expanded Information Models: Detailed sponsor, food stand, camping, and FAQ data accessible via admin panel and website.

Technological Stack

Frontend:

  • Developed using Angular.
  • Hosted on Azure App Service.
  • Optimized routing, responsive design, and seamless interaction.

Backend:

  • API created with .NET, deployed on Azure Web App.
  • Azure MySQL Database for storing user, schedule, and ticket data.
  • Azure Blob Storage for hosting media files like images and videos.

APIs & Tools:

  • Auth0 for secure authentication and user management.
  • Stripe for ticket payment processing.
  • Mailchimp for email list management.
  • OpenWeatherMap API for real-time weather data.
  • Postmark API for secure SMTP-based messaging.

Deployment Details

Azure Deployment Scheme:

  1. Frontend: Angular app hosted as a static web app on Azure App Service.
  2. Backend: Deployed API handles all requests and data interactions.
  3. Database: MySQL database hosted on Azure for reliable and scalable data storage.
  4. Blob Storage: Stores media assets accessible via public URLs for optimal performance.

Production URL:

Olense Feesten Live

Development Guide

  1. Setup Instructions:
    Clone the repository:

    git clone https://github.com/itfactory-tm/2024-AngularChallengeFront-03.git
cd festival  
npm install

    Start the development server:

    ng serve or npm start

    Configure environment variables in src/environments/environment.ts for local testing.

  2. Backend API:
    Ensure the backend API is operational and test it using Postman or similar tools. Refer to Backend Documentation.

How It Works

  1. User Interaction:
    • Users explore festival details and purchase tickets through an intuitive Angular-based interface.
    • Secure login via Auth0 ensures user data integrity.
  2. API Communication:
    • HTTP requests handle data retrieval, ticket transactions, and practical info updates.
    • API integrates with the database and blob storage for real-time data and media delivery.
  3. Ticketing & Payments:
    • Users purchase tickets securely via Stripe.
    • Confirmation or failure pages provide instant feedback.
  4. Security:
    • Auth0 manages authentication and secure routing.
    • DTOs ensure sensitive data is handled safely.

Conclusion

The Olense Feesten project demonstrates the seamless integration of Angular and Azure to build a feature-rich, scalable festival platform. Its combination of user-focused features and robust backend services exemplifies modern application development standards, showcasing advanced functionalities beyond course requirements.

Video Project

 

en_GB
nl_BE en_GB