Discoverfy

Genre : Travel Website

Period of Time : 2 weeks

When : July, 2023

Role : Web Design and Development (API)

Development : UI, UX, Frontend, Backend(GOOGLE MAP API)

Language : Svelte Kit

Discoverfy is a website created as the final project at NEXT Academy. It was designed with the theme of showcasing recommended activities at travel destinations, providing information for users seeking activities to enjoy during their travels.

Goal

Firstly, my role’s goal was to design the website. Subsequently, I aimed to utilize the Google Maps API to allow users to input latitude and longitude, resulting in a pin being dropped at that location. Additionally, I worked towards calculating and displaying the route from the current location to the specified coordinates. Furthermore, the objective included ensuring that pins are dropped when searching by country or city names.

Approach

During the development process, I used simple HTML to implement and test functionalities before eventually integrating the front-end and back-end created by others. The approach seemed to flow well. The other two team members encountered several errors, mainly due to using Git and Svelte concurrently, resulting in issues like disappearing code. In contrast, I worked on API development locally using HTML, avoiding such issues and successfully integrating everything in the end.

Results

Ultimately, there was an issue during the presentation where the Google Maps API was not functioning. However, it was quickly resolved, and it was determined to be due to an issue with my account. Although there were limited instances where latitude and longitude were used, the project successfully demonstrated my first attempt at utilizing API and coordinating with others using Git.

Initially, I created a simple website using HTML to incorporate the functionality I desired, focusing on integrating my assigned Google Maps API without using Svelte. I broke down the desired features into manageable components and implemented them one by one. After achieving functionalities such as searching by latitude and longitude, and country names, I integrated them into Svelte, ensuring seamless interaction with the search results. For this project, I took on the role of designing the UI using Figma, handling both the backend API and frontend aspects individually.

Google Maps API is functioning well, and after selecting a country name in the search bar, the corresponding slug page, such as for the United States, displays a pin on the map at the location of the United States.

Country

Country + Activity