Dev Stack

Description

Dev Stack is a technology explorer where developers can browse popular frontend, backend, database and tooling technologies and build their own personal stack for a future project. Selected technologies appear in a live sidebar that updates instantly.

Key features

• 15 technology cards with icon, category, rating and difficulty, plus an Add to Stack button with a duplicate-warning toast.
• Live “Your Stack” sidebar with individual remove and Remove All actions.
• Fully responsive layout (1, 2 and 3 columns) with a sticky navbar and mobile menu.
• Loading state while technology data is fetched from a local JSON file.

Challenges faced

• Keeping the sidebar in sync with the cards so it updates instantly when a technology is added or removed.
• Stopping duplicates and showing a clear warning toast when a technology is already in the stack.
• Showing a loading state while the data is fetched from the local JSON file.
• Making the card grid and sidebar work across 1, 2 and 3 column layouts.

Future plans and improvements

• Save the stack in localStorage so it stays after a reload.
• Add search and category filters for the technology cards.
• Let users share or export their stack.