Yamanote Melodies is a React-based web application designed to take users on an auditory journey through Tokyo's Yamanote Line. This interactive experience allows users to explore the various stations on the Yamanote Line and listen to unique melodies or announcements associated with each station. The project leverages React Bootstrap for a responsive layout and FontAwesome for intuitive icons, creating a user-friendly and engaging interface. Live Watch video
Yamanote Melodies offers several key features that enhance the user experience:
-
Interactive Station Map: A visually appealing map displaying the stations on the Yamanote Line. Users can click on stations to learn more about them.
-
Audio Clips: Each station features an associated audio clip, such as the station's unique jingle, ambient sounds, or platform announcements. These clips offer users an immersive auditory experience of the station's environment.
-
Responsive Design: Built with React Bootstrap, the application is fully responsive and provides an optimal viewing experience across a wide range of devices, from desktops to mobile phones.
-
FontAwesome Icons: The use of FontAwesome icons enhances the interface, making it more intuitive and visually engaging. Icons indicate play and stop controls for audio clips, contributing to a seamless user experience.
-
Accessibility: Focus on accessibility ensures that the application is usable by as many people as possible, including those who rely on assistive technologies.
-
Footer Links: A footer section with a link to the creator's GitHub profile and acknowledgment of the technologies used in building the application, such as React.
Follow these steps to set up Yamanote Melodies on your local machine:
- Clone the repository:
git clone https://github.com/<your-username>/yamanote-melodies.git- Navigate to the project directory:
cd yamanote-melodies- Install the required dependencies:
npm install- Start the application:
npm startAfter starting the application, it will be accessible at http://localhost:3000 on your web browser.
Explore the interactive map to learn about the Yamanote Line stations. Click on any station circle to play or stop the audio clip associated with that station. Enjoy the unique sounds and melodies that define each station on Tokyo's Yamanote Line.
Contributions are welcome! If you're interested in improving Yamanote Melodies, follow these steps to contribute:
- Fork the repository.
- Create a new branch for your feature (
git checkout -b feature/YourFeature). - Commit your changes (
git commit -m 'Add some YourFeature'). - Push to the branch (
git push origin feature/YourFeature). - Open a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Thanks to FontAwesome for the iconography.
- React Bootstrap for responsive design elements.
- All contributors and enthusiasts of Tokyo's Yamanote Line.
- Audio tracks by Fun Video, Youtube Channel
For detailed information on contributing to Yamanote Melodies, please refer to the CONTRIBUTING.md file.
Created with ❤️ by Igor Dinuzzi