DevStack - Developer Tech Stack Management

A modern web application built with React and Vite to manage and explore developer technology stacks seamlessly.

Technologies Used

• React (Vite)
• Tailwind CSS
• JavaScript (ES6+)

Key Features

1. Dynamic data fetching and display of developer stacks.
2. Interactive stack selection and management system.
3. Responsive UI design optimized for all devices with custom toast notifications.

---

React Questions & Answers

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

JSX (JavaScript XML) is a syntax extension for JavaScript that allows us to write HTML-like code directly inside JavaScript. It is used in React because it makes the code much easier to read, write, and understand by combining UI structures and logic in one place.

ii. What is the difference between props and state?

• Props (Properties): These are read-only data passed down from a parent component to a child component to configure or display information.
• State: This is internal, mutable data managed within a component that changes over time based on user interaction or actions.

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

The useState hook allows functional components to manage local state. In this project, it is used to track and update the selected tech stacks and handle user interactions.

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

The useEffect hook lets us perform side effects in components, such as data fetching. It was needed to fetch the external JSON technology dataset when the component mounts without causing infinite rendering loops.

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

A unique key prop helps React identify which items have changed, been added, or been removed. This improves performance and prevents rendering bugs by maintaining stable component identities.

vi. What is conditional rendering? Show one place you used it (or example).

Conditional rendering means displaying different UI elements based on certain conditions. For example, showing a loading spinner while data is fetching or displaying a "No items selected" message when the stack array is empty.