DEV Community

242232 SIVA MADHESH S
242232 SIVA MADHESH S

Posted on

Groom Mate- Amazon Q Developer

#devchallenge #awschallenge #ai #webdev

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: Crushing the Command Line

What I Built

GroomMate is a clean, responsive digital grooming assistant website designed to introduce users to modern grooming concepts and team culture in an engaging way. This web project emphasizes design clarity, interactive UI components, and future-ready features like a cart system.

It was built using HTML, CSS, and JavaScript, and serves as a solid foundation for a grooming-focused digital product or startup.

Key Features

  • ✅ Responsive About Page – Looks great across mobile, tablet, and desktop devices.
  • 🎯 Scroll-Triggered Animations – Brings sections like "Our Story" and "Our Team" to life as users scroll.
  • 🧩 Modular Code – Separated logic and style files (about.css, about.js) for clean structure and scalability.
  • 🛒 Cart Function Hooks – Ready for future shopping or appointment booking integration.
  • 🎨 Modern UI/UX – Minimalist layout using grid systems and subtle hover effects for a pleasant user experience.
  • 💡 Developer-Friendly – Easy to maintain, with logical class names and event-driven scripting.

Demo

🔗 Live Demo – GroomMate Website

Image description
Image description
Image description
Image description
Image description

Code Repository

📂 GitHub Repository – GroomMate

How I Used Amazon Q Developer

I used Amazon Q Developer throughout this project for:

  • 🔍 Getting help on setting up scroll-based animations using getBoundingClientRect()
  • ✨ CSS layout suggestions for creating a responsive grid with graceful fallback
  • 🧠 Code refactoring tips to keep the JavaScript event listeners efficient
  • 🛠 Troubleshooting style conflicts and adding transitions smoothly
  • 🚀 Ideas to modularize features like "team-member" animations and cart logic

Amazon Q Developer helped speed up development and provided useful, real-time coding tips right from the command line interface.

Final Thoughts

This challenge gave me the opportunity to practice front-end structuring and animation principles while using Amazon Q Developer to stay efficient and confident throughout the process.

I'm proud of the simplicity and professionalism of the GroomMate UI, and excited to extend its functionality in future versions—possibly adding product pages, user login, and real-time scheduling.

👩‍💻 Individual Submission

🎓 I'm currently a student and thrilled to participate in this challenge!

Top comments (0)