Traveloop ✈️

Traveloop is a modern, full-stack web application designed to simplify the chaos of planning multi-city global itineraries. Built as a Minimum Viable Product (MVP), it allows modern explorers to discover destinations, build interactive day-by-day travel plans, and automatically track their real-time budget.

🌍 Live Demo: https://traveloop-web.netlify.app/

• Secure Authentication: User signup and login powered by Supabase Auth, ensuring that travel data remains private and isolated per user.
• Dynamic Itinerary Builder: An interactive, tab-based builder allowing users to seamlessly add global cities to their trip and attach specific activities to each destination.
• Live Budget Tracking: Automated financial calculations that aggregate the cost of all planned activities across a user's lifetime trips.
• Global Destination Discovery: A dynamic search engine querying a curated JSON dataset to help users find their next adventure.
• Premium Glassmorphism UI: A highly responsive, modern interface built entirely with Tailwind CSS, featuring frosted glass effects, smooth hover states, and dynamic gradient overlays.

Frontend:

• HTML5
• Tailwind CSS (via CDN)
• Vanilla JavaScript (ES6+)

Backend (BaaS):

• Supabase - Open-source Firebase alternative
• PostgreSQL (Relational Database)
• Supabase Authentication (JWT-based)
• Row Level Security (RLS) Policies

The application relies on a strictly relational database structure to manage complex travel data:

1. trips: The primary table storing the overarching journey details (Name, Start Date, End Date) linked directly to a user_id.
2. stops: The destinations (cities/countries) visited during a specific trip. Linked to trips via trip_id.
3. activities: The individual events, sightseeing plans, or accommodations within a stop. Linked to stops via stop_id.

This project utilizes Supabase Row Level Security (RLS). Database access is completely locked down from the public internet. Read, write, update, and delete operations are strictly bound to authenticated users, ensuring that a user can only interact with rows where the user_id matches their verified session token.

To run this project locally on your machine:

1. Clone the repository:

   git clone [https://github.com/YOUR-USERNAME/traveloop.git](https://github.com/YOUR-USERNAME/traveloop.git)

2. Open the directory:

   cd traveloop

3. Launch a local server: Because this project uses JavaScript fetch() requests (for the dummy data) and Supabase modules, it must be run on a local web server (not just by double-clicking the HTML file).
   • If using VS Code, install the Live Server extension and click "Go Live".
   • Alternatively, use Python: python -m http.server 8000.

• Integration with Google Maps API for real-time location plotting.
• Currency converter for international budget tracking.
• Drag-and-drop reordering for daily activities.
• Social sharing feature to collaborate on trips with friends.

Developed by John Louis F. Feel free to reach out at fjohnlouis2008@gmail.com for any questions or collaboration opportunities.