DREAMTRIP

Crafting Your Perfect Journey, Seamlessly.

Built with the tools and technologies:

▶️ Watch Demo Video ◀

🔗 Table of Contents

• 📍 Overview
• 👾 Features
• 📁 Project Structure
  • 📂 Project Index
• 🚀 Getting Started
  • ☑️ Prerequisites
  • ⚙️ Installation
  • 🤖 Usage
• 🔰 Contributing
• 🎗 License

---

📍 Overview

DreamTrip is an AI-powered travel planning application that leverages a multi-agent architecture to generate personalized travel itineraries. It combines insights from weather analysis, local expertise, and logistical planning to deliver curated trips based on your preferences. The system uses a React + TypeScript frontend, and a Python backend powered by Flask and CrewAI.

---

👾 Features

Feature	Description
🧠 AI-Driven Itineraries	DreamTrip uses the OpenAI GPT-4o model to generate highly personalized and context-aware travel plans. By analyzing input like destination, travel dates, budget, and traveler type, the AI delivers comprehensive, human-like trip suggestions.
👥 Multi-Agent Architecture	Powered by the CrewAI library, the backend organizes logic into modular agents like WeatherResearcher, LocalExpert, and TravelPlanner. These agents collaborate autonomously to generate itineraries in a structured and efficient way.
🧰 Modern Tech Stack	- Frontend: Built using React, styled with Tailwind CSS, and bundled with Vite for rapid development and hot module reloading. - Backend: Implemented with Flask, which handles HTTP requests and coordinates the AI-driven planning workflow.
🔗 API Integration	The frontend communicates with the backend via Axios, enabling seamless POST requests to trigger AI-driven itinerary creation and return formatted results.
🔤 Type-Safe Codebase	The project uses TypeScript throughout the frontend for strict type-checking, better tooling, and improved maintainability of component-based architecture.
🔄 Responsive Interaction	Form-based user input is collected via custom React components, passed to the backend, and dynamically rendered with Markdown formatting for clarity and rich display.
🧩 Modularity & Scalability	The project’s architecture separates backend agents, tasks, and config files from the frontend UI components, allowing each part to scale independently and be tested in isolation.

---

📁 Project Structure

└── DreamTrip/
    ├── LICENSE
    ├── README.md
    ├── backend
    │   ├── app
    │   │   ├── .gitignore
    │   │   ├── README.md
    │   │   ├── knowledge
    │   │   │   └── user_preference.txt
    │   │   ├── pyproject.toml
    │   │   ├── src
    │   │   │   └── app
    │   │   │       ├── __init__.py
    │   │   │       ├── config
    │   │   │       │   ├── tasks.yaml
    │   │   │       │   └── agents.yaml
    │   │   │       ├── crew.py
    │   │   │       ├── main.py
    │   │   │       └── tools
    │   │   └── uv.lock
    │   └── flask_app.py
    └── frontend
        ├── .gitignore
        ├── README.md
        ├── eslint.config.js
        ├── index.html
        ├── package-lock.json
        ├── package.json
        ├── postcss.config.js
        ├── public
        │   └── compass.png
        ├── src
        │   ├── App.css
        │   ├── App.tsx
        │   ├── components
        │   │   ├── Header.tsx
        │   │   ├── ItineraryResults.tsx
        │   │   ├── LoadingIndicator.tsx
        │   │   └── TravelForm.tsx
        │   ├── index.css
        │   ├── main.tsx
        │   ├── services
        │   │   └── api.ts
        │   └── vite-env.d.ts
        ├── tailwind.config.js
        ├── tsconfig.app.json
        ├── tsconfig.json
        ├── tsconfig.node.json
        └── vite.config.ts

📂 Project Index

DREAMTRIP/

__root__

backend

flask_app.py

- Backend/flask_app.py serves as the interface for the application, enabling the creation of trip itineraries through a Flask-based web service - It defines an endpoint that processes POST requests to generate and return trip plans, handling exceptions by returning error messages in JSON format.

app

pyproject.toml

- Defines the configuration for the AI-powered travel planner application, specifying metadata such as the project name, version, and description - It sets Python version requirements, lists dependencies necessary for the project, and outlines scripts for various operations like running, training, and testing the application - Additionally, it configures the build system and integrates with the crewai tool for enhanced functionality.

knowledge

user_preference.txt

- Stores and manages user-specific preferences and profile details, crucial for personalizing user experience within the application - Located in the backend, it supports functionalities related to user settings and preferences, enhancing the system's ability to tailor services and recommendations based on individual user profiles and interests, particularly in the AI and technology domain.

