🧱 Dev Stack Builder

A modern, responsive web application that allows developers to explore popular technologies and build their ideal development stack.

🛠️ Technologies Used

• React.js + TypeScript
• Tailwind CSS
• Vite
• React-Toastify
• JSON (for technology data)

✨ Features

1. Explore Technologies — Browse 12+ technologies with icons, ratings, and difficulty levels.
2. Build Your Stack — Add/remove technologies to build a custom stack. Duplicates are prevented.
3. Fully Responsive — Works smoothly on mobile, tablet, and desktop with a mobile hamburger menu.

🚀 Live Demo

[Add your live link here]

📚 React Questions & Answers

1. What is JSX, and why is it used in React?

JSX stands for JavaScript XML. It allows us to write HTML-like code inside JavaScript. React uses JSX to make the UI code more readable and easier to write. Instead of using React.createElement(), we can simply write <div>Hello</div>.

2. What is the difference between props and state?

Props are read-only data passed from a parent component to a child component. State is data managed inside a component that can change over time. Props cannot be modified by the child, but state can be updated using useState.

3. What does the useState hook do, and where did you use it in this project?

useState allows a functional component to have its own state. It returns the current value and a function to update it. In this project, I used useState to store the stack array, the loading state, and the mobile menu toggle.

4. What does the useEffect hook do, and why did you need it to load the JSON data?

useEffect runs side effects after the component renders. I used it to fetch the technologies.json file when the app first loads. Without useEffect, the fetch would run on every render, causing infinite loops.

5. Why does every item in a .map() list need a unique key prop?

The key prop helps React identify which items have changed, been added, or removed. Without a unique key, React cannot efficiently update the list and may cause bugs.

6. What is conditional rendering? Show one place you used it.

Conditional rendering means showing different UI based on a condition. I used it in the "Your Stack" section — if the stack is empty, it shows "Your stack is empty." Otherwise, it shows the list of selected technologies.

7. How do you pass data from a parent to a child, and how does a child send something back?

Parents pass data to children through props. Children send data back by calling a callback function passed as a prop. For example, TechCard receives onAdd as a prop and calls it when the user clicks "Add to Stack".