NextStop Destination Selector 🌍

A modern React App to Choose and Track Your Favorite Destinations

NextStop is a React app that allows users to browse and select destinations they want to visit. When a destination is selected, it is added to a separate section for easy tracking. Users can manage their selections dynamically, making it simple to plan future trips. The app provides an interactive and intuitive interface for a seamless experience. Built with React, it ensures smooth state management and efficient rendering.

This modern web application is built with React, ensuring a fast and responsive user experience. It utilizes LocalStorage to remember selected destinations, allowing users to revisit their list even after refreshing the page. With a sleek design and smooth interactions, the app offers a seamless way to plan and track travel goals.

Technologies Used

• HTML

  • Provides the structural foundation for the app.
  • Organizes content efficiently for better accessibility.

• CSS

  • Enhances the visual appeal with custom styles.
  • Ensures a responsive layout for different screen sizes.

• Tailwind CSS

  • Enables rapid UI development with utility-first classes.
  • Reduces the need for writing custom CSS, keeping styles consistent.

• Vite

  • Offers a lightning-fast development environment.
  • Provides instant hot module replacement for a seamless coding experience.

• React.js

  • Manages the app’s state efficiently with reusable components.
  • Optimizes rendering for a smooth and interactive UI.

• LocalStorage

  • Stores selected destinations persistently across sessions.
  • Ensures users don’t lose their data even after refreshing the page.

• Geolocation

  • Retrieves the user’s current location to suggest nearby destinations.
  • Enhances user experience by providing location-based recommendations.

Features

1. Select Destinations

• Users can browse a list of destinations and click to select their favorites.
• Selected destinations are added to a separate section for easy tracking.
• The selection persists using LocalStorage, so choices remain even after a page refresh.

2. Deselect Destinations

• Users can remove a selected destination with a single click.
• The deselected destination disappears from the selected section instantly.
• Changes are saved in LocalStorage, ensuring a consistent experience across sessions.

3. Modern UI & Responsive Design

• Built with Tailwind CSS for a sleek and user-friendly interface.
• Fully responsive layout ensures smooth usability on all devices.

4. Fast & Efficient Performance

• Developed with React and Vite for optimal speed and performance.
• Instant updates with seamless state management for a smooth user experience.

5. Show Current Location

• The application detects and displays the user’s current location.
• Helps users see their position relative to selected destinations.
• Uses Geolocation API to fetch real-time location updates.

Installation

Follow these steps to set up and run the Project Manager app locally (Make sure you have Node.js and npm installed before running the commands):

1. Clone the repository:

   git clone https://github.com/Ummamali/nextstop.git
   cd nextstop
   

2. Install dependencies:

   npm install
   

3. Start the development server:

     npm run dev
   

License

This project is licensed under the MIT License. For more details, visit MIT License.