Solution for the responsive navbar challenge with NextJS, ShadCN and TailwindCSS

Challenge brief

Navbar (E-commerce)Build a minimal, responsive navigation bar seen on typical e-commerce websites

Back to all submissions

Solution for the responsive navbar challenge with NextJS, ShadCN and TailwindCSS

Challenge brief

Navbar (E-commerce)Build a minimal, responsive navigation bar seen on typical e-commerce websites

Sahan Vibhashana Bandara@vibhashana

Frontend Developer @ Euka

11 YOE

1.4k Reputation

Preview solution

View code

The solution was done using NextJS 15 with ShadCN components, Lucid React icons and TailwindCSS for styling.

Submission vs Design

https://style-nest-new.vercel.app/

Implementation details

Tech stack

HTML

Basics

Semantics

Images

Forms

CSS

Basics

Positioning

Layout

Responsive Design

Transforms and Transitions

Architecture

JavaScript

DOM Events

DOM Manipulation

Fetch

Storage

React

Basics

Components

List Rendering

Event Handling

Form Handling

Effects

Package Managers

Basics

Build Tools

Typechecking

Linting & Formatting

Bundling

Performance

Font Loading

Image Loading

Next.js

npm

Tailwind

TypeScript

ESLint

React

Code

Discussions