YatraMitra is a government-backed, cloud-native platform designed to help tourists, governments, and local communities make smarter, eco-conscious, and personalized travel decisions — all in a single trusted app.
Access the live site here: https://yatramitra.netlify.app
Tourists and citizens face challenges like:
- Fragmented travel information
- Lack of personalized guidance
- Weak promotion of sustainable tourism
- Limited data-driven insights
Governments struggle with:
- Efficient resource utilization
- Economic leakage from tourism
- Lack of policy-making insights
YatraMitra bridges these gaps by offering:
- Personalized itineraries
- Budget-friendly and safe planning
- Eco-conscious travel recommendations
- Comprehensive tourism data analytics
- Smarter policymaking
- Support for regional development and sustainability
- Promotion of remote and underutilized destinations
- Support for SMEs and local businesses
- Dynamic Trip Planner – Plan trips by budget, destination, and duration
- Interactive Dashboard – Provides governments with actionable insights
- Sustainability Focus – Encourages eco-conscious travel choices
- Local Business Promotion – Highlight hidden gems and SMEs
- Mobile-First Experience – Fully responsive and user-friendly
| Layer | Technology |
|---|---|
| Frontend | React, Vite, Tailwind CSS, Framer Motion |
| Backend | Netlify functions |
| Database | MongoDB |
| Cloud & Deployment | Netlify |
| APIs | Government Tourism APIs, Maps & Geolocation |
| Security | HTTPS, GDPR-compliant |
The project uses the following React components:
Navbar.jsx– Navigation bar with responsive menuHero.jsx– Hero section with trip planner form and main illustrationDestination.jsx– Destination selection and detailsFeatures.jsx– Showcase of app featuresHowItWorks.jsx– Step-by-step guide for using the appHiddenGems.jsx– Highlighting remote and underutilized destinationsImpact.jsx– Shows the social, economic, and environmental impactFooter.jsx– Footer with links, contact, and social media
The project also contains:
index.cssandapp.cssinsrc/for global and app-specific styling.
All components use Tailwind CSS for styling and Framer Motion for smooth animations.
Yatramitra/
├── public/images
├── src/
│ ├── components/
│ │ ├── Navbar.jsx
│ │ ├── Hero.jsx
│ │ ├── Destination.jsx
│ │ ├── Features.jsx
│ │ ├── HowItWorks.jsx
│ │ ├── HiddenGems.jsx
│ │ ├── Impact.jsx
│ │ └── Footer.jsx
│ ├── index.css
│ ├── app.css
│ ├── App.jsx
│ └── main.jsx
├── package.json
└── README.md
- Clone the repository:
git clone https://github.com/your-username/yatra-mitra.git- Install dependencies:
cd yatra-mitra
npm install- Start the development server:
npm run dev- Open your browser at http://localhost:5173
Or access the live site at https://yatramitra.netlify.app
- AI-based personalized trip recommendations
- Offline travel mode for remote areas
- Real-time tourist sentiment analysis for governments
- Gamified eco-tourism badges and rewards