NTPU Bubble Tea Shop Map

Freshman General Education Course: Web Programming - Final Project

Project Overview

This project was developed as the final assignment for my freshman web programming course. The goal was to create a fully functional website, and I decided to design a map of bubble tea shops around National Taipei University. The website provides a comprehensive list of shops, along with a random drink suggestion feature to help users who can't decide what to order.

Website Link: NTU Bubble Tea Map

---

Key Features

1. Interactive Map:
   The website includes an interactive map that displays the locations of various bubble tea shops around the university campus. This map helps students quickly locate nearby shops.

2. Random Drink Suggestion:
   For users who are indecisive about what to drink, I implemented a slot machine-style random drink suggestion feature. With just one click, the website suggests a random drink, adding an element of fun and surprise.

3. Promotional Offers Section:
   The website integrates a section displaying current promotions or discounts from different shops. This helps students quickly check for any deals before heading out to purchase their bubble tea.

---

Technologies Used

• HTML: For structuring the website and creating the basic layout.
• CSS: For styling and making the website visually appealing.
• JavaScript: To implement the interactive features such as the random drink suggestion slot machine.
• GitHub Pages: For hosting the website online.

---

Challenges Faced and Solutions

1. Lack of Experience:
   As a social work major, I had no prior experience in web development. I overcame this by doing extra research and practicing with various tutorials. Through this process, I developed a strong understanding of how to structure websites using HTML and CSS.

2. Implementing Random Drink Selector:
   One of the most challenging parts was the random drink selection feature. Initially, I struggled with understanding how to implement JavaScript logic. I solved this by breaking the problem down into smaller tasks, creating a list of available drinks, and using basic randomization functions to pick a drink.

3. Cross-Browser Compatibility:
   Ensuring that the website worked smoothly across different browsers was another challenge. I tested the website on multiple browsers (Chrome, Firefox, Safari) and fixed issues related to styling and functionality for consistent user experience.

---

Future Improvements

1. Mobile Responsiveness:
   Currently, the website is primarily optimized for desktop use. In the future, I plan to make it fully responsive for mobile devices, ensuring that students can access it easily from their phones.

2. More Interactive Features:
   I would like to add more interactive features, such as user reviews for each bubble tea shop or a “favorite shops” list that users can save for future reference.

3. Real-Time Promotions:
   I hope to collaborate with local bubble tea shops to display real-time promotions on the site, allowing users to see the latest deals as they change.

4. Multi-language Support:
   Currently, the website is in Chinese only, which limits accessibility for international students or tourists who may not speak the language. I plan to implement multi-language support, starting with an English version, and possibly expanding to other languages based on the user base. This could be achieved by using language selection buttons and integrating translation libraries or services like i18next or Google Translate API for dynamic content translation.