https://github.com/razzerde/bahnapi-angularapp
📡 This project shows you how to work with APIs (Bahn API as example) using Angular and TypeScript.
https://github.com/razzerde/bahnapi-angularapp
angular api deutsche-bahn rest-api restful-api tailwind tailwindcss typescript
Last synced: about 1 year ago
JSON representation
📡 This project shows you how to work with APIs (Bahn API as example) using Angular and TypeScript.
- Host: GitHub
- URL: https://github.com/razzerde/bahnapi-angularapp
- Owner: RazzerDE
- License: gpl-3.0
- Created: 2024-11-11T08:02:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-29T15:34:11.000Z (over 1 year ago)
- Last Synced: 2025-03-11T05:46:54.324Z (about 1 year ago)
- Topics: angular, api, deutsche-bahn, rest-api, restful-api, tailwind, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 566 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
📡 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](https://developers.deutschebahn.com/db-api-marketplace/apis/frontpage)** 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](https://developers.deutschebahn.com/db-api-marketplace/apis/frontpage)**:
- **[Free Timetables](https://developers.deutschebahn.com/db-api-marketplace/apis/product/26497)**
- **[StaDa - Station Data](https://developers.deutschebahn.com/db-api-marketplace/apis/product/145141)**
- **[FaSta - Station Facilities Status](https://developers.deutschebahn.com/db-api-marketplace/apis/product/130978)**
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`](https://github.com/RazzerDE/BahnAPI-AngularApp/blob/main/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!