tripPlanner

🌍 TripPlanner

“Plan, organize, and enjoy your perfect vacation!”

---

🚀 Description:

TripPlanner is a powerful and user-friendly trip planning application built with React. Whether traveling solo or with a group, TripPlanner helps manage flights, accommodations, daily activities, budgets, and itineraries in a seamless and interactive way. With features like a drag-and-drop itinerary builder, real-time budget tracking, and JSON-based import/export, TripPlanner makes planning your dream vacation effortless.

---

🛠️ Technologies Used:

Stack:

• Frontend: React, Bootstrap, React Router.
• State Management: LocalStorage (for now, backend planned for the future).
• Styling: Bootstrap 5, CSS.
• Version Control: Git & GitHub.

---

📚 Skills & Concepts Applied

• React Component Architecture → Modular, reusable components.
• State Management → LocalStorage for now, expandable to Backend DB.
• React Hooks (useState, useEffect, useCallback) for dynamic UI updates.
• Event Handling → Drag & Drop functionality for trip scheduling.
• Data Persistence → Saves trip data in browser storage for later retrieval.
• Error Handling → Improved UI feedback with alerts and validation.

---

📖 How to Use TripPlanner

Set Up Your Trip

1. Start by entering destination, duration, and number of travelers.
2. Edit trip details anytime via the Edit Trip section.

Manage Activities

1. Add activities to your Available Activities Pool with details like cost and time.
2. Drag and drop activities into the Daily Itinerary.
3. Schedule activity times using the calendar-style planner.

Track Budgets & Costs

1. View real-time calculations of trip expenses for individuals and groups.
2. Add flights, stays, and additional expenses in the Trip Overview.

Save, Export & Share Your Trip

1. Trip data automatically saves in the browser via LocalStorage.
2. Export your trip plan as a JSON file for easy sharing or backup.
3. Import saved trip files to resume planning instantly.

---

📊 Features

🔥 Core Features

✔ Trip Overview → Flights, stays, additional expenses, and budgets in one place.
✔ Activity Management → Add, edit, and remove activities dynamically.
✔ Daily Itineraries → Calendar View for structured trip scheduling.
✔ Drag & Drop → Schedule activities seamlessly with an interactive planner.
✔ Budget Tracking → Automatic calculations for all travelers & per person.
✔ To-Do List → Create and check off travel-related tasks.
✔ Real-time Data Saving → Ensures no progress is lost.
✔ Import/Export → Load and save trips as JSON files.
✔ Mobile-Friendly → Optimized UI for both desktop & mobile.

---

🏗 Future Enhancements

🚀 Backend Implementation (Planned)

• User Authentication → Login system for personal trip storage.
• Cloud Database (MongoDB, Firebase, PostgreSQL) → Save trip data online.
• Trip Collaboration Feature → Share and edit trips with friends in real time.
• Flight & Hotel API Integration → Fetch real-time travel data.
• AI-Powered Recommendations → Suggest activities, budget optimizations, and schedules.
• Expense Splitting → Feature to split trip costs among travelers.

---

🏃 How to Run the Project Locally

1. Clone the repository:

   git clone https://github.com/cltxvz/tripPlanner.git
   

2. Navigate to the project folder:

   cd tripPlanner
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm start
   

5. Open http://localhost:3000 in your browser to start planning your trip!

---

👤 Author

Carlos A. Cárdenas

Feel free to reach out for collaboration or feedback!

Thank you for using TripPlanner! 🌍✨ If you like this project, ⭐ star the repository and contribute to its growth. 🚀