WorldWise is a front-end web application built with React that allows users to explore different cities and countries around the world. It provides a comprehensive set of features for browsing, adding, and managing cities, as well as viewing detailed information about each city.
- City List: Browse through a list of cities, each displaying its name, position on the map, and an emoji representing its unique identity.
- Country List: Explore a list of countries, providing a broad overview of cities grouped by country.
- City Details Page: View detailed information about each city, including its name, position on the map, emoji representation, and additional data.
- Interactive Map: Utilize an interactive map powered by Leaflet to visualize the exact location of each city and explore nearby areas.
- Form: Add new cities to the database by filling out a form with relevant details, including the city's name, position (latitude and longitude), and an emoji to represent it.
- Validation: Ensure data integrity and accuracy through form validation, preventing the addition of incomplete or incorrect city information.
- Product Page: Browse through different products or services offered by the application, each showcasing its features, benefits, and pricing plans.
- Pricing Page: Explore detailed pricing information for different subscription tiers or service packages, enabling users to select the plan that best suits their needs.
- Login Page: Access secure pages and functionality by authenticating through a login page, providing a username and password.
- Protected Routes: Utilize protected routes to ensure that only authenticated users have access to certain pages, such as adding new cities.
- Responsive Layout: Experience a seamless user experience across various devices and screen sizes, thanks to the application's responsive design and adaptive layout.
- React: The frontend of the application is built using React, a JavaScript library for building user interfaces.
- React Router: React Router is used for handling navigation and routing within the application, enabling seamless page transitions and URL management.
- Context API: Context API is employed for state management, allowing components to share data without having to pass props manually, enhancing code organization and maintainability.
- Leaflet: Leaflet is integrated for interactive maps, enabling users to visualize the locations of cities and explore nearby areas with ease.
- Clone this repository to your local machine using
git clone. - Install dependencies by running
npm installin the project directory. - Start the fake server by running
npm run server. - Start the development server with
npm start. - Access the application in your web browser at
http://localhost:3000.
Contributions are welcome! If you find any issues or have suggestions for improvements.
