Learn React & Angular Step by Step: Building Projects

Learn how to pass real data like name, age, and image into a reusable UserCard component using props. You’ll dynamically render multiple users using .map() and clean up the code using destructuring — just like in real-world React apps.

Dive into useState() to make your components interactive. Build a like button with toggle functionality and a live counter. Learn how to manage UI memory — from visual changes to state-driven behaviors.

Control what’s shown on the UI using state and conditional rendering. Build a ToggleBio component that hides or shows text using a ternary expression — paired with a Bootstrap-styled button for smooth interaction.

Build a fully functional Counter App with increment, decrement, and reset buttons. Learn how to update numeric state correctly and avoid direct mutation — all with clean Bootstrap UI styling.

Use controlled components to create a real-time Greeting App. Sync input fields with state to provide live updates and instant user feedback. It’s all about capturing input and making your app feel alive.

Learn how child components can communicate with parent components by lifting state up. Build a two-component greeting app where the parent holds the state and the child updates it — the key to connecting logic in real apps.

Learn how to render a list of products dynamically using .map() in React. You’ll create a reusable ProductCard component, pass props like title and price, and apply the key prop correctly to avoid rendering issues — a must-know pattern for any React app.

Add interactivity by highlighting a selected product card with a visual cue. Learn how to track selection using state, apply conditional classes, and reset the selection. Perfect for building nav menus, cards, filters, and UI tabs.

Use useState and JSX conditionals to show or hide status messages like "Success" or "Error". You’ll build a StatusBanner component with Bootstrap alerts that adapt based on user actions — real-time visual feedback made easy.

Create a product filter with "All", "Active", and "Sold Out" options. You’ll manage filter state and update the UI using .filter() and Bootstrap buttons. This pattern is essential for search, dashboard, and admin panel UIs.

Toggle visual styles dynamically using useState and className logic. You’ll build a ToggleCard that changes background color and applies a smooth CSS transition — great for interactive UI components and feedback systems.

Build a secure, user-friendly password input that toggles visibility with a button. You’ll use useState to switch between "text" and "password" types — a practical feature in login, signup, and profile forms.

Learn how to build a fully controlled form in React using a single state object. Capture name and email inputs, sync them with state, and show real-time output as users type.

Add submission logic to your form with the onSubmit event. Prevent page reload, show form data via alert, and reset the input fields — just like real-world login or contact forms.

Handle 3+ fields using one useState object and a single handler function. Perfect for building scalable signup forms and clean input handling logic in modern React apps.

Add smart error handling to your form with live validation and disabled submit buttons. Display red error states, use Bootstrap feedback, and improve your form UX drastically.

Build dropdowns for country selection and radio buttons for gender. Learn to manage selected values in state and handle multiple input types with a unified change handler.

Create a complete feedback form with name, email, message, and rating. Show a Bootstrap modal on successful submission. Includes field validation and beautiful UI feedback.

Learn how to fetch data from an external API using the useEffect() hook. Show a loading spinner, fetch users, and display them in styled Bootstrap cards. This is your first real-world data-fetching setup in React.

Build a live digital clock using setInterval() and clean it up using a return function in useEffect. Avoid memory leaks and understand how to manage side effects in modern React.

Create a Dark/Light Mode Toggle using state, useEffect, and localStorage. Control the HTML data-bs-theme attribute instantly to avoid flashing and provide a seamless theme-switching experience.

Use the useRef() hook to auto-focus an input on load and scroll to a specific section. You’ll manage DOM elements directly without triggering re-renders — perfect for advanced UX touches.

Learn how to refactor large React components into clean folders and modular files. Organize your project like a real dev team using a /components and /features folder structure.

Build a professional-looking tabbed interface using Bootstrap’s nav-pills. Switch between tabs using useState, and dynamically render content based on the active tab. Clean, dynamic, and elegant.