React Task Suite is a collection of tasks implemented using React. This project showcases various functionalities and features that can be built using React, including counters, to-do lists, form validations, search functionality, image upload, fetching user details from an API, and creating a user profile page with editing capabilities.
- Counter: A simple counter with increment and decrement functionality.
- To-Do List: A to-do list where users can add and remove items.
- Form Validation: A form with validation for name, email, contact, and password fields.
- Search Functionality: A product search that filters a list of products based on user input.
- Image Uploader: Allows users to upload and display images in a circular format.
- Fetch User Details: Fetches and displays user details from an API.
- User Profile Page: Displays and allows editing of user profile information, including uploading a profile picture.
To install and run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/your-username/react-task-suite.git cd react-task-suite - Install the dependencies:
npm install
- Start the development server:
npm start
The application will be available at http://localhost:3000.
Navigate through the different tasks by clicking on the task buttons on the dashboard. Each task demonstrates a specific functionality implemented in React.
A simple counter that allows users to increment and decrement a number. The counter value cannot go below zero.
A to-do list where users can add items and remove them. The list of items is displayed below the input field.
A form with fields for name, email, contact, and password. The form validates the input fields based on specified criteria and enables the submit button only when all fields are valid. Upon submission, the entered values are displayed.
A product search functionality that filters and displays products based on user input. The search is case-insensitive and updates the displayed products in real-time as the user types.
Allows users to upload an image file and displays the uploaded image in a circular format.
Fetches user details from the API endpoint JSONPlaceholder and displays them in a table format. The table includes columns for ID, name, email, and contact.
Displays user profile information including name, email, and contact. Allows users to edit their profile information and upload a profile photo. The profile photo is displayed in a circular format.
This project is licensed under the MIT License.