This is a submission for the GitHub Copilot Challenge: New Beginnings
🚀 What I Built
Well, just to make things simpler, its called Anonymous Guard. I just made a short naming version, "AnonGuard" (big names mess up the CSS :)).
So why I built it? Well, here we go...
Have you guys ever witnessed something suspicious but hesitated to report it? You're not alone!(Being an introvert or scared doesn't matter.) That's why I built AnonGuard—a secure, anonymous crime reporting platform that empowers citizens while protecting their identity.
I know that was a pretty short reason so how about giving the website a try and judge it on whatever basis you like (Don't be harsh 👺)?
Now let's talk about the architecture and see what was used to make this:
✨ Key Features:
- 🔒 Anonymous reporting system
- 🤖 AI-powered incident analysis using Gemini
- 📍 Location tracking (opt-in)
- 🚨 Emergency/Non-Emergency categorization
- 📊 Admin dashboard for authorities
- 🔍 Report tracking system
🛠️ Tech Stack:
- Next.js 14 (App Router)
- TypeScript
- Prisma ORM
- PostgreSQL (Neon)
- Google Gemini API
- NextAuth.js
- Framer Motion
- Tailwind CSS
You guys probably know about all this tech stack and stuff, so let's cut the chase and provide you with the actual product 💪:
🎥 Demo
Live Demo: AnonGuard
Youtube Link (Disclaimer: Its noisy): AnonGuard
And here are some screenshots if you don't want to exhaust the data limit 😆:
💻 Repository
🤖 Copilot Experience
The Good, The Bad, and The AI
Working with GitHub Copilot was like having a pair programmer who never sleeps (but occasionally hallucinates 😅).:
This is going to be a bit formal and direct; if you guys want the fun version, then check out Prompt.txt in my repo.👻
Anyway, here we go:
🎯 Initial Setup
Copilot helped scaffold the project structure and basic components. Though it occasionally forgot HTML tags (looking at you, layout.tsx!), it provided a solid foundation.
💫 Animation Magic
The real MVP moment was when Copilot generated complex framer motion animations. One prompt: "Improve the styling of the navbar.tsx component. Make it better at responsiveness at different screen sizes. Also include some animation effects"—and" boom! A beautiful, responsive navbar.
🔐 Authentication Flow
Copilot helped implement NextAuth with proper TypeScript types (after some gentle nudging). It even caught potential security issues I hadn't considered.
🤔 Interesting Challenges
- Database Schema: Copilot suggested an optimized Prisma schema based on the components we built
- Error Handling: Generated comprehensive error boundaries and loading states
- Type Safety: Helped fix TypeScript errors, though sometimes needed guidance
🎭 Most Amusing Copilot Moment
When asked to implement location tracking after MapBox integration failed, Copilot suggested using the browser's geolocation API - a simple yet effective solution I hadn't considered!
🔮 GitHub Models
While building AnonGuard, I primarily used Claude 3.5 Sonnet model through Copilot. It excelled at:
- Code generation
- Bug fixing
- Suggesting optimizations
- Documentation
- TypeScript type definitions
🌟 Conclusion
Building AnonGuard with GitHub Copilot was an eye-opening experience. The tool not only accelerated development but also introduced me to better coding patterns and practices. And personally for me, it was great for the design and the user experience part, but for pure logic-based coding like the created backend, I had to do some manual intervention to keep the code from falling out 🤐.
🎯 Impact
AnonGuard aims to bridge the gap between citizens and law enforcement, making our communities safer while protecting privacy. The project demonstrates how AI can be used to build socially impactful applications.
📚 Lessons Learned
- AI is a powerful ally but needs human oversight
- Start with proper planning (thanks for the structure, Copilot!)
- Test early, test often (especially with AI-generated code)
- Keep security in mind from day one.
Here's to using AI to make the world a little safer, one anonymous report at a time! 🚀
#devchallenge #githubchallenge #webdev #ai #security
Top comments (0)