This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
For this challenge, I built Nenet, a holistic and dynamic intranet dashboard designed to be the central nervous system for a modern organization. My goal was to move beyond a static information portal and create an interactive ecosystem that boosts productivity, enhances communication, and fosters a strong sense of community and engagement among employees.
To bring this vision to life, I chose a modern, high-performance tech stack: Next.js, Tailwind CSS, and shadcn/ui.
Next.js was the ideal framework for its powerful features like Server-Side Rendering (SSR) and file-based routing, ensuring the dashboard is fast, scalable, and provides a seamless user experience.
Tailwind CSS allowed me to rapidly build a custom, responsive, and visually consistent UI without writing custom CSS files. Its utility-first approach was perfect for crafting the complex, widget-based layout of Nenet.
shadcn/ui provided a set of beautifully designed, accessible, and unopinionated components. This allowed me to build the UI quickly while retaining full control over styling and functionality, which was crucial for achieving Nenet's unique look and feel.
Nenet provides a comprehensive, at-a-glance overview of everything an employee needs, from personal tasks to company-wide performance metrics.
Layout & Content
Sidebar Layout
1. Application Name/Logo
At the very top, the name "Nenet." is displayed in a large, bold font, serving as the brand identity for the platform.
2. User Profile Section
This area personalizes the experience for the user.
- Profile Picture: A circular avatar user.
- User Name: The name "Mas'ud Ali" is clearly displayed, identifying the user.
- User Score/Metric: Below the name, there is a star icon next to the number "80.5". This performance metric within the application.
3. Main Menu
This section provides the primary navigation for the application.
Header Layout
On the Left Side:
1. Mini sidebar & open sidebar for mobile Toggle Icon
The icon on the far left, a rectangle with a line, is button to toggle mini sidebar or open sidebar for mobile
2. Search Bar
A prominent search field and placeholder text "Search something...". This allows users to easily find information, documents, or other content within the application. when type in input will showing the result.
On the Right Side:
1. Notifications
A bell icon, which is a universal symbol for notifications. The small red dot on top indicates that the user has new, unread notifications. on click the button will show popover ui and list notification user can mark all read, clear all, and search notifications its all working.
2. Launch pad
The nine-dot grid icon (often called a "waffle menu") on click opens a popover that allows users to open new tab for selected app.
3. Dark mode toggle
User can choose preferences between light and dark mode.
4. Team Members:
Clicking opens a popover with a searchable list of members, showing their avatar, name, birthday, and social media links.
- Avatars: A stacked group of profile pictures representing the users or members of the current team, project, or workspace.
- Member Count: The text "8 members" next to the avatars explicitly states the number of people.
In summary, this header is from a modern, collaborative application. It provides the user with essential tools at a glance: searching, checking notifications, and seeing who is part of their team. The design is project management tools, communication platforms, or company intranets like Slack, Notion, or Microsoft Teams.
Main Layout
1. Welcome Section
This UI is dedicated to greeting the user. It features a personalized, dynamic message. This greeting is contextually aware, appropriately using "Good evening" based on the current time. It also includes a brief description of the platform's purpose and The "Show current tasks" button clicking will show dialog provides a direct shortcut to the user's detailed task list.
2. Weekly Progress
This UI gives a quick, visual summary of the user's productivity. It uses a circular progress bar to show that 52% of the weekly goals have been met, further detailed as "3/6 tasks done". It's a motivational tool that provides immediate feedback on performance.
3. News & Announcement Carousel
Positioned in the top right, this large, eye-catching UI serves as the primary channel for news and announcements. It functions as a carousel, allowing multiple important items to be featured.
4. Projects in Progress
This is a task management module that displays the user's active projects. It uses a stacked card interface, with the top card showing detailed information about task. Avatar in bottom right indicate the reporter you can hover to see detail and contact the reporter.
5. Schedule
This component provides a clear timeline of the user's daily agenda. It lists appointments with specific times (13:00, 14:00, etc.), event titles, and the associated department or team (e.g., "Marketing," "Human Resources"). Avatar in bottom right indicate the reporter you can hover to see detail and contact the reporter.
5. Quick Links
This section provides single-click access to the most important areas of the intranet. It features five clearly labeled buttons: News, Spaces, People, Social Corner, and Handbook. This serves as a secondary, more visual navigation menu.
6. Spaces
"Spaces" are collaborative hubs or communities within the platform. This widget showcases several key spaces like Company Announcement, Human Resources, Information Technology, and the Paris Office. Each space is presented as a card with an icon and description, and a "View more" link allows users to browse all available spaces.
7. Stats
This widget provides high-level business intelligence with clear data visualizations. It includes two charts:
- Project completed: A bar chart showing the trend of completed projects
- New hires: A similar bar chart tracking new employee onboarding over the same period, This offers a transparent view of company growth and productivity.
8. Event
This is a comprehensive module for managing and viewing company events.
The main feature is a tabbed interface allowing users to filter events by Ongoing, Upcoming, and Finished status.
9. Your Performance
This UI provides the user with a private, detailed view of their own work patterns.
- Chart Type: It uses a dual-line graph to compare performance over time.
- Metrics: The Y-axis measures performance in hours (from 0h to 12h), likely representing hours worked or time logged on tasks. The X-axis tracks the days of the month.
- Comparison: The two lines allow for easy comparison between "This month" (dark line) and "Last month" (green line), helping the user identify trends and changes in their daily productivity.
10. Top Performers
This fully-visible is the public-facing side of performance tracking and serves as a powerful tool for gamification and recognition.
- Filtering: It features tabs to filter the leaderboard by different time frames: All Time, Last 30 Days, This Week, and Today..
- Leaderboard: It ranks employees based on a performance score. Each entry includes: The employee's name, photo, and job title
- Their total Score The positive or negative Change in their score over the selected period.
Purpose: This feature fosters motivation and friendly competition by publicly celebrating high achievers. It directly connects to the personal score seen in the user's sidebar profile.
Overall Dashboard Summary
the Nenet dashboard proves to be a comprehensive and well-designed hub for the modern workplace. It masterfully balances:
- Personal Productivity (Welcome message, My Tasks, Your Performance chart).
- Team & Company Collaboration (Spaces, Schedule, Events).
- Information & News (Announcements, News links).
- Performance & Engagement (Stats, Weekly Progress, Top Performers leaderboard).
The consistent design and thoughtful integration of these elements create a single, powerful tool that supports an user throughout their day.
Responsiveness
Responsive design is the practice of building a web that automatically adapts its layout to fit the user's screen size, providing an optimal experience on any device. This image showcases that principle beautifully:
- Desktop and Laptop: On wide screens, the "Nenet" dashboard uses a multi-column layout to display many widgets side-by-side, making full use of the available space.
- Tablet: On the mid-sized tablet screen, the layout intelligently collapses into a single, scrollable column. The content remains large, readable, and easy to interact with via touch.
- Smartphone: On the smallest screen, the layout becomes even more compact and linear. Font sizes, buttons, and spacing are all adjusted to ensure usability on a narrow display.
Desktop Performance: Exceptional Quality
For this i using google page speed insights. in This report shows a near-perfect score for the desktop version of your application. The scores of 99 in Performance and a perfect 100 in Accessibility, Best Practices, and SEO. They prove that the application is extremely fast, fully accessible, and built to the highest professional standards for desktop users.
Mobile Performance: Strong and Responsive
For this i using google page speed insights. he mobile report also demonstrates excellent quality. A Performance score of 87 is very strong for mobile's stricter testing conditions, indicating a fast and responsive user experience. The perfect 100 in Accessibility, Best Practices, and SEO confirm that the application is perfectly optimized for users on any device, showcasing a high-quality, mobile-first approach.
Demo
Live Demo URL: link
Source code : link
Journey
My journey began when I discovered the challenge. I started by researching what an intranet workspace typically looks like. Later, Axero provided some template examples, which gave me a clearer direction and inspiration for the project.
Process
The process began with choosing the tech stack. I decided to use Next.js, as it offers scalability and is well-maintained. Alongside it, I used Tailwind CSS and shadcn/ui for styling and UI components.
I then searched online for UI inspiration and found several designs that worked well together, which helped me shape the overall look and feel. For the content, I referred to Axero’s intranet templates.
After building the core of the project, I reviewed the judging criteria and saw that Accessibility was important. I focused on improving accessibility, optimizing performance, and refining my code.
Finally, I worked on making the design responsive across various devices. I used the ResponsivelyApp to test and adjust the UI for different screen sizes. With everything polished, the project was complete.
What I'm Proud Of
The Polished UI/UX: I invested a lot of time, refining the user interface. I believe the final result is not just functional but also aesthetically pleasing and a joy to use.
The Performance Scores: Seeing scores of 99 on Desktop and a strong 87 on Mobile was incredibly rewarding. It's objective proof that the architectural and technology choices paid off, resulting in a high-quality, professional-grade application.
The Engagement System: I didn't want to build just another information portal. The interconnected system of personal performance charts, weekly progress trackers, and the public "Top Performers" leaderboard was my attempt at creating a truly engaging platform that motivates and recognizes employees.
Team Submission
I worked on this challenge individually.
LICENSE : MIT
I want to extend a huge thank you to Axero and the DEV Community for organizing this challenge. The "Office Edition" theme provided the perfect motivation and a clear, real-world problem to solve. Having a deadline and a community of fellow developers to share with was the catalyst I needed to push this project from a simple idea to a fully-realized, high-performance application. It was a fantastic experience!
Top comments (2)
Nice!!!
Thank you