City of Melbourne, tourists recommendation website

Overview

The project gives an overview of the city of Melbourne about the dining options and live music. The website serves as a prototype to give visitors recommendations, suggestions according to the suburbs. The website is fully responsive and mobile-friendly.

File structure

The project's structure follows Vue.js's strategy, in which the related CSS code and the javascript code are in the same .vue extension file (script, style block). However, in this project, the code is separated into two files situated in the same folder. For example, in the scripts/header folder, the related CSS file is header.css and the javascript file is header.js. Although the CSS file is not scoped to the specific file, it's relatively simple to find the styles instead of all-in-one style.css.

Data

The data is stored in JSON format in the javascript file.

Technologies/libraries

1. HTML5 for page rendering
2. CSS3 for styles and responsiveness
3. JavaScript for an event handler, such as buttons
4. Mapbox-gl for map rendering, building
5. Bootstrap 5 for responsiveness
6. Font awesome for icons
7. Splide for slide effects

Other tools support the project

1. Figma - UI/UX design
2. Zeplin - design and front-end development collaboration
3. Notion - project management
4. Juptyer notebook - data analysis and pre-processing
5. Netlify - deployment

Attribution (alphabetically)

• GuanXin Wang - front-end developer
• TianHua Lu - data analyst
• TuoHuang Li - front-end developer
• Yu-Hsin Tseng - designer

The GitHub page

https://wodenwang820118.github.io/GEO90007-project/