📋 Table of Contents
🤖 Introduction
⚙️ Tech Stack
🔋 Features
🤸 Quick Start
🕸️ Snippets (Code to Copy)
🔗 Assets
🚀 More
If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!
🤖 Introduction 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 — and book trips with ease.
If you're getting started and need assistance or face any bugs, join our active Discord community with over 50k+ members. It's a place where people help each other out.
⚙️ Tech Stack Syncfusion React Router v7 (framework mode) Appwrite Tailwind CSS Vite React 19 🔋 Features Features of the Travel Agency Project 👉 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 https://github.com/Aayush-devops/library-dashboard.git cd travel-agency-dashboard 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 credentials. Syncfusion
Appwrite
Gemini AI
Sentry
Stripe
Unsplash
Running the Project
npm run dev Open http://localhost:5173 in your browser to view the project.
🕸️ Snippets app.css constants/index.ts index.d.ts app/lib/utils.ts npm install syncfusion dashboardStats (dummy) allTrips (dummy) users (dummy) Create Trip Prompt app/appwrite/auth.ts app/routes/admin/create-trip.tsx app/appwrite/dashboard.ts app/routes/admin/dashboard.tsx
Replace the placeholder values with your actual credentials. Syncfusion
Appwrite
Gemini AI
Sentry
Stripe
Unsplash
Running the Project
npm run dev Open http://localhost:5173 in your browser to view the project.
🕸️ Snippets app.css constants/index.ts index.d.ts app/lib/utils.ts npm install syncfusion dashboardStats (dummy) allTrips (dummy) users (dummy) Create Trip Prompt app/appwrite/auth.ts app/routes/admin/create-trip.tsx app/appwrite/dashboard.ts app/routes/admin/dashboard.tsx 🔗 Assets Assets used in the project can be found here Video Kit Banner 🚀 More Advance your skills with Next.js Pro Course
Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!
Project Banner