WorldWise

WorldWise is a full-stack web application built with React + Vite that allows users to explore and track their travel adventures across 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 and tracking personal travel history.

Live Demo

WorldWise

Technologies and Techniques Used

The core library for building user interfaces.
A fast build tool for a more efficient development experience.
Routing and navigation within the application.
Interactive maps for visualizing city and user's locations.
Manage global state of cities, provide asynchronous CRUD operations with Firebase, including loading cities, retrieving city details.
Real-time database for managing city data (reference, get, push, remove).

Visual Overview

Complete App Overview

Separate Overview

1. Homepage, Pricing Page, Product Pages

2. Login

3. Main App Page and User Location

4. Managing Cities, Countries

Features

Travel Tracking

• Track your travels and mark the cities you've visited on an interactive map.
• Keep a log of your travel experiences and share them with friends.

City and Country Lists

• 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

• 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.

Add New City

• 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.

Pricing and Product Information

• Pricing Page: Discover the different pricing options for using the WorldWise application.
• Product Page: Discover the different products at the WorldWise application.

Protected Routes

• 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 Design

• Responsive Layout: Experience a seamless user experience across various devices and screen sizes, thanks to the application's responsive design and adaptive layout.

More Projects...

• usePopCorn - Movie Tracker app
• React Quiz - Quiz app
• Recipestic - Recipe app