Inspiration
The Maha Kumbh Mela is not just a festival—it’s the world’s largest peaceful gathering. With over 100 million people attending, it amazed me how something so vast and spiritual still lacked a centralized digital guide to help people navigate the chaos and stay safe. That realization sparked the idea to create a dedicated website to serve as a one-stop platform for information, help, and navigation during the event.
What it does
My website is an all-in-one digital guide for the Maha Kumbh Mela, designed to help visitors stay informed, safe, and spiritually connected. It provides:
📍 Location Details – Where the Kumbh is held (Prayagraj, Haridwar, Nashik, Ujjain)
📅 Event Calendar – Important bathing dates, travel recommendations, and crowd insights
🏨 Accommodation Info – Where to stay, including hotels, camps, and dharamshalas
🆘 Emergency Contacts – Quick access to helplines for medical aid, police, lost & found, etc.
🌐 Live Interactive Map – Highlights ghats, emergency tents, toilets, and campsites
💬 AI Chatbot Support – Assists users with questions in English and Hindi
🛕 Intro Animation – A 30-second spiritual animation sets the mood before entering the site
🧭 Tourist Spots Guide – Key spiritual and cultural places to visit nearby
How we built it
We built the website using a combination of Bolt and Canva, ensuring both functionality and visual appeal.
⚡ Bolt was used to handle the technical aspects—structuring content, integrating the chatbot, adding a live map, and ensuring the site is responsive and interactive.
🎨 Canva was used to design the intro animation, icons, banners, and overall visual assets. It helped create a clean, spiritual, and user-friendly interface that appeals to all age groups.
Challenges we ran into
- Integrating Tailwind CSS on BOLT While BOLT made web structuring efficient, integrating Tailwind CSS was a challenge. Since BOLT has its own way of handling component styling, getting Tailwind to work required multiple workarounds and custom setups. It took time to ensure utility classes were applied correctly without breaking the layout.
🌐 2. Deployment Issues Deploying the project on BOLT wasn't as smooth as expected. Some assets didn’t load properly during initial deployment due to path issues and environment-specific configurations. Debugging deployment logs and ensuring the live chatbot and map APIs worked consistently was a time-consuming task.
Accomplishments that we're proud of
✅ Successfully completing the entire project within the BOLT Hackathon deadline, while maintaining a clear structure and smooth user experience.
🌐 Integrating APIs for the first time, including Google Maps and a real-time chatbot, which added dynamic functionality to the site.
🤖 Building and embedding a multilingual chatbot, capable of helping users in both English and Hindi with event-specific queries.
🗺️ Implementing a live interactive map, showcasing ghats, emergency zones, and facilities—making the platform truly helpful for real-world navigation.
🚀 Deploying our first full-stack functional site using BOLT and external tools like Canva and Dialogflow—all from scratch!
What we learned
💡 How to Build End-to-End Web Applications We learned how to go from idea to execution—structuring a multi-page informational site with maps, animations, and chatbot support.
⚡ Using the BOLT Platform This was our first time building with BOLT, and we learned how to organize code, manage deployment, and integrate third-party services within its environment.
🤖 Integrating APIs (Google Maps & Dialogflow) We understood how APIs work in real projects, especially how to embed a live map and a chatbot that answers real-time queries.
🧠 Designing for Real Users We focused on making the site accessible, mobile-friendly, and intuitive for users visiting the Maha Kumbh—who might be from different age groups or language backgrounds.
🎨 UI/UX with Canva We learned how to make impactful and spiritual design elements using tools like Canva, which added a cultural and aesthetic layer to our project.
🔍 Debugging & Problem Solving We faced real-time issues like deployment errors and Tailwind conflicts, which helped us improve our troubleshooting skills under pressure.
📝 Crafting AI Prompts for Site Builders We also learned how to write clear and structured prompts to guide AI tools and no-code builders like BOLT and Canva. Giving a well-defined prompt helped generate animations, layout structures, and even site copy that matched our vision.
What's next for Mandir Mitra
- User Accounts & Personal Dashboards Let users create accounts to save favorite ghats, get personalized darshan timings, and receive SMS alerts during the Kumbh Mela.
🌐 2. Multi-Language Support Expand beyond English and Hindi to support Marathi, Gujarati, Bengali, and more—so pilgrims from across India feel included.
📱 3. Progressive Web App (PWA) Version Develop a lightweight, offline-friendly mobile app version to support users with low connectivity during the Mela.
🗣️ 4. Voice Assistant Integration Integrate voice command support using tools like Google Assistant SDK so users can speak queries like “Where is the nearest ghat?” or “Call the medical tent.”
🧭 5. Live Crowd Monitoring System Use crowd density heatmaps (via AI or camera feed APIs) to help pilgrims avoid congested areas in real-time.
🤝 6. Tie-ups with Local Authorities Collaborate with the Prayagraj/Nashik Smart City mission or government tourism departments to access official data feeds and push verified announcements.
💰 7. Donation & Seva Booking Allow users to donate online to verified temples or book religious services (like poojas and prasad delivery) securely through the platform.
📢 8. Real-Time Announcements Add a live updates panel for announcements like weather warnings, lost-and-found cases, traffic changes, and Shahi Snan alerts.
Built With
- css
- lucide
- react
- supabase
- tailwind
- typescript
- vite
Log in or sign up for Devpost to join the conversation.