A React-based packing list application that helps travelers keep track of items they need to pack for their trips.
This project was built following The Ultimate React Course 2025: React, Next.js, Redux & More by Jonas Schmedtmann, one of the most comprehensive and highly-rated React courses available.
✨ Core Functionality:
- ✅ Add items to your packing list with descriptions and quantities
- 📦 Organized item display with categorization
- ✏️ Mark items as packed/unpacked
- 🗑️ Delete items from your list
- 📊 Real-time statistics showing packing progress
- 🎯 Interactive and user-friendly interface
- React - UI library for building interactive components
- JavaScript (ES6+) - Core programming language
- CSS - Styling and responsive design
- Node.js - Runtime environment
travel-list/
├── public/
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
├── src/
│ ├── components/
│ │ ├── App.js # Main application component
│ │ ├── Form.js # Form component for adding items
│ │ ├── PackingList.js # List display component
│ │ ├── Item.js # Individual item component
│ │ ├── Stats.js # Statistics component
│ │ └── Logo.js # Logo component
│ ├── index.js # Application entry point
│ └── index.css # Global styles
├── package.json
└── README.md
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/Mohamed-Alkafory/Travel-list.git
cd Travel-list- Install dependencies:
npm install- Start the development server:
npm start- Open http://localhost:3000 in your browser
- Add Items: Enter an item description and quantity, then click "Add"
- Mark as Packed: Check the checkbox next to an item when packed
- Delete Items: Click the delete button to remove items from the list
- View Statistics: See your packing progress in the stats section
Through building this project, you'll learn:
- React component creation and composition
- State management with hooks (useState, useEffect)
- Event handling in React
- Conditional rendering
- List rendering and keys
- Form handling
- Props passing between components
- Component lifecycle
Instructor: Jonas Schmedtmann
Course: The Ultimate React Course 2025: React, Next.js, Redux & More
Platform: Udemy
This course is the ultimate guide to modern React development, covering React fundamentals, advanced patterns, Next.js, Redux, and much more. Perfect for anyone looking to master React and build professional web applications.
This project is part of an educational course and is provided for learning purposes.
Feel free to fork this project and submit pull requests for any improvements or enhancements.
Happy Packing! 🌍