React Projects

Overview

Welcome to the React Projects Repository! This repository is a collection of React projects ranging from beginner to advanced levels. Each project is designed to help to improve my React skills through practical examples and hands-on experience.

Project Levels

Easy

• 01 To-Do List: This project allows users to add, view, edit, delete, and toggle the status of to-dos. It includes local storage integration to persist data across sessions. Project Details

• 02 Quiz App: Users can take a quiz by selecting answers from multiple-choice questions. The app tracks the user's score, provides immediate feedback on the correctness of answers, and automatically progresses to the next question after a short delay. Users can also reset the quiz to start over. Project Details

• 03 Recipe Management: Users can add, view, and delete recipes. Recipes are stored in the browser's local storage to ensure data persistence across page reloads. The app features a smooth user experience with modals for viewing and deleting recipes and notifications for actions like adding and deleting. Project Details

• 04 Markdown Previewer: This project allows users to write Markdown content in an editor and see a live preview of the rendered Markdown. It uses React for the front-end, TailwindCSS for styling, and react-markdown for rendering Markdown content. Project Details

• 05 Expense Tracker:: Users can add, view, edit, delete, and track their expenses. The app uses React for the front-end and Redux for state management, with local storage integration to persist data across sessions. Project Details

Intermediate Projects

• 06 Blog Plaform : A blog platform built with React and Redux Toolkit that allows users to add, view, and delete blog posts. It features state persistence, rich text editing, and dynamic state management.Project Details

• 07 E-Commerce Product Page :: The E-Commerce Product Page is designed to provide users with a seamless shopping experience. It features sorting, filtering, and cart management with dynamic theming (light, dark, and system-based). Shadcn components are integrated for an enhanced UI/UX.Project Details

• 08 Movie Search App:: A simple movie search application using the OMDb API, built with React and styled using Chakra UI. It includes a responsive design with light and dark mode support.Project Details

• 09 Task Management App:: This task management app, built with React and Redux Toolkit, allows users to add, organize, and manage tasks with drag-and-drop functionality. The app integrates Redux Persist to maintain tasks between sessions.Project Details

• 10 Gitub User Search:: A GitHub User Search app developed with React and Redux Toolkit. It allows users to search GitHub profiles, view detailed information, and paginate through repositories and followers.Project Details

• 11 Pomodoro Timer App:: A Pomodoro timer built using React, Styled Components, and Framer Motion. It offers customizable time intervals and provides smooth animations, supporting users in managing work and break cycles. Project Details

Installation

To get started with any project in this repository, follow these steps:

1. Clone the repository:

   git clone https://github.com/ma3llim007/react_project/

2. Navigate to the project directory:

   cd project_name

3. Install dependencies:

   npm install

   or

   yarn install

4. Start the development server:

   npm start

   or

   yarn start

   This will start the development server and open the project in your default browser at http://localhost:5173.

Usage

To use the application:

1. Navigate to the project directory and start the development server.
2. Open the application in your browser and interact with the features.

Development

To contribute to this repository:

1. Fork the repository and clone your fork:

   git clone https://github.com/ma3llim007/react_project/

2. Create a new branch for your feature or fix:

   git checkout -b feature/your-feature-name

3. Make your changes and commit them:

   git add .
   git commit -m "Describe your changes here"

4. Push your changes to GitHub:

   git push origin feature/your-feature-name

5. Open a pull request on GitHub and describe your changes.

Contributing

Contributions are welcome! If you have suggestions for new projects or improvements, please open an issue or submit a pull request.

License

This repository is licensed under the MIT License - see the LICENSE file for details.