src

app

main.py

- Main.py serves as the operational core for initiating and testing the functionality of the TripAgents crew module within the backend architecture - It facilitates the execution of travel planning processes, handling inputs to generate trip details and managing exceptions during the operation - Additionally, it provides a testing framework to validate the crew's performance under specified conditions.

crew.py

- Defines and configures a set of agents and tasks within the TripAgents class to facilitate the operations of a travel planning application - It establishes agents such as weather researcher, local expert, and travel planner, each equipped with specific tools and tasks, orchestrated in a sequential process to optimize trip planning activities.

config

tasks.yaml

- Defines task configurations for a travel planning application, specifying roles such as a weather researcher, local expert, and travel planner - Each role is responsible for generating detailed, actionable outputs like weather reports, attraction recommendations, and comprehensive travel itineraries, enhancing the user's travel experience by providing tailored information based on specific inputs like destination, date range, and budget.

agents.yaml

- Defines roles and objectives for three specialized agents within the application: a weather researcher providing detailed meteorological insights, a local expert offering tailored travel and cultural advice, and a travel planner designing personalized itineraries - Each agent's role is crucial in delivering comprehensive, context-specific services to users, enhancing the overall functionality of the travel planning platform.

frontend

postcss.config.js	- Configures PostCSS to integrate Tailwind CSS and Autoprefixer into the frontend development workflow - This setup enhances CSS management by automatically adding vendor prefixes and utilizing utility-first classes, ensuring style consistency and compatibility across different browsers within the project's frontend architecture.
tsconfig.node.json	- Configures TypeScript compiler options for the frontend's Node.js environment, focusing on strict type-checking and module resolution tailored for bundling - It enhances code quality and maintainability by enforcing rules against unused variables, parameters, and unchecked import side effects, specifically including settings for the Vite configuration.
package-lock.json	- The file `frontend/package-lock.json` serves a critical role in the management and consistency of dependencies within the frontend module of the project - This file locks down the exact versions of the npm packages that the project depends on, ensuring that all environments use the same versions, thereby avoiding discrepancies and potential bugs related to version mismatches. The dependencies listed in the file, such as React, Axios, and Tailwind CSS via Vite, indicate that the frontend is built using React and styled with Tailwind CSS, with Axios used for making HTTP requests - This setup suggests a modern, interactive web application that likely relies on API calls for dynamic content. Overall, this file is essential for maintaining the stability and reliability of the frontend's build process, contributing to the robust architecture of the entire codebase by ensuring that all developers and deployment environments operate with a consistent set of dependencies.
tsconfig.json	- Manages TypeScript configuration settings for the frontend module by referencing specific configurations for both application and node environments - It ensures that the appropriate TypeScript settings are applied depending on the context in which the code is executed, thereby supporting modular development and maintenance within the project's architecture.
tailwind.config.js	- Configures Tailwind CSS for the frontend, specifying which HTML and JavaScript files should utilize Tailwind's utility classes - It sets up the basic theming structure, allowing for future extensions, and currently does not integrate any additional plugins - This configuration is crucial for maintaining consistent styling across the frontend components of the application.
tsconfig.app.json	- Configures TypeScript compiler options for the frontend application, targeting modern JavaScript features and optimizing for React development - It enforces strict type-checking and linting rules to maintain code quality, while excluding code generation to streamline the build process - The configuration specifically includes the project's source directory for TypeScript compilation.
package.json	- Serves as the configuration backbone for the frontend module of the project, defining dependencies and scripts essential for development, building, and testing - It supports the React framework integration with tools like Vite for efficient bundling and TailwindCSS for styling, ensuring a streamlined development environment and robust build processes for the frontend architecture.
vite.config.ts	- Configures the Vite build tool for the frontend application, specifically integrating React support through plugins - It sets up the development environment to efficiently handle React components, enhancing the project's build performance and developer experience - This configuration is crucial for streamlining the development process within the broader architecture of the web application.
index.html	- Serves as the entry point for the DreamTrip web application, initializing the user interface - It sets up the HTML structure, incorporates essential metadata, links the favicon, and ensures responsiveness across devices - The document also connects the main TypeScript application logic from /src/main.tsx to facilitate dynamic content rendering within the web environment.
eslint.config.js	- Configures ESLint for the frontend, integrating TypeScript and React specific rules to ensure code quality and consistency - It sets up linting for TypeScript files, incorporates global browser settings, and applies recommended configurations for React hooks and component export practices - This setup helps maintain clean and efficient code across the frontend development environment.

