loader image
Drag
Boek Afspraak
Boek Afspraak
Contact Info

Angular Project

Home > Portfolios > High School > Angular Project

Olense Feesten – Angular Project

Overzicht:
Het Olense Feesten project is een uitgebreide Angular-applicatie die is ontwikkeld als onderdeel van de Angular-cursus tijdens het laatste jaar van het programma Toegepaste Computerwetenschappen (specialisatie in app-ontwikkeling) bij Thomas More Geel. Deze applicatie dient als een festivalplatform dat gebruikers gedetailleerde evenementinformatie, ticketaankopen, praktische richtlijnen, sponsoraanvragen en meer biedt. Het project is geïntegreerd met een Azure-aangedreven backend voor efficiënt gegevensbeheer, mediaopslag en naadloze API-connectiviteit.

Functies Overzicht

  1. Kernfunctionaliteiten:
    • Festivalprogramma en line-updetails.
    • Praktische evenementeninformatie (weer, kaarten, faciliteiten).
    • Veilig tickets kopen met Stripe integratie.
    • Sponsor- en contactformulieren via Postmark API.
  2. Extra functionaliteiten toegevoegd:
    • Mailchimp-integratie: Nieuwsbriefinschrijvingen worden rechtstreeks gekoppeld aan Mailchimp-doelgroepen.
    • OpenWeatherMap-integratie: Dynamische weersupdates met bruikbaar advies (bijvoorbeeld: “neem laarzen mee”).
    • Enhanced Security: Beveiligd beheerportaal met extra DTO-lagen voor backendbeveiliging.
    • Interactieve kaart: Een Leaflet-based map met festivallocatie, parkeerplaatsen en beperkte zones.
    • Countdown Timer: Geeft de resterende tijd tot het festival begint weer.
    • PDF Lineup Download: Exporteer dagschema's naar downloadbare PDF's.
    • Chatbot Integration: Een speciaal opgeleide LLM-chatbot voor het beantwoorden van vragen over festivals.
    • Expanded Information Models: Gedetailleerde gegevens over sponsors, eetkraampjes, campings en FAQ zijn toegankelijk via het beheerderspaneel en de website.

Technologische stapel

Frontend:

  • Gemaakt met Angular.
  • Gehost op Azure App Service.
  • Geoptimaliseerde routering, responsief ontwerp en naadloze interactie.

Backend:

  • API gemaakt met .NET, gedeployed op Azure Web App.
  • Azure MySQL Database voor het opslaan van gebruikers-, schema- en ticketgegevens.
  • Azure Blob Storage voor het hosten van mediabestanden zoals afbeeldingen en video's.

APIs & Tools:

  • Auth0 voor veilige authenticatie en gebruikersbeheer.
  • Stripe voor het verwerken van ticketbetalingen.
  • Mailchimp voor e-maillijstbeheer.
  • OpenWeatherMap API voor realtime weergegevens.
  • Postmark API voor veilige SMTP-berichten.

Implementatiedetails

Azure-implementatieschema:

  1. Frontend: Angular-app gehost als een statische web-app op Azure App Service.
  2. Backend: De geïmplementeerde API verwerkt alle verzoeken en gegevensinteracties.
  3. Database: MySQL-database gehost op Azure voor betrouwbare en schaalbare gegevensopslag.
  4. Blob Storage: Slaat media-assets op die toegankelijk zijn via openbare URL's voor optimale prestaties.

Production URL:

Olense Feesten Live

Ontwikkelingsgids

  1. Installatie-instructies:
    Clone the repository:

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

    Start de ontwikkelserver:

    ng serve or npm start

    Omgevingsvariabelen configureren in src/environments/environment.ts voor lokale testen.

  2. Backend API:
    Zorg ervoor dat de backend-API operationeel is en test deze met behulp van Postman of soortgelijke hulpmiddelen. Raadpleeg Backend documentatie..

Hoe het werkt

  1. User Interaction:
    • Gebruikers bekijken festivaldetails en kopen tickets via een intuïtieve Angular-interface.
    • Secure login via Auth0 garandeert de integriteit van gebruikersgegevens.
  2. API Communication:
    • HTTP-verzoeken verwerken het ophalen van gegevens, tickettransacties en updates van praktische informatie.
    • API integreert met de database en blob-opslag voor realtime levering van gegevens en media.
  3. Ticketing & Payments:
    • Gebruikers kopen tickets veilig via Stripe.
    • Bevestigings- of mislukkingspagina's bieden directe feedback.
  4. Security:
    • Auth0 beheert authenticatie en veilige routering.
    • DTO's zorgen ervoor dat gevoelige gegevens veilig worden verwerkt.

Conclusie

Het Olense Feesten-project demonstreert de naadloze integratie van Angular en Azure om een ​​functierijk, schaalbaar festivalplatform te bouwen. De combinatie van gebruikersgerichte functies en robuuste backendservices is een voorbeeld van moderne applicatieontwikkelingsnormen, met geavanceerde functionaliteiten die verder gaan dan de cursusvereisten.

Video Project

 

nl_BE
en_GB nl_BE