3dglobesearch
3D Globe Search in React.js [Developed for learning purpose]
Overview:
This product is a web app that allows users to search for places and view them on a 3D globe. It provides features such as zoom-in/zoom-out and drag marker capabilities on the map. Users can input coordinates, search for a place, and get localized items such as domain, ISO code, currency, phone, and pincode format. The app also provides information about timezones and the current time for the searched place and its country. Users can save their favorite places and view details about them. The app also has a day-night mode that can be toggled on and off.
Features:
- Search place and show place in 3D globe: Users can search for places and view them on a 3D globe.
- Zoom-in/zoom-out & drag marker features in map: Users can zoom in/out and drag the marker on the map.
- Input coordinates from slider/number input and search place: Users can input coordinates using a slider or number input and search for a place.
- Get localized items: The app provides localized items such as domain, ISO code, currency, phone, and pincode format for the searched place.
- Get all timezones and current time: Users can get information about all timezones and the current time for the searched place and its country.
- Save favorite place and get details: Users can save their favorite places and view details about them.
- View day-night mode: The app has a toggleable day-night mode.
Summary:
This web app allows users to search for places and view them on a 3D globe. It provides features such as zooming in/out and dragging the marker on the map. Users can input coordinates, search for a place, and get localized items such as domain, ISO code, currency, phone, and pincode format. The app also provides information about timezones and the current time for the searched place and its country. Users can save their favorite places and view details about them. Overall, this app offers a user-friendly interface for exploring and interacting with geographical data.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Chakra UI
Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Framer Motion
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.