Posted on Jul 20

Introducing Nexus: A Polished Dashboard Built with Vite, React, and Shadcn/ui

#devchallenge #frontendchallenge #css #javascript

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

What I Built

For this challenge, I built "Nexus", a modern, single-page intranet dashboard designed to be a company's digital heartbeat. My goal was to create a clean, intuitive interface that masterfully balances high-efficiency productivity with vibrant community engagement, directly addressing the core challenge of information overload in the modern workplace.

The layout is a responsive two-column design featuring a main content area and a right sidebar for tools and events. Nexus provides a central hub for company news, team events, and essential tools, all while fostering a positive culture through features like a "Kudos" feed.

Demo

You can experience the live application and view the complete source code at the links below.

Live Demo URL: https://nexus-drab-ten.vercel.app/

GitHub Repository: https://github.com/praveen-sripati/nexus

Journey

My journey in building Nexus was a fantastic deep dive into creating a polished application using a modern frontend stack: React, Vite, TypeScript, Tailwind CSS, and shadcn/ui.

The Process & Key Decisions

From the start, I began by setting up the project with Vite for a blazing-fast development experience. The choice of TypeScript was deliberate to ensure type safety and code quality from the ground up.

For the UI, the combination of Tailwind CSS and shadcn/ui was a game-changer. Tailwind's utility-first approach made it easy to implement the responsive two-column layout, while shadcn/ui provided beautifully designed, accessible components like Cards, Buttons, and Dropdown Menus, which saved a huge amount of time.

A Choice I'm Proud Of: The Custom Theme Provider

One of the first features I implemented was a light/dark mode theme switcher. Instead of reaching for a library like next-themes, I decided to build it from scratch. This was a great learning experience and something I'm particularly proud of.

Ultimately, this project was a rewarding challenge that took me from a detailed concept to a complete, deployed, and polished application.

Thanks to DEV and Axero for the opportunity.

Made with ❤️ by Praveen Sripati

DEV Username: @praveen-sripati

Top comments (18)

Stasi Vladimirov • Jul 22

Might want to rename this template to a Feed or something like that. Admin dashboard usually need to include:

form components: admins manage data. How do you do that without inputs, which also includes filters for:
chart and visualization components: or other tools that can display data at scale and allow ways to slice and dice it
navigation/menu: some way to organize the application without dumping everything on a single page. Especially important for mobile support.

Other than that your project looks like a good exercise in creating various widgets.

Praveen Sripati • Jul 22

Thanks for the feedback. You're right, renaming it to "Feed" makes more sense given the current structure. I’ll definitely consider adding form elements, filters, and proper navigation to bring it closer to a full-fledged admin dashboard. Appreciate you pointing that out!

Joshua DeLong • Jul 27

It's great work and will fit it's place but you are going to have a very hard time marketing it and people finding it because of the name. I only say this because of Sonatype Nexus Repository Manager is going to over shadow any results in finding it or finding any documentation to support it. My only recommendation is coming up with a different name or a parent name like "Praveen Nexus" to make your application distinct.

Praveen Sripati • Jul 27

Thanks a lot for the feedback, that’s a very valid point! I didn’t initially consider with Sonatype Nexus, but you're absolutely right. I’ll definitely look into renaming or adding a unique prefix to make it stand out better. Appreciate you pointing it out early! 🙌

khi195 • Jul 22

Well done Praveen, looks great.

Praveen Sripati • Jul 22

Thanks

Kevin Möchel • Jul 22

Can you please add a big thanks on your GitHub repo for the creator of the theme transition animation? Its awesome and we should pay our respect.

Two remarks on the implementation:

The transition should check if the user has reduced motion active and skip the animation accordingly.
You override the global default behaviour of view transitions in your CSS. This leads to the default link navigation to have no animation at all, which is not intentional . I have an implementation here that solve the issue by temporarily overriding the root transition for the duration of the theme toggle.

Praveen Sripati • Jul 23

Thanks! I’ll definitely give a shoutout to the creator of the theme transition, it’s amazing and truly deserves credit. Great points, I’ll try to implement those as well. Appreciate the feedback! 🙏.