What happens when you ask a school chatbot, "Who is the Prime Minister of India?" π€
On my school project, it politely says: "I can only answer school-related questions."
That one small rule took my project from "just a website" to something that feels like a real assistant. Let me tell you the story. π
Hi DEV! I'm Chetna, a digital marketing and AI student from Kaithal, Haryana, and this is my first post here. π
I built the website for MDN Global School, Kaithal, and I wanted it to do more than just show information. I wanted visitors to be able to talk to it.
π Try it live: mdnglobalschool.vercel.app It answers questions about the school, and it has a few tricks I'm proud of:
1. It replies in YOUR language
Type in English, you get English. Type in Hindi, you get Hindi. Type in Hinglish, you get Hinglish. No language settings, it just matches you. 2. It stays on topic
Anything outside the school gets a polite "I can only help with school-related questions."
3. It talks back
Every typed reply is also spoken out loud, generated at the same time as the text.
4. You can talk to it too
Tap the mic, speak, and your words turn into text automatically. Then just hit send.
This is my favorite part. Press the tour button, and a robot starts speaking while the whole website scrolls automatically, guiding you through every section like a real tour guide. No clicking, just sit back and watch.
I built this using vibe coding: I told AI tools what I wanted in simple prompts, tested the result, and kept improving it. But the real work was in the decisions. Here is my step-by-step process π
**1. Fix the design first **
Before anything else, I decided the design should suit a school. A school website has to feel trustworthy and welcoming to parents and students, so the look came before the features.
**2. Decide what should (and shouldn't) be clickable **
I went through the whole site and checked every element. Things that should be clickable had to be clearly clickable, and things meant only for reading should not confuse the visitor.
**3. Make it mobile friendly and multipage **
Most parents will open the site on their phone, so I made sure it works well on mobile. The site has multiple pages, and I made sure it still loads properly across all of them.
**4. Fix the chatbot errors (many, many times) **
The chatbot was the hardest part. It threw errors again and again, and I fixed them one by one. Every time something broke, I described the problem to the AI, tested the fix, and tried again. Honestly, this taught me more than anything else in the project.
**5. Plan the robot tour **
This needed real thinking. I had to decide what the robot should say, how the page should scroll, and which pages to show in the tour.
**6. Fix the starting interface **
Last, I polished the first screen visitors see, because that is where they decide if they will stay.
Then I deployed it on Vercel and set up SEO, since I'm also learning digital marketing.
Open the website and try this:
Then tell me in the comments π
I'm still learning, so honest feedback is very welcome! π
π Portfolio: [[https://chetnaportflio.vercel.app/](https://chetnaportflio.vercel.app/)]
π» GitHub: [[https://github.com/chetnaravish](https://github.com/chetnaravish)]
πΌ LinkedIn: [[www.linkedin.com/in/chetnaravish](http://www.linkedin.com/in/chetnaravish)]
πΊ YouTube: [@chetnacreativecore](https://www.youtube.com/@chetnacreativecore)