Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sofiane-abou-abderrahim/react-project-management

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! 🚀🔍
https://github.com/sofiane-abou-abderrahim/react-project-management

coding frontend javascript portals project-management react-components reactjs refs state-management tailwindcss vitejs web-development

Last synced: about 23 hours ago
JSON representation

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! 🚀🔍

Awesome Lists containing this project

README 

        
# Practice Project: Advanced Concepts



## Working with Components, State, Styling, Refs & Portals



- Build a "Project Management" Web App

- Build, Style, Configure & Re-use Components

- Manage State

- Access DOM Elements & Browser APIs with Refs

- Manage JSX Rendering Positions with Portals

- Apply some Styles with Tailwind CSS



# Challenge Time!



Try building this project on your own - or at least try to get as far as possible



# Project's management application



1.  Build SideBar and Content components

    # Sidebar

    - Show a list of projects

    - Have an "Add Project" button that navigates

      to form to add to the list of project

    - List of projects should be navigatable to the

      project detail view

    # Content

    - main content window where you will display projects

    - should show fallback when there is no project to display

    - fallback should have a button to navigate to the

      new project form

2.  Project Detail components

    # New Project Form

    - a form to add a new project

    - should have a "title", "description", & "due date" fields

    - ultimately update your state in the App component with

      the new project information

    # Project Detail component

    - show the title and description of the project along with the due date of the project

    - show a delete button and handle the deletion

    # Tasks component

    - nested in the detail view

    - Show a list of tasks associated with the project

    - Facilitate the adding/removal of tasks through a

      form and button respectively

    - Again manage your tasks state associated with each

      project, likely in the App component as well



# Steps



## 0. Module Introduction & Starting Project



1. create a `README.md` file

2. run `npm install`

3. run `npm run dev`



## 1. Adding a "Projects Sidebar" Component



1. create `ProjectsSidebar.jsx` component

2. output `` component in `App.js`



## 2. Styling the Sidebar & Button with Tailwind CSS



1. apply styles in `App.jsx`

2. apply styles in `ProjectsSidebar.jsx`



## 3. Adding the "New Project" Component & A Reusable "Input" Component



1. create `NewProject.jsx` component

2. create a reusable `Input.jsx` component

3. use this reusable `Input.jsx` component in `NewProject.jsx` component

4. use `NewProject.jsx` component in `App.jsx` component



## 4. Styling Buttons & Inputs with Tailwind CSS



1. apply styles in `NewProject.jsx` component

2. apply styles in `Input.jsx` component



## 5. Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)



1. create a `NoProjectSelected.jsx` component

2. create a reusable `Button.jsx` component

3. replace the button in `ProjectsSidebar.jsx` with the `` component

4. use the `` component in the `NoProjectSelected.jsx` component

5. replace the `` component with the `` component in `App.jsx`



## 6. Managing State to Switch Between Components



1. add a `ProjectsState` with `useState()` in `App.jsx`

2. create a `handleStartAddProject()` function, then use it on `` & `< NoProjectSelected />`

3. use the `onStartAddProject` prop in `ProjectsSidebar.jsx` & `NoProjectSelected.jsx` components

4. add a `content` variable to conditonally output either the `` or the `` components



## 7. Collecting User Input with Refs & Forwarded Refs



1. collect user input values with `useRef()` in the `NewProject.jsx` component

2. import `forwardRef` from React & use it in `Input.jsx`

3. add a `handleSave()` function in `NewProject.jsx`

4. add a `handleAddProject()` function in `App.jsx`

5. invoke `handleAddProject()` inside `NewProject.jsx`



## 8. Handling Project Creation & Updating the UI



1. close the form if we click on `Save` button by setting `selectedId` to `undefined` in `handleAddProject()` in `App.js`

2. output the projects list in `ProjectsSidebar.jsx`



## 9. Validating User Input & Showing an Error Modal via useImperativeHandle



1. create a `Modal.jsx` component

2. write conditions for showing either error modal or validating the form in `NewProject.jsx`

3. use `createPortal()` from `react-dom` to render the modal in a different place from the DOM

4. use `forwardRef()` & `useImperativeHandle()` hooks from `react` to make the modal even more flexible

5. use the `` component in `NewProject.jsx`



## 10. Styling the Modal via Tailwind CSS



1. apply styles in `NewProject.jsx` & `Modal.jsx`

2. make the `Cancel` button work in `NewProject.jsx` with help of the `handleCancelAddProject()` function



## 11. Making Projects Selectable & Viewing Project Details



1. add a new `SelectedProject.jsx` component

2. output the `` component in `ProjectsSidebar.jsx`

   1. make sure that the projects can be selected by adding a `handleSelectProject()` function in `App.jsx`

   2. extract the `onSelectProject` prop from `App.jsx` in `ProjectsSidebar.jsx` and connect it to the `button`

   3. highlight which project was selected with help of the `selectedProjectId`

3. use the `` and output it in `App.jsx` if a project was selected

4. configure the `onClick` prop in `ProjectsSidebar.jsx` so that you can pass the `project.id` to `onSelectProject` prop



## 12. Handling Project Deletion



1. add a `handleDeleteProject()` function in `App.jsx`

2. extract the `onDelete` prop from `App.jsx` and connect it to the `` in `SelectedProject.jsx`



## 13. Adding "Project Tasks" & A Tasks Component



1. create a `Tasks.jsx` component

2. output the `` component in `SelectedProject.jsx`

3. create a `NewTask.jsx` component to add new tasks to the project

4. output the `` component in `Tasks.jsx`



## 14. Managing Tasks & Understanding Prop Drilling



1. extract the value entered by the user into the `` in `NewTask.jsx` with help of `useState()`

2. when the `button` is clicked in `NewTask.jsx`, forward this task information in `App.jsx` to store it

3. use prop drilling to forward functions into several layers of components

4. output the tasks in the `Tasks.jsx` component

5. use prop drilling to forward the `tasks` prop to all the related components



## 15. Clearing Tasks & Fixing Minor Bugs



1. add a new `handleDeleteTask` in `App.jsx`

2. connect the function to the `` in `Tasks.jsx`



## 16. Fixing More Bugs



1. make tasks unique for each project