🚀 DevStack-React
DevStack-React is a React-based technology data management application where users can explore different technologies and add their preferred technologies to their own stack.
The project was built to practice and demonstrate some of the core React concepts such as components, props, state, useState, useEffect, event handling, .map(), conditional rendering, and reusable components.
🛠️ Technologies Used
The main technologies and tools I used to build this project are:
Technology Purpose React.js Building the user interface TypeScript Writing type-safe React code JavaScript (ES6+) Application logic and functionality Tailwind CSS Styling and responsive design DaisyUI Pre-built UI components React-Toastify Showing toast notifications JSON Storing technology data Vite Development server and build tool
✨ Main Features
- Dynamic Technology Data
Technology information is loaded dynamically from a JSON file and displayed on the website using React components.
This helped me practice working with external data and rendering dynamic content in React.
- Add Technologies to Your Stack
Users can select the technologies they are interested in and add them to their personal stack.
The selected technologies are managed using React state.
- Interactive UI
The UI changes based on the user's actions. For example, when a technology is added to the stack, the selected list updates immediately without reloading the page.
I used React concepts like:
useState useEffect Props Event handling .map() Conditional rendering Reusable components 4. Empty Stack Handling
If the user hasn't added anything to their stack yet, the application shows an empty-state message instead of displaying an empty list.
- Toast Notifications
React-Toastify is used to show notifications when users interact with the application.
📦 Dependencies
Some of the main packages used in this project are:
react react-dom react-toastify tailwindcss daisyui
The project also uses Vite as the build tool and TypeScript for type checking and development.
The complete list of dependencies can be found in the project's package.json file.
⚙️ How to Run the Project Locally
If you want to run this project on your local machine, follow these steps.
- Clone the repository git clone YOUR_GITHUB_REPOSITORY_LINK
- Go to the project folder cd DevStack-React
- Install dependencies npm install
- Start the development server npm run dev
After that, Vite will give you a local URL, usually something like:
Open the URL in your browser and the project should be running.
🌐 Live Demo: Live Link
💻 GitHub: GitHub Repository
📦 React: https://react.dev/
⚡ Vite: https://vite.dev/
🎨 Tailwind CSS: https://tailwindcss.com/
🌼 DaisyUI: https://daisyui.com/
🔔 React-Toastify: https://fkhadra.github.io/react-toastify/