https://github.com/ummamali/nextstop
Practice React app, where users can browse a list of destinations and select the ones they are interested in. When a destination is selected, it appears in a dedicated section for easy viewing and tracking. This allows users to curate a personalized list of places they want to visit.
https://github.com/ummamali/nextstop
browserapi css3 html5 localstorage reacthooks reactjs singlepageapplication statemanagement tailwindcss vitejs
Last synced: about 1 year ago
JSON representation
Practice React app, where users can browse a list of destinations and select the ones they are interested in. When a destination is selected, it appears in a dedicated section for easy viewing and tracking. This allows users to curate a personalized list of places they want to visit.
- Host: GitHub
- URL: https://github.com/ummamali/nextstop
- Owner: Ummamali
- Created: 2025-02-27T10:51:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-27T14:18:01.000Z (about 1 year ago)
- Last Synced: 2025-02-27T16:05:02.445Z (about 1 year ago)
- Topics: browserapi, css3, html5, localstorage, reacthooks, reactjs, singlepageapplication, statemanagement, tailwindcss, vitejs
- Language: JavaScript
- Homepage:
- Size: 991 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:**
```sh
git clone https://github.com/Ummamali/nextstop.git
cd nextstop
3. **Install dependencies:**
```sh
npm install
5. **Start the development server:**
```sh
npm run dev
## License
This project is licensed under the **MIT License**. For more details, visit [MIT License](https://opensource.org/licenses/MIT).