This project is a simple web application that displays information about the world's capitals. It uses React as a JavaScript library for building user interfaces, Vite as a build tool, and a REST API provided by JSON Server to fetch data.
The app allows users to navigate to different routes and view a list of visited cities. It also utilizes Firebase for authentication and storing visited cities.
worldwise.demo.mp4
- Responsive navigation bar with links to the homepage, pricing page, and a product page.
- A map view of the world with markers for each visited city.
- Ability to add cities by clicking on the map.
- Ability to delete cities from the list.
- Storing a list of visited cities in Firebase.
- User authentication.
- React: JavaScript library for building user interfaces.
- Vite: Build tool that aims to provide a faster and leaner development environment compared to Create React App.
- json-server: Lightweight server for REST APIs.
- Firebase: Authentication and database services.
- JSX, CSS, JavaScript
- CSS for styling and responsiveness
- Leaflet Map
- Custom Hooks
- Context API
- Routing: programmatic navigation
- Form handling: controlled components, form validation, input handling
- Data fetching: useEffect, fetch API, async/await
- Firebase Realtime Database: methods to insert, fetch, and delete from cities database
- React Hooks: useState, useEffect, useReducer, useContext, useNavigate
- Utilizing React Hooks to manage state and side effects.
- Working with React Router DOM for routing and navigation.
- Integrating Leaflet for interactive map components.
- Using React Leaflet to display markers and interactive maps.
- Making API requests using useEffect and async/await.
- Understanding the concept of controlled components and form handling.
- Utilizing Firebase for database services.
- Working with custom hooks to handle geolocation and URL-based positioning.