Glam Up My Markup: Beaches - Frontend Challenge v24.04.17
Tags: devchallenge, frontendchallenge, css, javascript
Published: 2024-06-07 05:30:54

_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
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->
Access my project on [GitHub pages](https://rahulpatwa1303.github.io/best-beachs/)

![Landing page to the site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orfd256xrom880qxydtc.png)

![World map to show the beaches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iohmbrrwb3ouw1ip0teq.png)

![View when any beach is selected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vshg8gnyy4f9m6e6af0k.png)

You can checkout the [github repo](https://github.com/rahulpatwa1303/best-beachs) of the code on 


## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

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.


<!-- Thanks for participating! -->