SphereConnect: Creating Team Vibes for Axero’s Intranet Challenge

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

Meet SphereConnect! It’s an intranet dashboard I created for Axero’s “Holistic Webdev: Office Space” challenge, and honestly, I had way too much fun building it. Think of it as your team’s digital meeting place where working together feels natural instead of forced.

Why SphereConnect? Because I wanted something that showed how it brings people together in one connected space, like a digital circle where ideas flow freely and everyone stays connected. Perfect match for what Axero had in mind!

Demo

Explore SphereConnect live!

🌐 Live Demo: SphereConnect

📂 GitHub Repo: github.com/highflyer910/sphereconnect

Screenshots

Dark Theme:

Light Theme:

Mobile View: A responsive 1-column layout, ensuring usability on the go.

My Development Adventure

Building SphereConnect was like putting together a fun puzzle – each piece had to work perfectly with the others while making teams’ lives easier. Let me walk you through how it all came together!

The name

Choosing SphereConnect was pretty fun. I kept thinking about how the best workspaces feel like this connected space where everyone understands each other and ideas flow naturally. Plus, it sounds modern and friendly, exactly what I was going for!

Process

1. The Big Picture: I read Axero’s requirements and got excited about creating something that would make people want to use their intranet. I planned out widgets for Announcements, Events, Team Spotlight, New Hires, Quick Resources, Tasks, and even a dual-mode Chat system. Oh, and that Welcome section with live weather? That was my “let’s make this personal” moment.

2. My Toolkit:

   • Vite-React (because life’s too short for slow builds:))
   • Material-UI (MUI) (consistent and beautiful)
   • Lucide-React (clean icons)
   • WeatherAPI.com
   • Vercel Analytics (gotta know if people use this thing!)

3. Making It Pretty:

   • Theme toggle was a must-have since some people prefer light mode, others prefer dark mode
   • Added small hover effects and smooth animations because details matter
   • Used a widget-based layout that feels familiar but not boring

4. Development:

   • Welcome Section: Greets you with real weather and time (with a simple “allow location” button for privacy-conscious users)
   • Chat Widget: Team chat for those “quick question” moments, plus an AI Assistant (though it’s fake AI for now)
   • Quick Resources: One-click access to all the tools you use – Time Tracker, Launch Pad, you name it
   • Personal Touch: Resources that change based on who’s logged in, including some of my dev.to posts
   • Tasks Section: Create, track, and remember your tasks (thanks, localStorage!)
   • Team Spotlight: A slideshow that makes everyone feel special
   • New Hire Welcome: Because starting somewhere new shouldn’t feel scary

5. Accessibility:

   • Made sure it works well with screen readers and keyboard navigation
   • Added alt text for avatars and icons.

6. Responsiveness:

   • Responsive grid that goes from 3 columns to 2 to 1 as screens get smaller
   • Tested on my phone, tablet, laptop, and it works everywhere!

7. Testing: Clicked every button, tried every feature, and tested it on many different browsers.

What This Taught Me

• Vite is amazing: The development speed is so much faster
• MUI Theming is Powerful: Once you learn it, you can make everything look exactly how you want
• Accessibility Matters: Making sure everyone can use your site is important
• Responsive Design takes time: Getting those screen size changes just right took longer than expected, but it was worth it

Future Plans

• Real Navigation: Those navbar links need React Router to work
• Actual AI: Time to replace the fake responses with a real language model
• Multiple Languages: Adding language options because good design shouldn’t be limited by language

Thanks to Axero

Huge thanks to Axero for creating such an inspiring challenge! It made me think beyond just “another dashboard” and consider what makes teams work well together. Plus, I got to build something I’m genuinely proud of, which is always great.

The Legal Stuff: MIT License for the open-source community, and Axero gets to showcase this work while I keep ownership. Fair deal all around!

Thanks for taking the time to check out SphereConnect! Building it was fun, and I hope exploring it brings a little joy to your day.✨