A simple and interactive counter application built with React. This app allows users to increment and decrement a counter value with dedicated buttons. It demonstrates the use of React's useState hook for state management and explains how React handles state updates and batching.
Key Features:
- Increment and decrement the counter value.
- Demonstrates React state management using the useState hook.
- Explanation and handling of React's batching behavior.
- Live counter updates with console logs for state tracking.
🔗 Live Demo: View on Netlify
This is a simple and responsive React application built with Vite and styled using Tailwind CSS. The app dynamically displays user profile cards with customizable information such as usernames and posts. It demonstrates the integration of component-based architecture in React along with the speed and efficiency of Vite and the modern utility-first styling of Tailwind CSS.
Features:
- Vite for fast development and build performance
- Tailwind CSS for sleek, responsive styling
- Reusable Components using React for modular design
- Fully responsive across devices
🔗 Live Demo: View on Netlify
This is an interactive Background Color Changer web app built using React, powered by Vite for lightning-fast performance, and styled with Tailwind CSS. The app allows users to change the background color of the entire page with a simple click of a button. It’s a beginner-friendly project that demonstrates state management in React using the useState hook and dynamic styling.
Features:
- Instantly change background colors with button clicks
- Fast performance with Vite build tool
- Sleek and responsive UI with Tailwind CSS
- Mobile-friendly and responsive design
🔗 Live Demo: View on Netlify
This is a customizable Password Generator App built using React, optimized with Vite for fast performance, and styled with Tailwind CSS. The app allows users to generate strong and secure passwords by adjusting the password length and including numbers and special characters. With a simple interface and instant clipboard copy functionality, it's perfect for creating complex passwords for online security.
Features:
- Adjustable Password Length (6–50 characters)
- Include Numbers and Special Characters
- Copy to Clipboard with a single click
- Real-time Password Generation
- Clean and Responsive UI with Tailwind CSS
🔗 Live Demo: View on Netlify
Description: This is a Currency Converter App built using React that allows users to convert amounts between different currencies in real-time. The app fetches live exchange rates using a custom hook and provides a smooth user experience with a clean and responsive UI. It also includes a swap feature to quickly reverse the conversion direction.
Features:
- Real-Time Currency Conversion using live exchange rates
- Swap Functionality to quickly switch currencies
- Dynamic Currency Options based on available exchange rates
- Modern UI with a responsive and clean design
- Error and Loading Handling for smooth user experience
🔗 Live Demo: View on Netlify
This is a React Multi-Page Application using React Router v6. It includes multiple pages such as Home, About, Contact, User, and a GitHub data page. The app utilizes advanced routing features like dynamic routes, nested routes, and data loading with loader functions for pre-processing data before rendering.
Features:
- Home, About, Contact Pages with smooth navigation
- GitHub Data Fetching with loader for optimized data loading
- 404 Not Found Page for invalid routes
- Modular Layout with consistent UI across pages
- Fast and Efficient Routing with React Router v6
- Dynamic User Routes (/user/:userid)
🔗 Live Demo: View on Netlify
This is a lightweight React application that allows users to log in and view their profile information. It utilizes React's Context API for global state management, making it easy to handle user data across components.
Features:
- Profile display after login
- Global state management using React Context API
- Clean and intuitive UI
🔗 Live Demo: View on Netlify
A simple React app that lets users switch between light and dark themes. It uses the Context API for global state management and useEffect for real-time theme updates.
Features
- Light and dark theme toggle
- Global state management with React Context API
- Smooth theme transitions
- Responsive UI design
🔗 Live Demo: View on Netlify
React Todo Manager is a simple and efficient task management application built with React. It allows users to add, update, delete, and mark tasks as complete. The app ensures that your tasks are saved in your browser's local storage, so they remain available even after refreshing the page or closing the browser.
Key Features:
- Quickly add tasks to your to-do list.
- Prevents adding empty tasks for better usability.
- Easily update the content of your existing tasks.
- Remove tasks that are no longer needed.
- Toggle tasks between completed and incomplete states.
- Tasks are automatically saved to the browser’s local storage.
- Tasks remain even after page reloads or closing the browser.
- Clean and responsive design built with Tailwind CSS for a seamless experience across devices.
- The UI instantly reflects any changes made to the task list.
🔗 Live Demo: View on Netlify
Redux Todo Manager is an advanced task management application built with React and Redux Toolkit. It efficiently manages the state of the todo list by using Redux for predictable state management. This app allows users to add, edit, delete, and toggle the completion status of tasks with a smooth and responsive user interface.
Key Features:
- Quickly add tasks with a unique ID generated by nanoid.
- Modify the content of any task without affecting others.
- Easily remove tasks from the list.
- Mark tasks as completed or incomplete with a simple action.
- Centralized state management using Redux Toolkit’s createSlice.
- Reducers for handling all task operations (Add, Remove, Edit, Toggle).
- Ensures state is updated immutably and efficiently.
- Clean and user-friendly interface adaptable to all screen sizes.
- Initial State: Starts with a sample task for demonstration.
- Reducers:
- addTodo: Adds a new task with a unique ID.
- removeTodo: Deletes a task by its ID.
- toggleTodo: Toggles a task’s completion status.
- editTodo: Updates the task text by its ID.
🔗 Live Demo: View on Netlify
I've created a clean and reusable custom hook for managing a counter state in React! This hook abstracts common counter functionality, making it reusable across components.
Features: Flexible Initial Value: Defaults to 0 but can be customized. Increment Function: Increases the count by 1. Decrement Function: Decreases the count by 1. Reset Function: Resets the count to the initial value.
🔗 Live Demo: View on Netlify
This app allows the user to increment a base value by 1 and then display its multiplied result by 5. Every time the user clicks the button, the main value increases by 1, and the multiplied value (value * 5) is automatically updated and displayed.
Features:
- Increment Value: Increases the main value by 1 with every click.
- Multiply by 5: Displays the result of multiplying the main value by 5.
- Interactive UI: A button to trigger the increment and multiplication.
🔗 Live Demo: View on Netlify
The Random User Generator is a simple React application that fetches and displays a random user's profile using the Random User API. With just a click, it presents user details such as their name, email, location, and profile picture.
Features:
- Fetch Random User: Retrieves a random user's details with one click.
- Loading State: Displays a loading indicator while fetching data.
- Error Handling: Shows an error message if the API request fails.
- User Profile Display: Presents the user's name, email, location, and avatar.
- Responsive UI: Clean and responsive design using Tailwind CSS for styling.