src

main.tsx	- Initializes the React application by setting up the root component within a strict mode context - It imports essential styles and the main App component, then mounts it to the DOM - This setup ensures a robust, error-checked environment for the application's user interface, serving as the entry point for the frontend architecture.
index.css	- Integrates Tailwind CSS into the frontend architecture, establishing foundational styles, component-level designs, and utility classes for responsive layout management - It also introduces custom animations and sets a global font and background color, ensuring a consistent visual experience across the web application - This CSS file is pivotal for the aesthetic and functional styling of the user interface.
App.css	- Frontend/src/App.css is responsible for defining the visual style and layout of the user interface in the application - It ensures a consistent and appealing aesthetic across different components and pages, enhancing user experience and interaction - This CSS file plays a crucial role in maintaining the design integrity throughout the frontend architecture.
App.tsx	- App.tsx serves as the primary user interface component in the frontend architecture, managing the travel planning process - It integrates user inputs through TravelForm, displays loading states, handles API interactions for trip planning, and presents results or errors via ItineraryResults and dynamic messages, enhancing user experience and interaction efficiency.
vite-env.d.ts	- Enables seamless integration of Vite tooling within the project's frontend development environment - By referencing Vite's client types, it ensures that TypeScript can correctly recognize and utilize Vite-specific features, enhancing the development experience with improved tool support and configuration capabilities in the context of the broader codebase architecture.

components

ItineraryResults.tsx	- ItineraryResults.tsx serves as a dynamic component within the frontend architecture, rendering personalized travel itineraries - It displays key travel details such as destination, traveler type, and budget, and formats the itinerary content using Markdown for enhanced readability and presentation - This component updates only when a new itinerary is received, ensuring data consistency.
Header.tsx	- Provides the visual and interactive front-end component for the application's main header - It integrates branding elements like the logo and tagline, and features a visually appealing design with dynamic backgrounds and responsive layout adjustments - This component sets the tone for user engagement and outlines the core functionality of the AI-powered travel planner.
LoadingIndicator.tsx	- Provides a visual feedback mechanism through a LoadingIndicator component, essential for enhancing user experience during asynchronous operations - It displays a spinning animation and messages to inform users that their personalized travel itinerary is being generated, ensuring clarity and engagement while the backend processes are completed - This component is a critical part of the frontend's interactive elements.
TravelForm.tsx	- TravelForm.tsx serves as a user interface component within the frontend architecture, enabling users to input and submit travel-related data such as dates, destination, traveler type, and budget - It facilitates dynamic interaction through form elements, ensuring users can plan and customize their travel itinerary effectively.

services

api.ts

- Manages communication with the backend server for trip planning functionalities in the application - It utilizes Axios to handle HTTP requests, specifically to post trip details such as destination, dates, and budget, and processes responses or errors accordingly to facilitate user interactions with trip planning features.

---

🚀 Getting Started

☑️ Prerequisites

Before you begin, ensure your development environment includes:

• Node.js (v18+ recommended)
• npm or pnpm
• Python (3.10+ recommended)
• Optional: uv or poetry for Python dependency management

---

⚙️ Installation

1. Clone the repository

git clone https://github.com/maciekmalachowski/DreamTrip

2. Navigate to the project directory:

cd DreamTrip

3. Install Backend Dependencies:

cd backend
pip install -r requirements.txt

4. Create a .env file in the backend/ folder with the following API keys:

MODEL=gpt-4o
SERPER_API_KEY=your_api_key_here
OPENAI_API_KEY=your_api_key_here

5. Go back and navigate to frontend and install the project dependencies:

Using npm  

npm install

---

🤖 Usage

Run Backend:

Navigate to the backend folder and start the Flask server:

cd backend
flask --app flask_app.py run

Backend will run on http://localhost:5000 with Flask-CORS enabled to match requests from the frontend.

Run Frontend:

Open a new terminal window and start the frontend:

cd frontend
npm run dev

Frontend will run on http://localhost:5173.

---

🔧 API Endpoints

Method	Endpoint	Description
POST	/plan-trip	Accepts user input (destination, dates, traveler type, budget) and returns a personalized AI-generated travel itinerary.

---

🔰 Contributing

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your github account.
2. Clone Locally: Clone the forked repository to your local machine using a git client.

   git clone https://github.com/maciekmalachowski/DreamTrip

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to github: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Contributor Graph

---

🎗 License

This project is protected under the MIT License.

---