A modern, full-stack trip planning application built with Vite, React Router 7, TypeScript, and TailwindCSS. This project was inspired by a YouTube tutorial and enhanced with additional features and functionality.
Check out the live application at: TourPlan
This project was initially developed following the tutorial: Build a Travel Website with React
The project was then expanded using the figma file and github repository provided through this link.
- 🚀 Server-side rendering with React Router
- ⚡️ Hot Module Replacement (HMR)
- 📦 Asset bundling and optimization
- 🔄 Data loading and mutations
- 🔒 TypeScript by default
- 🎉 TailwindCSS for styling
- 📊 Interactive trip cards and statistics
- 🗺️ Location-based trip information
- 💳 Stripe payment integration with payment links
- 📱 Responsive design for all devices
- 👤 User trip creation and management
- 💰 Paid trip tracking and analytics
- 📈 Dashboard with trip statistics
- 🛠️ Appwrite for database management
- 🚨 Sentry for error tracking and monitoring
- 🤖 Google Generative AI for intelligent trip plan generation
- Frontend: React 19, TypeScript, TailwindCSS
- Backend: React Router 7
- Database: Appwrite
- UI Components: Syncfusion React Components
- Payment Processing: Stripe
- Error Tracking: Sentry
- Deployment: Vercel
- TripCard: Displays trip information with image, location, price, and tags
- NavItems: Navigation menu items
- RootNavbar: Main navigation bar
- StatsCard: Displays trip statistics
- InfoPill: Small information display component
- MobileSidebar: Mobile navigation menu
- GlobalSpinner: Loading indicator
- CreateTrip: User trip creation interface
- PaidTrips: Payment processing and tracking
- Dashboard: Trip analytics and statistics
- Trip Creation: Users can create and manage their own trips
- Payment Integration: Stripe payment links for each trip
- User Tracking: Track paid users for each trip
- Trip Analytics: Monitor trip creation and payment statistics
- Dashboard Updates: Real-time statistics and analytics
- Node.js (v20 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/JacceyCode/tour-plan.git
cd tour-plan- Install the dependencies:
npm installStart the development server with HMR:
npm run devYour application will be available at http://localhost:5173.
Create a production build:
npm run buildThe application is deployed on Vercel. To deploy your own version:
- Create a Vercel account
- Connect your GitHub repository
- Configure environment variables
- Deploy
Feel free to submit issues and enhancement requests.
This project is licensed under the MIT License.
Built with ❤️ by @JacceyCode using React Router and inspired by this tutorial. Thank you.