https://github.com/cltxvz/tripplanner
A planning app to organize, track, and budget your trips with ease!
https://github.com/cltxvz/tripplanner
budget-tracking css drag-and-drop github-pages html interactive-ui itinerary-planner javascript local-storage responsive-design travel-management user-friendly-interface web-application
Last synced: 7 months ago
JSON representation
A planning app to organize, track, and budget your trips with ease!
- Host: GitHub
- URL: https://github.com/cltxvz/tripplanner
- Owner: cltxvz
- Created: 2024-12-30T13:08:14.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-03-17T17:06:20.000Z (7 months ago)
- Last Synced: 2025-03-17T17:35:04.567Z (7 months ago)
- Topics: budget-tracking, css, drag-and-drop, github-pages, html, interactive-ui, itinerary-planner, javascript, local-storage, responsive-design, travel-management, user-friendly-interface, web-application
- Language: JavaScript
- Homepage: https://cltxvz.github.io/tripPlanner/
- Size: 6.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌍 **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:**
```bash
git clone https://github.com/cltxvz/tripPlanner.git
```
2. **Navigate to the project folder:**
```bash
cd tripPlanner
```
3. **Install dependencies:**
```bash
npm install
```
4. **Start the development server:**
```bash
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. 🚀