A simple React application for managing your next trip packing list. This app allows users to add, remove, and mark items as packed, while categorizing them into different groups. The packing list is persisted in local storage so that your data remains intact even after a page refresh.
- Add Items: Easily add items to your packing list with quantity, description, and category.
- Remove Items: Remove items from your list.
- Toggle Packed State: Mark items as packed or unpacked.
- Categorize Items: Organize items into categories such as Clothes, Accessories, Documents, Toiletries, Tech, and Misc.
- Local Storage: The app persists your data using local storage.
- Responsive Design: The app adjusts its layout for different screen sizes.
Check out the live demo of the project at: Trip-list
- Adding Items: Enter a description, select a quantity and category, then click "Add" to add an item to your list.
- Removing Items: Click the ✖️ button next to an item to remove it from the list.
- Toggling Packed State: Click the checkbox next to an item to mark it as packed or unpacked.
- Clearing the List: Click the "Clear" button to remove all items from the list.
- HTML5
- CSS3
- JavaScript (ES6+)
- React
To get started with this project, follow these steps:
- Clone the repository:
git clone https://github.com/horlesq/trip-list.git- Navigate to the project directory:
cd trip-list- Install dependencies: Make sure you have Node.js installed, then run:
npm install- Start the development server:
npm start- Open your browser and go to http://localhost:3000 to see the application in action.
This project is licensed under the MIT License - see the LICENSE file for details.
For any inquiries or feedback, feel free to reach out via:
- Email: adrian.horlescu@gmail.com
- Linkedin Adrian Horlescu
- GitHub: Horlesq
This application is a modified version of a project teached in The Ultimate React Course 2024