{"id":25169720,"url":"https://github.com/sofiane-abou-abderrahim/react-project-management","last_synced_at":"2026-04-05T20:31:15.854Z","repository":{"id":229082781,"uuid":"775705429","full_name":"sofiane-abou-abderrahim/react-project-management","owner":"sofiane-abou-abderrahim","description":"Explore this \"React Project Management\" demo app: a practical example of a ReactJS application implementing components, states, refs, portals, and styling with Tailwind CSS. Dive into the complete source code and delve into the technical details now! 🚀🔍","archived":false,"fork":false,"pushed_at":"2024-04-04T01:59:48.000Z","size":629,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T20:27:28.077Z","etag":null,"topics":["coding","frontend","javascript","portals","project-management","react-components","reactjs","refs","state-management","tailwindcss","vitejs","web-development"],"latest_commit_sha":null,"homepage":"https://sofiane-abou-abderrahim.github.io/react-project-management/","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/sofiane-abou-abderrahim.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":"2024-03-21T22:17:39.000Z","updated_at":"2024-06-23T13:26:04.000Z","dependencies_parsed_at":"2024-03-27T22:24:03.012Z","dependency_job_id":null,"html_url":"https://github.com/sofiane-abou-abderrahim/react-project-management","commit_stats":null,"previous_names":["sofiane-abou-abderrahim/react-project-management"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sofiane-abou-abderrahim/react-project-management","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-project-management","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-project-management/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-project-management/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-project-management/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sofiane-abou-abderrahim","download_url":"https://codeload.github.com/sofiane-abou-abderrahim/react-project-management/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-project-management/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31449238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T15:22:31.103Z","status":"ssl_error","status_checked_at":"2026-04-05T15:22:00.205Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["coding","frontend","javascript","portals","project-management","react-components","reactjs","refs","state-management","tailwindcss","vitejs","web-development"],"created_at":"2025-02-09T08:36:23.591Z","updated_at":"2026-04-05T20:31:15.821Z","avatar_url":"https://github.com/sofiane-abou-abderrahim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Practice Project: Advanced Concepts\n\n## Working with Components, State, Styling, Refs \u0026 Portals\n\n- Build a \"Project Management\" Web App\n- Build, Style, Configure \u0026 Re-use Components\n- Manage State\n- Access DOM Elements \u0026 Browser APIs with Refs\n- Manage JSX Rendering Positions with Portals\n- Apply some Styles with Tailwind CSS\n\n# Challenge Time!\n\nTry building this project on your own - or at least try to get as far as possible\n\n# Project's management application\n\n1.  Build SideBar and Content components\n    # Sidebar\n    - Show a list of projects\n    - Have an \"Add Project\" button that navigates\n      to form to add to the list of project\n    - List of projects should be navigatable to the\n      project detail view\n    # Content\n    - main content window where you will display projects\n    - should show fallback when there is no project to display\n    - fallback should have a button to navigate to the\n      new project form\n2.  Project Detail components\n    # New Project Form\n    - a form to add a new project\n    - should have a \"title\", \"description\", \u0026 \"due date\" fields\n    - ultimately update your state in the App component with\n      the new project information\n    # Project Detail component\n    - show the title and description of the project along with the due date of the project\n    - show a delete button and handle the deletion\n    # Tasks component\n    - nested in the detail view\n    - Show a list of tasks associated with the project\n    - Facilitate the adding/removal of tasks through a\n      form and button respectively\n    - Again manage your tasks state associated with each\n      project, likely in the App component as well\n\n# Steps\n\n## 0. Module Introduction \u0026 Starting Project\n\n1. create a `README.md` file\n2. run `npm install`\n3. run `npm run dev`\n\n## 1. Adding a \"Projects Sidebar\" Component\n\n1. create `ProjectsSidebar.jsx` component\n2. output `\u003cProjectsSidebar /\u003e` component in `App.js`\n\n## 2. Styling the Sidebar \u0026 Button with Tailwind CSS\n\n1. apply styles in `App.jsx`\n2. apply styles in `ProjectsSidebar.jsx`\n\n## 3. Adding the \"New Project\" Component \u0026 A Reusable \"Input\" Component\n\n1. create `NewProject.jsx` component\n2. create a reusable `Input.jsx` component\n3. use this reusable `Input.jsx` component in `NewProject.jsx` component\n4. use `NewProject.jsx` component in `App.jsx` component\n\n## 4. Styling Buttons \u0026 Inputs with Tailwind CSS\n\n1. apply styles in `NewProject.jsx` component\n2. apply styles in `Input.jsx` component\n\n## 5. Splitting Components to Split JSX \u0026 Tailwind Styles (for Higher Reusability)\n\n1. create a `NoProjectSelected.jsx` component\n2. create a reusable `Button.jsx` component\n3. replace the button in `ProjectsSidebar.jsx` with the `\u003cButton /\u003e` component\n4. use the `\u003cButton /\u003e` component in the `NoProjectSelected.jsx` component\n5. replace the `\u003cNewProject /\u003e` component with the `\u003cNoProjectSelected /\u003e` component in `App.jsx`\n\n## 6. Managing State to Switch Between Components\n\n1. add a `ProjectsState` with `useState()` in `App.jsx`\n2. create a `handleStartAddProject()` function, then use it on `\u003cProjectsSidebar /\u003e` \u0026 `\u003c NoProjectSelected /\u003e`\n3. use the `onStartAddProject` prop in `ProjectsSidebar.jsx` \u0026 `NoProjectSelected.jsx` components\n4. add a `content` variable to conditonally output either the `\u003cNoProjectSelected /\u003e` or the `\u003cNewProject /\u003e` components\n\n## 7. Collecting User Input with Refs \u0026 Forwarded Refs\n\n1. collect user input values with `useRef()` in the `NewProject.jsx` component\n2. import `forwardRef` from React \u0026 use it in `Input.jsx`\n3. add a `handleSave()` function in `NewProject.jsx`\n4. add a `handleAddProject()` function in `App.jsx`\n5. invoke `handleAddProject()` inside `NewProject.jsx`\n\n## 8. Handling Project Creation \u0026 Updating the UI\n\n1. close the form if we click on `Save` button by setting `selectedId` to `undefined` in `handleAddProject()` in `App.js`\n2. output the projects list in `ProjectsSidebar.jsx`\n\n## 9. Validating User Input \u0026 Showing an Error Modal via useImperativeHandle\n\n1. create a `Modal.jsx` component\n2. write conditions for showing either error modal or validating the form in `NewProject.jsx`\n3. use `createPortal()` from `react-dom` to render the modal in a different place from the DOM\n4. use `forwardRef()` \u0026 `useImperativeHandle()` hooks from `react` to make the modal even more flexible\n5. use the `\u003cModal /\u003e` component in `NewProject.jsx`\n\n## 10. Styling the Modal via Tailwind CSS\n\n1. apply styles in `NewProject.jsx` \u0026 `Modal.jsx`\n2. make the `Cancel` button work in `NewProject.jsx` with help of the `handleCancelAddProject()` function\n\n## 11. Making Projects Selectable \u0026 Viewing Project Details\n\n1. add a new `SelectedProject.jsx` component\n2. output the `\u003cSelectedProject /\u003e` component in `ProjectsSidebar.jsx`\n   1. make sure that the projects can be selected by adding a `handleSelectProject()` function in `App.jsx`\n   2. extract the `onSelectProject` prop from `App.jsx` in `ProjectsSidebar.jsx` and connect it to the `button`\n   3. highlight which project was selected with help of the `selectedProjectId`\n3. use the `\u003cSelectedProject /\u003e` and output it in `App.jsx` if a project was selected\n4. configure the `onClick` prop in `ProjectsSidebar.jsx` so that you can pass the `project.id` to `onSelectProject` prop\n\n## 12. Handling Project Deletion\n\n1. add a `handleDeleteProject()` function in `App.jsx`\n2. extract the `onDelete` prop from `App.jsx` and connect it to the `\u003cbutton\u003e` in `SelectedProject.jsx`\n\n## 13. Adding \"Project Tasks\" \u0026 A Tasks Component\n\n1. create a `Tasks.jsx` component\n2. output the `\u003cTasks /\u003e` component in `SelectedProject.jsx`\n3. create a `NewTask.jsx` component to add new tasks to the project\n4. output the `\u003cNewTask /\u003e` component in `Tasks.jsx`\n\n## 14. Managing Tasks \u0026 Understanding Prop Drilling\n\n1. extract the value entered by the user into the `\u003cinput /\u003e` in `NewTask.jsx` with help of `useState()`\n2. when the `button` is clicked in `NewTask.jsx`, forward this task information in `App.jsx` to store it\n3. use prop drilling to forward functions into several layers of components\n4. output the tasks in the `Tasks.jsx` component\n5. use prop drilling to forward the `tasks` prop to all the related components\n\n## 15. Clearing Tasks \u0026 Fixing Minor Bugs\n\n1. add a new `handleDeleteTask` in `App.jsx`\n2. connect the function to the `\u003cbutton\u003e` in `Tasks.jsx`\n\n## 16. Fixing More Bugs\n\n1. make tasks unique for each project\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-project-management","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-project-management","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-project-management/lists"}