DevStack: Build Your Ideal Dev Stack
An interactive web app to explore, compare and build your ideal development stack for modern software projects.
Project Overview
DevStack is a curated platform where developers explore frontend, backend, database and tooling technologies side by side and assemble their own development stack. Visitors browse technology cards such as React, Vue.js, Svelte, Next.js, Node.js, PostgreSQL, Redis, TypeScript, Tailwind CSS and Docker, each with a category, difficulty level and rating, and add their favourites to a live "Your Stack" sidebar. The app blocks duplicate choices with friendly toast warnings, lets users remove a single technology or clear the whole stack, loads its technology data from a JSON file with a smooth loading state, and stays fully responsive on mobile, tablet and desktop.
Challenges Faced
Loading the technology data from a JSON file with useEffect and showing a smooth loading state.
Preventing the same technology from being added twice and warning the user with toast alerts.
Keeping the live stack sidebar in sync, including single-item and bulk removal.
Keeping the card grid and sidebar clean and usable on mobile, tablet and desktop.
Future Plans & Improvements
Let users save and share their stacks with an account.
Add a side-by-side comparison view for selected technologies.
Move the data to a database or API and add more categories.