Worldwise is a React + Vite application that lets users explore the world through an interactive map and track places they’ve visited. It includes authentication, protected routes, and a local backend. Built with modern React features like Context API, useReducer, React Router (useNavigate), and React-Leaflet, lazy loading, and performance optimizations with useCallback.

• 🌎 Interactive world map with Leaflet + React-Leaflet
• 🗺 Add and view visited places
• 🔑 Fake authentication with useContext and useReducer
• 🔒 Protected routes for logged-in users only
• 💾 Local backend with JSON Server (npm run server)
• ⚛️ Global state management with Context API + useReducer
• 🛤 Navigation and redirects using React Router + useNavigate
• ⚡ Built with Vite for a fast development environment
• 🎨 Scoped styling with CSS Modules
• 🖼 Lazy loading for optimized performance
• ⚡ useCallback for memoized functions and reduced re-renders

• React (Vite) – modern development setup
• Context API + useReducer for global state
• React Router v6 (useNavigate, protected routes)
• React-Leaflet + Leaflet for maps
• JSON Server as a mock backend
• CSS Modules for styling
• useCallback for performance optimization

Clone the repo and install dependencies:

git clone https://github.com/AliDeli80/worldwise.git
cd worldwise
npm install

Run the Vite development server:

npm run dev

Run the mock backend (JSON Server):

npm run server

The app will be available at http://localhost:5173
The JSON server will run on http://localhost:9000

1- Authentication – Fake login system built with Context + useReducer.

2- Protected Routes – Restricted pages (map and trips) only accessible when logged in.

3- Navigation – Uses useNavigate for programmatic navigation and redirects after login/logout.

4- Map Interaction – Interactive maps powered by Leaflet + React-Leaflet.

5- State Management – Global state handled with Context API + useReducer.

6- Backend (JSON Server) – Stores trips and visited places in a mock database.

7- Lazy Loading – Routes and components are loaded on demand for better performance.

8- useCallback Optimization – Memoized functions to prevent unnecessary re-renders.

1. Home Screen – Entry point with navigation to main features.

2. Login Screen – Authenticate to access protected routes.

3. Map Screen – Explore the interactive map and add visited places.

• 🌐 Connect to a real backend (e.g., Firebase, Supabase)

• 📱 Make the app fully responsive

• ✨ Add animations and better UX transitions

• 🧭 Improve map features (marker clustering, categories, filters)

This project is licensed under the MIT License.

Ali Delgoshaei