Skip to content

Latest commit

 

History

History
99 lines (69 loc) · 3.33 KB

README.md

File metadata and controls

99 lines (69 loc) · 3.33 KB
Raw

🌍 WorldWise Map Application - Desktop App 🗺️

This React Vite Single Page Application enables users to efficiently interact with a map, allowing them to select locations for updating personal notes. Users can seamlessly add or delete cities, leveraging a mock API for local machine operations, as backend functionality is not available on the hosted website.

GitHub Netlify

Checkout the LinkedIn Post with Video demo

Learning Objectives 📚

Embark on a journey of learning and discovery while working on the WorldWise Map Application. Here's what you'll gain:

📌 1. Single Page Application

  • Learn how to create a seamless and efficient single-page application.

📌 2. React with Vite

  • Dive into the world of React.js, powered by Vite for a smoother development experience.

📌 3. Implemented Routes

  • Master the art of route handling with:
    • Nested Routes.
    • Index Routes.

📌 4. CSS Modules

  • Explore the wonders of CSS modules to keep your styles organized and scoped.

📌 5. Linking Between Routes

  • Connect your application's various sections effortlessly with <Link> and <NavLink>.

📌 6. Dynamic Routes

  • Store state in the URL and handle dynamic routes with URL parameters.

📌 7. Programmatic Navigation

  • Navigate like a pro using:
    • useNavigate
    • <Navigate>

📌 8. Context API

  • Unleash the power of Context API:
    • Create and provide a context.
    • Consume the context.
    • Customize a provider and hook.

📌 9. Interactive Maps

  • Enhance your app with a feature-rich map using the Leaflet library.

📌 10. Geolocation

  • Set the map's position using geolocation for a personalized experience.

📌 11. Click Events

  • Capture clicks on the map and fetch location data effortlessly.

📌 12. City Management

  • Create and delete cities to populate your map.

📌 13. Advanced State Management

  • Elevate your app's state management using context and useReducer.

📌 14. Authentication

  • Secure your routes with fake authentication.

📌 15. Performance Optimization

  • Optimize your app for better performance, including:
    • Profiling with Developer Tools.
    • Tricks to reduce wasteful renders.
    • Understanding memo, useMemo, and useCallback.

📌 16. Bundle Size Optimization

  • Reduce bundle size and improve load times using lazy loading and code splitting.

📌 17. API Integration

  • Utilize API requests for data management, including:
    • Sending POST requests.
    • Fetching data with GET requests.
    • Deleting data with DELETE requests.

How to Install and Run

  1. Clone the repository:

    gh repo clone VINAYAK9669/WorldWiseWebAPP1

  2. Install dependencies:

    cd WorldWiseWebAPP1
npm install

  3. Start the development server:

    npm run dev

Happy Mapping! 🗺️