- 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
- Build SideBar and Content components
- 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
- 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
- Project Detail components
- 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
- show the title and description of the project along with the due date of the project
- show a delete button and handle the deletion
- 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
- create a
README.md
file - run
npm install
- run
npm run dev
- create
ProjectsSidebar.jsx
component - output
<ProjectsSidebar />
component inApp.js
- apply styles in
App.jsx
- apply styles in
ProjectsSidebar.jsx
- create
NewProject.jsx
component - create a reusable
Input.jsx
component - use this reusable
Input.jsx
component inNewProject.jsx
component - use
NewProject.jsx
component inApp.jsx
component
- apply styles in
NewProject.jsx
component - apply styles in
Input.jsx
component
- create a
NoProjectSelected.jsx
component - create a reusable
Button.jsx
component - replace the button in
ProjectsSidebar.jsx
with the<Button />
component - use the
<Button />
component in theNoProjectSelected.jsx
component - replace the
<NewProject />
component with the<NoProjectSelected />
component inApp.jsx
- add a
ProjectsState
withuseState()
inApp.jsx
- create a
handleStartAddProject()
function, then use it on<ProjectsSidebar />
&< NoProjectSelected />
- use the
onStartAddProject
prop inProjectsSidebar.jsx
&NoProjectSelected.jsx
components - add a
content
variable to conditonally output either the<NoProjectSelected />
or the<NewProject />
components
- collect user input values with
useRef()
in theNewProject.jsx
component - import
forwardRef
from React & use it inInput.jsx
- add a
handleSave()
function inNewProject.jsx
- add a
handleAddProject()
function inApp.jsx
- invoke
handleAddProject()
insideNewProject.jsx
- close the form if we click on
Save
button by settingselectedId
toundefined
inhandleAddProject()
inApp.js
- output the projects list in
ProjectsSidebar.jsx
- create a
Modal.jsx
component - write conditions for showing either error modal or validating the form in
NewProject.jsx
- use
createPortal()
fromreact-dom
to render the modal in a different place from the DOM - use
forwardRef()
&useImperativeHandle()
hooks fromreact
to make the modal even more flexible - use the
<Modal />
component inNewProject.jsx
- apply styles in
NewProject.jsx
&Modal.jsx
- make the
Cancel
button work inNewProject.jsx
with help of thehandleCancelAddProject()
function
- add a new
SelectedProject.jsx
component - output the
<SelectedProject />
component inProjectsSidebar.jsx
- make sure that the projects can be selected by adding a
handleSelectProject()
function inApp.jsx
- extract the
onSelectProject
prop fromApp.jsx
inProjectsSidebar.jsx
and connect it to thebutton
- highlight which project was selected with help of the
selectedProjectId
- make sure that the projects can be selected by adding a
- use the
<SelectedProject />
and output it inApp.jsx
if a project was selected - configure the
onClick
prop inProjectsSidebar.jsx
so that you can pass theproject.id
toonSelectProject
prop
- add a
handleDeleteProject()
function inApp.jsx
- extract the
onDelete
prop fromApp.jsx
and connect it to the<button>
inSelectedProject.jsx
- create a
Tasks.jsx
component - output the
<Tasks />
component inSelectedProject.jsx
- create a
NewTask.jsx
component to add new tasks to the project - output the
<NewTask />
component inTasks.jsx
- extract the value entered by the user into the
<input />
inNewTask.jsx
with help ofuseState()
- when the
button
is clicked inNewTask.jsx
, forward this task information inApp.jsx
to store it - use prop drilling to forward functions into several layers of components
- output the tasks in the
Tasks.jsx
component - use prop drilling to forward the
tasks
prop to all the related components
- add a new
handleDeleteTask
inApp.jsx
- connect the function to the
<button>
inTasks.jsx
- make tasks unique for each project