Repository files navigation

• 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

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

1. Build SideBar and Content components

   Sidebar

   • Show a list of projects
   • Have an "Add Project" button that navigatesto form to add to the list of project
   • List of projects should be navigatable to theproject 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 thenew 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 withthe 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 aform and button respectively
   • Again manage your tasks state associated with eachproject, likely in the App component as well

1. create aREADME.md file
2. runnpm install
3. runnpm run dev

1. createProjectsSidebar.jsx component
2. output<ProjectsSidebar /> component inApp.js

1. apply styles inApp.jsx
2. apply styles inProjectsSidebar.jsx

1. createNewProject.jsx component
2. create a reusableInput.jsx component
3. use this reusableInput.jsx component inNewProject.jsx component
4. useNewProject.jsx component inApp.jsx component

1. apply styles inNewProject.jsx component
2. apply styles inInput.jsx component

1. create aNoProjectSelected.jsx component
2. create a reusableButton.jsx component
3. replace the button inProjectsSidebar.jsx with the<Button /> component
4. use the<Button /> component in theNoProjectSelected.jsx component
5. replace the<NewProject /> component with the<NoProjectSelected /> component inApp.jsx

1. add aProjectsState withuseState() inApp.jsx
2. create ahandleStartAddProject() function, then use it on<ProjectsSidebar /> &< NoProjectSelected />
3. use theonStartAddProject prop inProjectsSidebar.jsx &NoProjectSelected.jsx components
4. add acontent variable to conditonally output either the<NoProjectSelected /> or the<NewProject /> components

1. collect user input values withuseRef() in theNewProject.jsx component
2. importforwardRef from React & use it inInput.jsx
3. add ahandleSave() function inNewProject.jsx
4. add ahandleAddProject() function inApp.jsx
5. invokehandleAddProject() insideNewProject.jsx

1. close the form if we click onSave button by settingselectedId toundefined inhandleAddProject() inApp.js
2. output the projects list inProjectsSidebar.jsx

1. create aModal.jsx component
2. write conditions for showing either error modal or validating the form inNewProject.jsx
3. usecreatePortal() fromreact-dom to render the modal in a different place from the DOM
4. useforwardRef() &useImperativeHandle() hooks fromreact to make the modal even more flexible
5. use the<Modal /> component inNewProject.jsx

1. apply styles inNewProject.jsx &Modal.jsx
2. make theCancel button work inNewProject.jsx with help of thehandleCancelAddProject() function

1. add a newSelectedProject.jsx component
2. output the<SelectedProject /> component inProjectsSidebar.jsx
   1. make sure that the projects can be selected by adding ahandleSelectProject() function inApp.jsx
   2. extract theonSelectProject prop fromApp.jsx inProjectsSidebar.jsx and connect it to thebutton
   3. highlight which project was selected with help of theselectedProjectId
3. use the<SelectedProject /> and output it inApp.jsx if a project was selected
4. configure theonClick prop inProjectsSidebar.jsx so that you can pass theproject.id toonSelectProject prop

1. add ahandleDeleteProject() function inApp.jsx
2. extract theonDelete prop fromApp.jsx and connect it to the<button> inSelectedProject.jsx

1. create aTasks.jsx component
2. output the<Tasks /> component inSelectedProject.jsx
3. create aNewTask.jsx component to add new tasks to the project
4. output the<NewTask /> component inTasks.jsx

1. extract the value entered by the user into the<input /> inNewTask.jsx with help ofuseState()
2. when thebutton is clicked inNewTask.jsx, forward this task information inApp.jsx to store it
3. use prop drilling to forward functions into several layers of components
4. output the tasks in theTasks.jsx component
5. use prop drilling to forward thetasks prop to all the related components

1. add a newhandleDeleteTask inApp.jsx
2. connect the function to the<button> inTasks.jsx

1. make tasks unique for each project