Explore Berlin's iconic and hidden gems with Miles Experiences. Calculate travel costs and journey times to your chosen destination. 🚗
🚀 Ensure location access: Activate Location Access in your web browser to discover experiences around you. Alternatively, start your journey from Alexanderplatz, which is set as the default user location.
🎡 Search for nearby attractions: Conveniently find nearby attractions, sorted by distance, on the right side of the app.
🔛 Customise your adventure: Personalise your adventure by dragging the location marker or the Miles car. Prices, routes and experiences are updated based on your new location.
🧐 Check venue details: Click on a experience card on the right or a marker on the map to get more information about the attraction. This includes a brief description, exact times and prices, and a link to the official website Berlin Monument Authority for more information.
🏁 See route visualisation: By clicking on a location on the right-hand side of the list, you can view the route to the destination on the map.
⏳ Real-Time Calculation: These details are calculated in real-time using the Google Directions API. This ensures that users receive accurate pricing information based on their current location and the selected venue which you can find in Info Window popup.
📍 Limited Location Availability: Please note that the application is currently available only for Berlin. If you are located within Berlin, you can enjoy all the features the app has to offer. However, if you are located more than 50 kilometers away from Berlin or if you choose not to share your location, the app will use Alexanderplatz as the default location.
🔑 Important Note: To ensure that you have access to accurate pricing details, please make sure you have correctly configured your Google Maps API key. Detailed instructions on how to obtain and configure your API key can be found in the Google Maps JavaScript API documentation.
🗣️ Different languages are available: This application is available in three languages at the moment, making it user-friendly. To access your preferred language, simply click on the flag icon and all interface elements, including venues, their descriptions and destination costs, will be translated accordingly. Design Note 8 provides detailed instructions on how to easily add new languages.
- React
- TypeScript
- Tailwind CSS
- Google Maps API
- Google Directions API
- HTML
- Zustand (state management)
- i18next internationalization-framework
To get started with development, follow these steps:
- Install dependencies:
npm install- Start the development server:
npm run startYou can access the application at localhost:3000
Tests are written with the React Testing Library. To run all the tests, use the following command
npm run testAll locations and images are from the https://denkmaltag.berlin.de/, all image rights are owned by Landesdenkmalamt, Berlin.
The style of the app was inspired by Miles Mobility GmbH. 🎨
Contributions to the Miles Experiences app are welcome! If you have any suggestions, bug reports, or feature requests, feel free to submit an issue or a pull request. 👋🏼
This project is released under the MIT Licence. Feel free to use, modify, and redistribute the code under the terms of the licence.