📡 BahnAPI-AngularApp ~ Learn to work with APIs

Learn to work with API-REST Services in Typescript.
Developed using Angular with an HTML-Stack.

🗯️ Introduction

› This project is centered around the development of a user-friendly website. The website was crafted using HTML, CSS and TypeScript (JavaScript), which are some of the most powerful and widely-used languages in web development.

🤔 - The primary function of this website is to have a small website/web app at the end where a user can display the arrival and departure times of a desired station. It should also show whether there is an elevator at the desired station.

› This project was developed by Yannic Drews & Yanic Döpner for a project work in their training as IT specialists for application development - some parts of the project are on german because that's the language that was specified for the project work.

🧮 Features

› BahnAPI-AngularApp provides a set of fundamental features that can assist you in handling APIs in typescript, thereby facilitating your learning process on how to manage them effectively. In our small project we used the BahnAPI as example.

It supports following features:

• 📚 Simple Caching-System: Don't make new API requests on page refresh.
• 📡 Table-Data Loader: While the table data is loading, a endless GIF will be shown.
• 📛 Error-Handling: Displays errors to the user if something in the API requests fails.
• ✍ Auto-Completion: The website saves every station name and suggests them to you.
• 📡 Unit-Test 100% Coverage: All code has been thoroughly tested. Viewable with the command jest.


• 📺 Responsive Website-Design: Our website is designed to be responsive on all devices.
• 🎨 Theme-Switcher: You can switch between light and dark mode on this website.
• ⚡ Optimized Tailwind-CSS: We used Tailwind-CSS to reduce the amount of loaded CSS and to keep things responsive.

🔨 Installation

› Before you can start exploring our small website for learning purposes, there are a few preparations you need to make.

💡 › You will need a few registered plans from the BahnAPI:

• Free Timetables
• StaDa - Station Data
• FaSta - Station Facilities Status

Then, follow these steps to ensure everything runs smoothly:

1. Create an application on the DB API Marketplace & add the plans above to it.
2. Set your correct API login credentials in src/app/services/api-service/types/environment.ts.
3. Run npm install to install all dependencies.
4. Run ng build to build the project.
5. Visit the page and have FUN!