Glam Up My Markup: Beaches - Frontend Challenge v24.04.17

This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches

What I Built

For this challenge, I developed an interactive UI that visualizes beaches around the world on a global map. Leveraging the power of D3.js, I created a dynamic map that plots each beach based on its geographical coordinates.

Key Features:

1. Interactive Map: Users can explore beaches plotted on a world map. Each beach is represented by a point that can be clicked for more information.
2. Detail Sidebar: Upon clicking a beach on the map, a sidebar slides in to display detailed information about the selected beach, including its name, location, and other relevant details.
3. Beach List: Alongside the map, there is a comprehensive list of all the beaches with their names. Users can click on any beach name from the list to view its details and locate it on the map.
4. User-Friendly Design: Inspired by Google Maps' intuitive interface and Snapchat's hotspot visualization, the UI aims to provide a seamless and engaging user experience.

My goal was to create an aesthetically pleasing and highly functional interface that allows users to easily discover and learn about various beaches around the world. By integrating familiar design elements from popular applications, I aimed to enhance usability and make the exploration process enjoyable.

Demo

Access my project on GitHub pages

You can checkout the github repo of the code on

Journey

Coming from a background with React and Next.js, I had limited experience working with vanilla JavaScript. This project provided an excellent opportunity to dive into the core fundamentals of JavaScript and DOM manipulation without relying on frameworks. Here are the key learnings and experiences from my journey:

1. Vanilla JavaScript:
   -DOM Manipulation: Without the abstraction layers provided by React, I had to directly interact with the DOM, which gave me a deeper understanding of how web pages are constructed and updated.
   -Event Handling: I learned to handle events purely with JavaScript, enhancing my ability to create interactive web elements.

2. D3.js:
   -Data Binding and Visualization: I explored how to bind data to HTML elements and create dynamic visualizations. D3.js proved to be a powerful tool for rendering complex data-driven graphics.
   -Geographical Mapping: Implementing the world map and plotting the beaches taught me how to work with geographical data and projections in D3.js.
   -Interactive Features: Adding interactivity, such as clickable points and a responsive sidebar, helped me appreciate the versatility and power of D3.js for creating engaging user interfaces.

This project not only expanded my technical skills but also enhanced my appreciation for the intricacies of web development. It was a rewarding journey that pushed me out of my comfort zone and allowed me to grow as a developer.