Travel Dashboard_react

Travel Agency Platform (Dashboard)

📋 Table of Contents

1. ✨ Introduction
2. ⚙️ Tech Stack
3. 📝 Features
4. 🚀 Quick Start

✨ Introduction

[EN] A modern travel agency platform with an admin dashboard and public site. Generate AI-powered trip itineraries based on country, travel style, interests, group type, and budget.

[FR] Une plateforme moderne d'agence de voyage avec un tableau de bord administrateur et un site public. Générez des itinéraires de voyage alimentés par l'IA en fonction du pays, du style de voyage, des centres d’intérêt, du type de groupe et du budget.

⚙️ Tech Stack

• Appwrite is an open-source backend-as-a-service platform that offers features like authentication, databases, and storage, simplifying backend development for web and mobile applications.

• Google Gemini API is Google's generative AI platform, providing advanced models capable of understanding and generating text, images, audio, and video, integrated into various Google services.

• React 19 is the latest version of the popular JavaScript library for building user interfaces, introducing features like Server Components, the use hook for asynchronous data, and enhanced form handling.

• React Router v7 is a routing library for React applications that brings features from Remix back into React Router, offering improved type safety, server rendering, and bundle splitting.

• Stripe is a financial services and software company that provides payment processing solutions for online and in-person transactions, offering APIs for payments, billing, and fraud prevention.

• Syncfusion offers a comprehensive suite of UI components and frameworks for building web, mobile, and desktop applications, supporting platforms like .NET, JavaScript, Angular, React, and Vue.

• Tailwind CSS is a utility-first CSS framework that enables developers to build custom user interfaces rapidly by applying predefined utility classes directly in HTML.

• TypeScript is a statically typed superset of JavaScript developed by Microsoft, enhancing code quality and maintainability by adding optional type annotations.

• Vite is a modern build tool and development server for web projects, offering fast startup times and hot module replacement by leveraging native ES modules in the browser.

If you need further information or assistance with any of these technologies, feel free to ask!

📝 Features

👉 AI-powered trip itinerary generator

👉 Trip booking functionality on the public website

👉 Admin dashboard with trip and user management

👉 User growth metrics and trip analytics

👉 Interactive charts and trip statistics table

👉 Detailed trip overview

👉 Responsive UI with a modern design

👉 Secure user authentication and data management

👉 Modular code architecture with reusable components

and many more, built for scalability and a smooth user experience.

🚀 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone {git repository link}

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

VITE_SYNCFUSION_LICENSE_KEY=

VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_API_ENDPOINT=
VITE_APPWRITE_API_KEY=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_USERS_COLLECTION_ID=
VITE_APPWRITE_ITINERARY_COLLECTION_ID=

STRIPE_SECRET_KEY=
GEMINI_API_KEY=
UNSPLASH_ACCESS_KEY=
VITE_BASE_URL="http://localhost:5173"

Replace the placeholder values with your actual Syncfusion, Appwrite, Gemini AI, Sentry, Stripe, and Unsplash credentials.

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.