This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
- Vertical Sidebar Dashboard - Collapsible, responsive sidebar for smooth navigation between features and sections.
- Announcements Hub - Share internal updates, urgent alerts, or milestones with sticky notes and scheduled posts.
- Discussion Forums - Reddit-style threaded forums for team conversations, ideas, help threads, and casual banter.
- Events Calendar - Track upcoming and past events within the workspace — visually clean and filterable.
- AI Assistant - Ask questions about office policies, HR rules, or even get it to draft messages and emails.
- Employee Spotlight - Celebrate birthdays, new hires, and top performers with stylized profile cards.
- Goal Tracking - Set personal or team goals, and visually monitor progress over time.
- Freelance Board - Post or browse internal freelance gigs, quick tasks, and cross-team collaborations.
- Stock Market Tracker - Track market trends and mock portfolios right from the dashboard (uses mock data).
Hidden Easter Eggs - Explore the interface to find fun little secrets and surprise interactions hidden throughout the site!
(Can you find them all?? more on my repo ... ).
Demo
Go check out the site!!
Click here for the full GitHub repo...
The Journey of Building this Site
To be honest, this prompt didn’t just make me build a website — it completely rewired how I think about web development.
What started as just another challenge quickly turned into a full-on creative playground. I found myself having so much fun writing the code that I kept improvising, experimenting, and pushing beyond the original idea — just to see how far I could take it.
This hackathon sharpened more than just my technical skills:
It taught me the importance of design thinking — understanding user flow before writing even a line of code.
It made me prototype, plan, break, and rebuild — more than once.
It reminded me that requirement gathering is half the battle — and probably the most underappreciated part.
I realized just how critical modular, reusable code is when you're building something real — not just following a step-by-step tutorial. I’m still learning and refining that skill, but this project gave me a much deeper appreciation for clean architecture and scalable design.
And perhaps most unexpectedly, it threw me into debugging real-time bugs and handling unexpected production-like issues — layout glitches, unexpected data rendering, edge-case component failures. I got a taste of what it’s like to not just build, but maintain and stabilize.
But above all… it was fun!
I treated parts of this project like an experiment — “What’s the worst that could happen?” became my mantra. I even added a few hidden easter eggs in the site to satisfy my curiosity and experimenting with the session storage.
This was also a great opportunity to repolish my frontend skills and rebuild confidence in thinking like a product developer, not just a coder.
I chose React because it gave me the flexibility to build scalable components that could grow with the project. I stuck to the core stack — HTML, CSS, and JavaScript — as required, but layered it with smart tools like Tailwind and Lucide to speed up development and bring polish to the UI.
Thankful for the opportunity to explore, build, and grow — it pushed me out of my comfort zone in the best possible way.
Top comments (0)