This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What We Built
Hey everyone! We’re pumped to share NexaWorks, an office intranet we built to make work life smoother and more connected, whether you’re in the office or working from your couch. Using Next.js, Tailwind CSS, ShadCN/UI, TypeScript, and Lucide React for icons, we created a clean, user-friendly, and welcoming hub. Our goal was to give employees quick access to updates, tasks, and team info with a professional yet approachable vibe.
Here’s what you’ll find in NexaWorks:
Theme Switcher: A light/dark mode toggle in the navbar, because dark mode is just awesome.
Team Spotlight: Shows off team members with photos, bios, and roles, styled in a neat grid with “View Profile” buttons.
Event Calendar: Highlights upcoming events like workshops, with cards that fit right in with the site’s look.
Resource Center: Quick links to company docs and tools to get stuff done fast.
Announcements/News: A bar to keep everyone updated with the latest news.
To-Do List: A task tracker with a calendar picker and checkboxes that turn blue (blue-600) when checked—super satisfying to click!
Popular Content: Tracks what learning resources employees are into, encouraging everyone to explore.
Sidebar Nav: A slick, collapsible sidebar that highlights the current page (like “Home” with a blue-500 background and white text) and shows an avatar badge with “5” for unread inbox messages.
Responsive Layout: Looks great on phones, tablets, or desktops, with a grid that shifts from one to four columns.
Profile Options: A dropdown menu for account settings and sign-out, making things easy for users.
We used a blue and orange color scheme—think blue-600 for buttons and checkboxes, and orange-500 for badges—to keep it cohesive and lively.
Demo
Live Demo: Live Demo Link
GitHub Repo: GitHub Repo Link
We skipped embedding a CodePen since NexaWorks is a full Next.js app with server and client components. The live demo on Vercel lets you check out everything, play with the sidebar, click some to-do checkboxes, or explore the team section!
Journey
Building NexaWorks was such a fun ride, with a few bumps along the way! Here’s how we made it happen:
Planning: We mapped out different sections of the homepage, like Welcome, NewsBlogs, UpcomingEvents, ToDoList, TeamSpotlight, and EssentialResources. We focused on making everything modular so it’s easy to add new stuff later.
Tech Stack:
Next.js 15 (App Router) let us mix server-side rendering with interactive features, like the to-do list checkboxes.
Tailwind CSS made styling a breeze, with classes like bg-blue-500 for the sidebar’s active state and text-blue-600/80 for buttons.
ShadCN/UI gave us reusable components (like cards, avatars, and checkboxes) that we tweaked with our blue/orange theme.
TypeScript kept our code solid and error-free.
Lucide React provided clean, consistent icons for the sidebar (Home, Inbox), to-do list (CalendarIcon), and more.
Dark mode was a cool challenge, using next-themes to switch between light and dark styles effortlessly.
Building It:
The Homepage uses a responsive grid (grid-cols-1 sm:grid-cols-2 md:grid-cols-4) with cards styled in bg-primary-foreground.
The Sidebar collapses to icons and highlights the active page (like “Home” with bg-blue-500 text-white) using usePathname.
The To-Do List has a calendar picker and checkboxes that pop in blue-600 when checked, figuring out that dynamic toggle was a win!
The Team Spotlight section shows team members in a clean grid with avatars and badges (bg-orange-100/50 text-orange-500 or bg-blue-100/50 text-blue-600).
Teamwork:
@sifan_g: Led the project, built the sidebar, to-do list, and tied the homepage together.
@mattialavai: Designed the UI/UX, crafted the team and news sections, and kept the look consistent.
We worked on separate Git branches, merging into the main branch with pull requests. A few merge conflicts popped up, but we sorted them out over virtual coffee chats.
Testing: We tested on phones, tablets, and desktops to ensure everything looked sharp and ran fast. Vercel’s analytics and Lighthouse helped us catch slow spots. We added alt text to images (like team avatars and news photos) to make the site more accessible.
Deploying: Pushing it live on Vercel was a big moment, seeing it all come together was so exciting!
What We Learned
Getting Next.js server and client components to work together was tricky but taught us a ton.
Building reusable pieces (like cards and buttons) saved us so much time.
Adding dark mode with Tailwind and next-themes was way easier than we expected.
Git teamwork showed us the importance of clear communication and checking our merges.
Adding alt text and testing accessibility made us think about all users.
Using Vercel and Lighthouse to optimize performance was a game-changer.
What We’re Proud Of
The responsive design, our homepage grid shifting from one to four columns looks awesome on any device.
How @sifan_g and @mattialavai split tasks, making the whole process smooth and fun.
Team Credits
Big shoutout to the team:
@sifan_g – Led the project and coded the sidebar, to-do list, and homepage magic.
@mattialavai – Designed the UI and built the team and news sections with style.
License
We’re sharing NexaWorks under the MIT License so others can build on it. All images are from Pexels, which are free to use.
Axero License Affirmation
We confirm we have all the rights to this submission. We’re cool with Axero using it on their website, marketing, or other channels, as long as they credit us with a link back to this post.
Thanks for checking out NexaWorks! We had a blast building it, and we hope you have fun exploring it!
Top comments (0)