Eat&Split
This project is a React application designed to manage shared expenses among friends. It allows users to add friends, track balances, and split bills efficiently. The main features include:
Friends List: Displays a list of friends with their names, profile pictures, and balances. Users can select a friend to split bills with. Add Friend: Users can add new friends by providing their names and profile picture URLs. Split Bill: Enables users to split bills with selected friends. Users input the total bill amount and their own expenses. The application calculates the amount owed or owed to each party accordingly. Delete Friend: Allows users to remove a friend from the list, along with their associated expenses.
Technical Description : This React application is built with modern web development technologies and follows best practices in React development. Here's an overview of the techniques and technologies used:
React : The project is developed using React, a popular JavaScript library for building user interfaces. React's component-based architecture facilitates the organization and management of UI elements.
React Hooks : Utilizes React Hooks such as useState for managing state within functional components. This allows for stateful logic without using class components.
Functional Components : The project predominantly employs functional components instead of class components. Functional components are simpler and provide better readability and maintainability.
State Management : State management is handled using React's useState hook. It maintains the state of friends, showing/hiding add friend form, selected friend, and bill splitting information.
Conditional Rendering : Implements conditional rendering to display or hide UI elements based on certain conditions. For example, showing the add friend form or bill splitting form based on user interaction.
Event Handling : Utilizes event handling to manage user interactions. Functions like handleShowAddFriend, handleAddFriend, handleSelectedFriend, and handleSplitBill manage various user actions like adding friends, selecting friends, and splitting bills.
Forms : Implements forms for user input using standard HTML form elements. Data from these forms is captured using React state and processed accordingly.
CSS : The styling is done using CSS. Classes like .app, .sidebar, .button, .form-add-friend, and .form-split-bill are defined to style different components of the application.
ES6 Features : Employs ES6 features like arrow functions, destructuring, template literals, and let/const declarations for cleaner and more concise code.
This project demonstrates proficiency in React development, including state management, event handling, and component composition. It also reflects familiarity with modern JavaScript and best practices in web development
Some work...
Creative Beauty Salon Website
The Creative Beauty Salon website serves as an online platform for clients to learn about our salon's services, book appointments, and get in touch with our team. The website consists of several pages, each highlighting different aspects of our salon:
Home : Introduces visitors to our salon, provides a brief overview of our services, and encourages them to book appointments.
About : Offers detailed information about our salon, including our philosophy, team members, and the services we provide.
Coafor (Hair Page) : Showcases our hair services, introduces team members, and provides contact information for scheduling hair-related appointments.
Manichiura (Manicure & Pedicure Page) : Presents information about our manicure services, introduces team members, and provides contact information for scheduling manicure appointments.
Cosmetica & MakeUp (Cosmetics & MakeUp Page) : Highlights our cosmetics and makeup services, introduces team members specializing in these areas, and provides contact information for scheduling appointments.
AppointmentForm : Allows clients to schedule appointments by filling out a form with their contact details, preferred services, and desired appointment date and time.
Technologies Used :
The Creative Beauty Salon website is built using the following technologies:
React : A JavaScript library for building user interfaces, utilized for creating the interactive components and pages of the website.
React Router : A routing library for React applications, used to manage navigation and page routing within the single-page application.
HTML & CSS : Standard markup and styling languages for structuring and designing the web pages of the website.
JavaScript : The primary programming language for adding interactivity and functionality to the website's components and pages.
React Hooks ,Functional Components ,State Management ,Conditional Rendering ,Event Handling,Form
Use Popcorn
Use popcorn - is a React application designed to help users search for and manage their movie watchlist. Leveraging the OMDb API, users can search for movies by title and view details including release year, runtime, genre, IMDb rating, plot summary, cast, and director. The application also allows users to add movies to their watched list, rate them, and view statistics about their watched movies such as average IMDb rating, average user rating, and average runtime.
Technical Description:
This project, titled usePopcorn, is a React-based web application aimed at enabling users to search for movies and manage their watched list. Below are the key technical aspects and technologies utilized in its development:
React.js : The project is built using React.js, a popular JavaScript library for building user interfaces. React's component-based architecture facilitates the development of reusable and modular UI components, enhancing code maintainability and scalability.
State Management with useState Hook : useState hook from React is employed for managing component-level state within the application. This includes states for storing user input (query), fetched movie data (movies), watched movies list (watched), loading status (isLoading), error messages (error), and selected movie ID (selectedId).
Effect Hook with useEffect : useEffect hook is utilized for handling side effects such as fetching movie data from the OMDb API, updating the document title dynamically, and setting up event listeners for keyboard interactions. By leveraging useEffect, the application ensures proper data fetching, updates, and cleanup across various lifecycle stages of React components.
Fetching Data from OMDb API : The application integrates with the OMDb API to retrieve movie information based on user search queries and selected movie IDs. Fetch requests are made using the native fetch API, and query parameters such as API key, search query, and movie ID are dynamically constructed within the URL.
Responsive Design with CSS : CSS is utilized for styling the user interface components and ensuring a responsive layout across different screen sizes and devices. The project follows modern CSS practices including flexbox and grid for layout structuring, and CSS variables for maintaining consistent styling themes.
Error Handling and Loading States : The application incorporates error handling mechanisms to display informative error messages in case of unsuccessful API requests or invalid user input. Additionally, loading indicators (such as spinners) are implemented to provide visual feedback to users during data fetching operations.
User Interaction and Event Handling : Various interactive elements such as search input, movie list items, buttons, and toggles are implemented with event handling functionalities. Event listeners are set up to detect user interactions such as typing, clicking, and key presses, enabling smooth navigation and interaction within the application.
Component Reusability and Composition : The project emphasizes component reusability and composition to promote modularization and maintainability. UI components such as NavBar, Search, MovieList, MovieDetails, Loader, and ErrorMesage are designed to be reusable across different parts of the application, enhancing code readability and scalability.
In summary, usePopcorn demonstrates proficiency in React.js development, state management, asynchronous data fetching, responsive design, error handling, and user interaction.