Modern Tech Stack Builder & Technology Showcase
Explore technologies, discover your favorites and build your own personalized tech stack.
Dev Stack is a modern Tech Stack Builder & Technology Showcase Web Application for exploring different technologies and creating a personalized tech stack.
The project is built with React, TypeScript, Tailwind CSS and DaisyUI, with a clean, modern and responsive user interface.
|
Browse and discover different technologies with useful information about each one. |
Select technologies and create your own personalized development stack. |
Enjoy a clean and responsive experience across desktop, tablet and mobile devices. |
Follow these steps to run Dev Stack locally.
git clone https://github.com/nafiulkabirbd/dev-stack
1. What is JSX and why is it used in React?
JSX is a syntax that lets us write HTML-like code inside JavaScript or TypeScript.
It makes React UI code easier to read, write and understand.
2. What is the difference between props and state?
Props are used to pass data from a parent component to a child component.
State is data managed inside a component. When state changes, React updates the UI.
3. What does the `useState` hook do and where did you use it in this project?
The useState hook is used to create and manage state inside a React component.
In this project, I used useState to manage the technologies selected by the user for their personalized tech stack.
4. What does the `useEffect` hook do and why did you need it to load the JSON data?
The useEffect hook is used to perform side effects in a React component.
I used it to load the technology data from the JSON file when the application starts.
5. Why does every item in a `.map()` list need a unique `key` prop?
React uses the key prop to identify each item in a list.
A unique key helps React understand which items have changed, been added or removed and update the UI efficiently.
6. What is conditional rendering? Show one place you used it.
Conditional rendering means displaying different UI based on a condition.
In this project, I used it to show a message when no technology has been selected.
{selectedTechs.length === 0 ? (
<p>No Technologies Selected</p>
) : (
// Selected technologies
)}
Thank you for taking the time to explore Dev Stack! ❤️
If you found this project useful or interesting, consider giving the repository a ⭐ star.
Your support and feedback motivate me to keep learning, building and sharing more projects. 🚀