{"id":20555108,"url":"https://github.com/shahramshakiba/reactjs-basic-course","last_synced_at":"2025-07-14T21:41:35.806Z","repository":{"id":211549040,"uuid":"729446889","full_name":"ShahramShakiba/ReactJS-Basic-Course","owner":"ShahramShakiba","description":"ReactJS Basic Course | I am focused on learning and practicing fundamental ReactJS concepts to enhance my development skills and demonstrate progress in my journey as a developer (🔵React.js).","archived":false,"fork":false,"pushed_at":"2024-03-13T08:13:37.000Z","size":8609,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-16T03:16:15.706Z","etag":null,"topics":["basic-react","reactjs"],"latest_commit_sha":null,"homepage":"https://www.linkedin.com/in/shahramshakiba/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ShahramShakiba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-12-09T08:57:54.000Z","updated_at":"2024-09-09T15:32:27.000Z","dependencies_parsed_at":"2024-03-05T11:39:10.657Z","dependency_job_id":null,"html_url":"https://github.com/ShahramShakiba/ReactJS-Basic-Course","commit_stats":null,"previous_names":["shahramshakiba/reactjs-course-showcase","shahramshakiba/reactjs-basic-course"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FReactJS-Basic-Course","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FReactJS-Basic-Course/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FReactJS-Basic-Course/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FReactJS-Basic-Course/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShahramShakiba","download_url":"https://codeload.github.com/ShahramShakiba/ReactJS-Basic-Course/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234244885,"owners_count":18801998,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["basic-react","reactjs"],"created_at":"2024-11-16T03:16:20.961Z","updated_at":"2025-01-16T17:51:01.268Z","avatar_url":"https://github.com/ShahramShakiba.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#  \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" /\u003e \u0026nbsp; ReactJS Basic Course \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" height=\"40\" width=\"36\"  /\u003e\n\n\u003c!----------------------------------------- Description ----------------------------------------\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" width=\"40\" height=\"40\" /\u003e\u0026nbsp; Description\n\u003e To begin with, it is important to note that, these projects have been sourced from an exceptional Udemy Course. \u003cbr/\u003e\n \n\u003e 👤 Instructed by a _proficient_ and _expert educator_, ` \"Maximilian Schwarzmuller\". `\n\n- Step into my GitHub repository and witness the fruits of my labor in learning ReactJS. This array of projects chronicles my journey through the course and reflects my growth as a developer.\n- Each project has been carefully crafted to showcase my grasp of ReactJS concepts and best practices. Whether it's a basic application or a complex one, this repository attests to my unwavering commitment and zeal for web development.\n  \n\u003e  So, delve into the repository and unearth the diverse projects I have created. I trust you'll find them informative and motivational, and I eagerly await your feedback!\n\n\u003cbr/\u003e\n\n ### _List of projects :_ \n \u003e ⭐ React Essentials \u0026nbsp;\u0026nbsp;\u0026nbsp; ⭐ Tic Tac Toe \u003cbr/\u003e\n \u003e ⭐ Investment Calculator \u0026nbsp;\u0026nbsp;\u0026nbsp; ⭐ Sign in Form \u003cbr/\u003e\n \u003e ⭐ Styling React Component \u0026nbsp;\u0026nbsp;\u0026nbsp; ⭐ Final CountDown  \u003cbr/\u003e\n \u003e ⭐ JSX Limitations \u0026nbsp;\u0026nbsp;\u0026nbsp; ⭐ React Project Management \u003cbr/\u003e\n \u003e ⭐ Online Clothing Shop \u0026nbsp;\u0026nbsp;\u0026nbsp; ⭐ Place Picker App \u003cbr/\u003e\n \u003e ⭐ Simple Login \u0026nbsp;\u0026nbsp;\u0026nbsp; ⭐ React Quiz  \u003cbr/\u003e\n \u003e ⭐ Food Order Application \u003cbr/\u003e\n    \n\u003cbr/\u003e\n\n\u003c!--=====================  React Essentials =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; React Essentials \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n- In this project, I have utilized the fundamental concepts of ReactJS such as `Components`, `JSX`, `Props`, and `State`. The aim of this project is to demonstrate how these concepts can be effectively used in building a functional application.\n\n- The project showcases the dynamic rendering of content and images, with separate components like Header and CoreConcept being extracted from the main App component.\n- Furthermore, to enhance the flexibility of my components, I have utilized Forwarding Props (or Proxy Props) to pass down props to child components without having to manually specify each one.\n- I have also implemented two JSX Slots in my components to allow for dynamic content insertion.\n- Additionally, I have experimented with setting component types dynamically.\n- Lastly, I have leveraged hooks like useState and passed custom arguments to Event Functions to optimize the functionality of my components.\n\u003e Overall, this project serves as a simple yet effective demonstration of the essential concepts of ReactJS. Feel free to explore the code and learn from it!\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://react-essentials-shahram.netlify.app\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e React Essentials\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/8442b840-a18c-4dbe-829d-c4fbfc7e8de6\n\n  \u003cbr/\u003e \n\n ***\n \u003c!--=====================  Tic Tac Toe =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; Tic Tac Toe \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n- Tic Tac Toe is a classic game that has been enjoyed by people of all ages for generations. It is a two-player game where each player takes turns marking a 3x3 grid with their symbol (either X or O) until one player successfully places three of their symbols in a row, column, or diagonal.\n- Overall, this Tic Tac Toe application is a fun and interactive way to experience the classic game while also demonstrating my proficiency in React development.\n\n\u003e In this project, I have undertaken an in-depth exploration of numerous key concepts. \u003cbr/\u003e\n\n\u003e 🔑 Which Concepts Have I Covered :  \n- 🔓 Splitting Components by feature \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Reusing Components \u003cbr/\u003e\n- 🔓 Conditional Content - A Suboptimal Way Of Updating State \u003cbr/\u003e\n- 🔓 Updating State Based On Old State \u003cbr/\u003e\n- 🔓 Rendering Multi-Dimensional Lists \u003cbr/\u003e\n- 🔓 Updating Object State Immutably \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Lifting State Up \u003cbr/\u003e\n- 🔓 Computed Values - Avoid Unnecessary State Management \u003cbr/\u003e\n- 🔓  Deriving State From Props \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Sharing State Across Components \u003cbr/\u003e\n- 🔓  Lifting Computed Values Up \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 and several other concepts as well. \u003cbr/\u003e\n\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://tic-tac-toe-game-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e Tic Tac Toe Game\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/20b0bc44-1519-4882-8279-f19444a2f2ed\n\n  \u003cbr/\u003e \n\n ***\n \u003c!--===================== Investment Calculator =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; Investment Calculator \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n- React-powered Investment Calculator\n- In this project, the website visitors can use to calculate the future value or multiple future values\n  for given investment parameters.\n\n\u003e 🔑 Which Concepts Have I Covered :  \u003cbr/\u003e\n- 🔓 Build an \"Investment Calculator\" Web App \u003cbr/\u003e\n- 🔓 Build, Configure \u0026 Combines Components \u003cbr/\u003e\n- 🔓 Manage Application State \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Output List \u0026 Conditional Content \u003cbr/\u003e\n- 🔓 Handling Events | Using Two-Way-Binding \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Lifting State Up \u003cbr/\u003e\n- 🔓 Computing Values | Properly Handling Number Values\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://investment-calculator-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e \"Investment Calculator\" Web App\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/3a177e59-5e14-4db4-aab2-bc8c35e9ce1a\n\n\n  \u003cbr/\u003e \n\n ***\n \u003c!--=====================  SignIn-Form =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; SIGN IN FORM \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n### Styling React Components \u003cimg src=\"https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/794bdde2-7446-4df1-86dd-85775d5d4455\" alt=\"Yellow Gear\" width=\"35\"  /\u003e\n\u003e The main objective of this project \nis to enhance the visual appearance of \"React applications\" by applying various styling techniques. \n \u003cbr/\u003e\u003cbr/\u003e ➖ The web page is not functional as clicking \"Create a new account\" or \"SIGN IN\" does not do anything. \u003cbr/\u003e\n➖ However, entering invalid credentials will highlight the input fields with a red background color and border, indicating that conditional styles are present.\n\n- Initially, I will utilize Vanilla CSS to style the application. \u003cbr/\u003e\n\n- After that, I will switch to CSS-in-JS styling using \"Styled Components\". \u003cbr/\u003e\n\n- Finally, in the last step of the project, I will modify the style of the application using Tailwind CSS. \u003cbr/\u003e\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://sign-in-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e Sign in Form\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e \n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/9143a0d3-7d0a-49c8-9388-306bb0d760ef\n\n  \u003cbr/\u003e \n\n ***\n \u003c!--=====================  Styling React Component =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; Styling React Component \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n### Pre-built Project \u003cimg src=\"https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/794bdde2-7446-4df1-86dd-85775d5d4455\" alt=\"Yellow Gear\" width=\"35\"  /\u003e\nThroughout my work on this project, I focused solely on the ` styling of the React Component `, which had already _been developed_ and _provided to me_. \u003cbr/\u003e\n\u003e ### To accomplish this task \u003cbr/\u003e\n\n+ I practiced utilizing various styling techniques such as ` Inline Styles `, ` Styled Components `, and ` CSS Modules `. \u003cbr/\u003e\n+ By applying these techniques, I was able to modify the appearance of the component to meet the desired design specifications.\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://styling-react-component-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e Styling React Component\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/347f279f-f3ef-470f-a948-46f2eceabf5e\n\n  \u003cbr/\u003e \n\n ***\n \u003c!--=====================  Final CountDown =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; Final CountDown \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\nThis section is about ` Refs ` and ` Portals `. Two slightly more advanced React concepts which you definitely don't need in all React apps you are going to build.\n\u003e 🔑 In this project, I have undertaken some key concepts :\n- 🔓 Accessing _DOM Elements_ with ` Refs ` \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 _Managing Values_ with Refs \u003cbr/\u003e\n- 🔓 Forwarding Refs to Custom Components using ` forwardRef ` function  \u003cbr/\u003e\n- 🔓 Exposing Component APIs via the ` useImperativeHandle ` Hook  \u003cbr/\u003e\n- 🔓 Detaching DOM Rendering from JSX Structure with ` portals `\n  \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003e It is kind of a Game where website visitors can start different timer challenges with the goal of estimating when time is up and stopping the timer early enough before it expires.\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://final-count-down-shahram.netlify.app/\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e Final CountDown\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/7c820fee-0d50-4dac-b4c0-d85242c1f377\n\n  \u003cbr/\u003e \n\n ***\n \u003c!--=====================  JSX Limitations =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp;  JSX Limitations \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n### Pre-built Project \u003cimg src=\"https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/794bdde2-7446-4df1-86dd-85775d5d4455\" alt=\"Yellow Gear\" width=\"35\"  /\u003e\nThroughout my work on this project, I focused solely on the ` JSX Limitations `, which had already _been developed_ and _provided to me_. \u003cbr/\u003e\n\n\u003e 🔑 Which Concepts Have I Covered :  :  \u003cbr/\u003e\n\n- 🔓 One JSX Limitations is you can't return more than one \"root\" JSX element : \u003cbr/\u003e\n  1. Creating a custom Wrapper Component \u003cbr/\u003e\n  2. ` \"Fragments\" ` like React fragments can help us overocome JSX limitations. \u003cbr/\u003e\n- 🔓 Getting a Cleaner DOM with ` \"Portals\" ` \u003cbr/\u003e\n- 🔓 Working with ` \"Refs\" ` \u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/ee0be71e-7956-42a6-bf46-220117f5e9b0\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\n![JSX-Limitations](https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/62adb840-4121-4804-8185-cfa91d279e34)\n\n  \u003cbr/\u003e \n\n ***\n\u003c!--=====================  React Project Management =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; React Project Management \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n- Project management is a system that allows users to create and manage multiple projects in one place. Users can add new projects, select a desired project to open, and then add tasks within the project. Tasks and projects can be cleared, or deleted as needed. \u003cbr/\u003e\nThis system helps users stay organized and on track with their project goals.\n\n\u003e For this project, I plan to incorporate all the concepts covered in the course up to this point.\u003cbr/\u003e\n\u003e 🔑 Which Concepts Have I Covered : \n- 🔓 Configure \u0026 Re-use ` Components ` \u003cbr/\u003e\n- 🔓 Managing ` State ` to Switch Between Components \u003cbr/\u003e\n- 🔓 Access DOM Elements \u0026 Browser APIs with ` Refs ` \u003cbr/\u003e\n- 🔓 Collecting User Input with Refs, using ` ForwardRef ` \u003cbr/\u003e\n- 🔓 Validating User Input \u0026 Showing an Error Modal via ` useImperativeHandle ` \u003cbr/\u003e\n- 🔓 ` Prop Drilling ` \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Styling via ` Tailwind CSS ` \u003cbr/\u003e\n\n\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://react-project-management-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e React Project Management\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/933d2ab3-3e8a-4b81-bf6f-abf56138f9fe\n\n  \u003cbr/\u003e \n\n ***\n \u003c!--=====================  Online Clothing Shop =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; Online Clothing Shop \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n### Pre-built Project \u003cimg src=\"https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/794bdde2-7446-4df1-86dd-85775d5d4455\" alt=\"Yellow Gear\" width=\"35\"  /\u003e\n- During the course of this project, my primary focus was dedicated to devising solutions for the issue of Shared-State (` Prop Drilling `), which had already been developed and provided to me.\n- It is important to note that this establishment does not constitute a comprehensive online retail platform, rather, it serves solely as a shop with functionality limited to the cart feature.\n\n\u003e 🔑 Which Concepts Have I Covered : \n- 🔓 Working on solutions for the problem of Shared-State(` Prop Drilling `)  \u003cbr/\u003e\n- 🔓 Embracing ` Component Composition ` \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Sharing State with ` Context ` \u003cbr/\u003e \n- 🔓 Managing complex state with ` Redusers `\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://online-clothing-shop-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e Online Clothing Shop\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/3921b229-04c4-49f2-a8dd-38a76d5e10f9\n\n  \u003cbr/\u003e \n\n ***\n \u003c!--=====================  Place Picker Application =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; Place Picker Application \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n### Pre-built Project \u003cimg src=\"https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/794bdde2-7446-4df1-86dd-85775d5d4455\" alt=\"Yellow Gear\" width=\"35\"  /\u003e\n- This application is a Place Picker that enables us to select destinations we may want to visit in the future.\n- It also provides the option to remove places from our list if we decide not to visit them. \u003cbr/\u003e\u003cbr/\u003e\n\n- You must ` allow browser location ` access to retrieve places based on your current location.\n\n\u003e 🔑 Which Concepts Have I Covered : \n- 🔓 Understanding ` Side Effects \u0026 useEffect() `  \u003cbr/\u003e\n- 🔓 ` How to use ` useEffect()  \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 How to manage useEffect() ` Dependencies `  \u003cbr/\u003e \n- 🔓 ` When NOT ` to use useEffect()\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://place-picker-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e Place Picker Application\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/b0ccf5d6-9c07-4f20-98b8-8111c4eef2f2\n\n  \u003cbr/\u003e \n\n ***\n\u003c!--=====================  Simple Login =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; Simple Login \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n### Pre-built Project \u003cimg src=\"https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/794bdde2-7446-4df1-86dd-85775d5d4455\" alt=\"Yellow Gear\" width=\"35\"  /\u003e\n- In this project, the authentication process is not authentic.\n- All you need is a valid email address and a password with a minimum length of 7 characters.\n- Once you click on the login button, you will be directed to the welcome screen, and the log out button will return you to the previous page.\n\n\u003e 🔑 Which Concepts Have I Covered : \n- 🔓 Working with (Side) Effects \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Managing more complex State with Reducers \u003cbr/\u003e\n- 🔓 Managing App-Wide or Component-Wide State with Context API  \u003cbr/\u003e \n- 🔓 Working with forwardRef \u0026 useImperativeHandle\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://simple-login-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e Simple Login\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/383aabf4-7cc5-4db3-8173-1ccc7d9bf1b4\n\n  \u003cbr/\u003e \n\n ***\n\u003c!--=====================  React Quiz =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; React Quiz \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n- This React Quiz Application is a comprehensive and engaging platform designed to test your knowledge of React concepts, including side effects and many other key topics.\n- With a wide range of multiple choice questions, users can challenge themselves and enhance their understanding of React while having fun.\n- Whether you're a beginner looking to learn more about React or an experienced developer wanting to test your skills, \u003cbr/\u003e\n  this quiz app is the perfect tool for expanding your knowledge and honing your expertise in React.\n\n\u003e In this project, I have undertaken an in-depth exploration of numerous key concepts. \u003cbr/\u003e\n\n\u003e 🔑 Which Concepts Have I Covered :  \n- 🔓 Deriving ` Computed-Values ` from State \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Updating State based on Old-State \u003cbr/\u003e\n- 🔓 Working with ` useEffect ` to Manage setTimeout and setInterval \u003cbr/\u003e\n- 🔓 Workin with ` useCallback ` to Skipping re-rendering of components  \u003cbr/\u003e\n- 🔓 Using Effect ` Cleanup Functions ` \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Using ` Keys ` for Resetting Components \u003cbr/\u003e\n- 🔓 Splitting Components Up \u0026nbsp;\u0026nbsp;\u0026nbsp; 🔓 Moving State Down \u003cbr/\u003e\n\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://react-quiz-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e React Quiz\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Basic-Course/assets/110089830/2424ac28-55f9-466b-b7d0-1b10ecc9a85f\n\n  \u003cbr/\u003e \n  \n***\n\u003c!--=====================  Food Order Application =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; Food Order Application \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n- This project serves as a larger application that integrates all the key concepts I learned throughout the course. \u003cbr/\u003e\n  It provides a context to see these concepts in action within a bigger project, covering essential React features like Components, State, and more from the basics.\n- This project is a basic Food Order App that features a menu of available meals for selection. Users can choose meals from the menu and add them to their cart, with the ability to adjust quantities as needed.\n\n\u003e In this project, I have undertaken an in-depth exploration of numerous key concepts. \u003cbr/\u003e\n\n\u003e 🔑 Which Concepts Have I Covered :  \n- 🔓 Set up the Components and then Isolate them. \u003cbr/\u003e\n- 🔓 Working with ` re-usable \u0026 pre-styled ` Utilities Component \u003cbr/\u003e\n- 🔓 Adding a Modal via a ` React Portal `  \u003cbr/\u003e\n- 🔓 Managing State \u0026 Props with ` Prop Drilling ` instead of  using Context to make Modal more _re-useable_ \u0026 does not tie it to one specific case. \u003cbr/\u003e\n- 🔓 Work with ` Context ` to Manage all Cart Data through Context  \u003cbr/\u003e\n- 🔓 Utilizing the ` Reducer ` Hook to handle the Addition and Removal of items from the Cart \u003cbr/\u003e\n- 🔓 State \u0026 Conditional Rendering \u003cbr/\u003e\n- 🔓 Working with ` Refs ` \u0026 ` Forward Refs ` \u003cbr/\u003e\n- 🔓 Using the ` useEffect ` Hook \u003cbr/\u003e\n- 🔓 Using ` CSS Modul ` for Styling \u003cbr/\u003e\n\n\u003c!-------- try it live --------\u003e\n ### Give it a go in real-time and give me a Star \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"35\"  /\u003e\n \u003ca href=\"https://food-order-app-shahram.netlify.app/\" target=\"_blank\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Light%20Bulb.webp\" alt=\"Light Bulb\" width=\"25\" height=\"25\" /\u003e Food Order Application\n\u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\n  \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/ReactJS-Basic-Course/assets/110089830/3c86a976-e766-4f84-8752-a9b7dc7170b6\n\n  \u003cbr/\u003e \n  \n ***\n \u003c!--======================= Social Media ===========================--\u003e\n ## \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Telephone.webp\" alt=\"Telephone\" width=\"55\"  /\u003e Find me around the Web :\n\u003ca href=\"https://www.linkedin.com/in/shahramshakiba/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/linkedin/default.svg\" width=\"52\" height=\"40\" alt=\"linkedin logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://t.me/ShahramShakibaa\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/telegram/default.svg\" width=\"52\" height=\"40\" alt=\"telegram logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://wa.me/message/LM2IMM3ABZ7ZM1\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/whatsapp/default.svg\" width=\"52\" height=\"40\" alt=\"whatsapp logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://instagram.com/shahram.shakibaa?igshid=MzNlNGNkZWQ4Mg==\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/instagram/default.svg\" width=\"52\" height=\"40\" alt=\"instagram logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://twitter.com/ShahramShakibaa\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/twitter/default.svg\" width=\"52\" height=\"40\" alt=\"twitter logo\"  /\u003e\n  \u003c/a\u003e\n\n\n\n\u003c!--------- Interactions\n \u003cimg src=\"https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/62f092a8-87b5-448e-84ae-7250b65b6316\" alt=\"Light Bulb\" width=\"155\"  /\u003e\n---------\u003e\n\u003c!--------- 5-Stars\n\u003cimg src=\"https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/067a6398-5c5b-4021-98a3-bbf1ecbc13bb\" alt=\"5 Stars\" width=\"75\"  /\u003e \n---------\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahramshakiba%2Freactjs-basic-course","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshahramshakiba%2Freactjs-basic-course","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahramshakiba%2Freactjs-basic-course/lists"}