A collection of react projects that i build while learning react.
The purpose of this repository is to:
- Gain practical experience with React by building real-world projects.
- Explore different aspects of React, including state management, component composition, routing, and more.
- Apply best practices and patterns learned from tutorials and documentation.
- Showcase my progress and projects to potential employers or collaborators.
Description:
The Todo App project is a simple web application built with React that allows users to manage their tasks effectively. Users can add new tasks, mark tasks as completed, edit existing tasks, and delete tasks they no longer need. The app provides a clean and intuitive user interface for organizing tasks and keeping track of daily activities.
Technologies Used:
- React
- JavaScript
- CSS
Features:
- Add New Task: Users can add new tasks by entering task descriptions in the input field and clicking the "Add" button.
- Mark as Completed: Users can mark tasks as completed by clicking on the checkbox next to each task. Completed tasks are displayed with a strike-through effect.
- Edit Task: Users can edit existing tasks by clicking on the task text, making changes, and saving the updated task.
- Delete Task: Users can delete tasks by clicking on the delete button next to each task.
- Persistent Storage: Tasks are stored locally in the browser's localStorage, allowing users to access their tasks even after refreshing the page.
Project Description:
The project is a web application for showcasing a university or educational institution. It includes various components such as a navigation bar, hero section, program details, about section, campus gallery, testimonials, contact form, and a video player.
Technologies Used:
- React: The project is built using React, a popular JavaScript library for building user interfaces.
- CSS: Styling is applied using CSS, with separate CSS files for each component.
- HTML: JSX is used to write HTML-like syntax within React components.
- Fetch API: The Fetch API is used to make asynchronous HTTP requests, particularly for submitting contact form data.
- React Hooks: State and lifecycle management are handled using React Hooks like useState and useEffect.
Features:
- Dynamic Content: The website appears to be content-driven, with dynamic content for program details, about section, testimonials, and contact form.
- Responsive Design: The components are likely designed to be responsive, ensuring a consistent user experience across different devices and screen sizes.
- Interactive Elements: Interactive elements like buttons, sliders, and video players enhance user engagement.
- Form Submission: The contact form allows users to submit messages, with form data sent asynchronously to a backend server using the Fetch API.
- Media Integration: Integration of images, videos, and icons enriches the visual presentation of the website.
- Navigation: A navigation bar provides easy navigation between different sections of the website.
- Testimonials Section: Testimonials from students or users add credibility and trustworthiness to the institution.
- Video Player: Integration of a video player allows the website to showcase promotional or informational videos.
GymGuru is a web application designed to help users generate custom workout routines based on their goals, target muscles, and preferred workout intensity. It provides users with a convenient way to plan their fitness regimen and stay motivated towards achieving their fitness goals.
Technologies Used
- React: Used for building the user interface components and managing the application's state.
- JavaScript (ES6+): Used for writing the logic and functionality of the application.
- HTML & CSS: Utilized for structuring the layout and styling the user interface.
- Tailwind CSS: A utility-first CSS framework used for quickly styling components and layouts.
Features
- Workout Generation: Users can generate custom workout routines based on their preferences, including workout type, target muscles, and fitness goals.
- Flexible Options: The application offers a variety of workout types and allows users to select specific muscle groups to focus on during their workouts.
- Personalized Experience: GymGuru provides a tailored fitness experience by allowing users to customize their workout routines according to their individual fitness goals and preferences.
- Interactive Interface: The user interface is designed to be intuitive and user-friendly, providing a seamless experience for users to navigate and interact with the application.
- Responsive Design: The application is built with a responsive design, ensuring compatibility with various devices and screen sizes, allowing users to access GymGuru from desktops, laptops, tablets, and smartphones.
Simon Game is an engaging and fun memory game where players must follow an increasingly long sequence of lights and sounds. Each round, a new light is added to the sequence, and the player must remember and repeat the sequence correctly to advance to the next round. The game is a great way to challenge and improve your memory skills!
Technologies Used
- React: Used for building the user interface components and managing the application's state.
- Tailwind CSS: A utility-first CSS framework used for quickly styling components and layouts.
- JavaScript (ES6+): Implements the game's logic, functionality, and interactivity.
Features
- Interactive Gameplay: The Simon Game provides an interactive and immersive experience where players must follow a sequence of lights and sounds. Each round introduces a new light, increasing the challenge and fun.
- Visual and Audio Feedback: The game uses both visual (lights) and audio (sounds) feedback to guide players. Each button in the game lights up and plays a unique sound, making it easier to remember the sequence.
- Level Tracking: The game tracks the player's progress by counting the number of rounds completed. This score is displayed to motivate players to beat their previous high scores.
The Recipe Finder App is a web application built with React that allows users to search, explore, and save recipes conveniently. Users can search for recipes using keywords, view recommended recipes, and save their favorite recipes for future reference.
Technologies Used
- React: JavaScript library used for building the user interface components and managing application state.
- React Router DOM: Enables navigation and routing within the single-page application.
- Tailwind CSS: Utility-first CSS framework for styling the components and layouts.
- Lucide Icons: Provides a set of clean and consistent icons for user interface elements.
- Edamam Recipe API: External API used for fetching recipe data based on user search queries.
Features
- Search Recipes: Users can search for recipes using keywords and explore various options.
- Recommended Recipes: Displays popular and recommended recipes based on trending or user-specific interests.
- Favorites: Allows users to save their favorite recipes locally within the app for quick access.
Each project may have its own set of instructions on how to run it. Please navigate to the specific project folder and refer to the project's README.md or documentation for detailed instructions on setting up and running the project.