Project Management
The Project Management demo brings project overviews, work views and scheduling into one application. You can keep that arrangement, change how the screens are grouped, or adapt individual views for your own pages.
Included screens
| Screen | What it shows |
|---|---|
| Dashboard | Progress, project summaries and work metrics |
| Projects | A project directory with list and grid views |
| Project workspace | Overview, tasks, scrumboard, timeline and project settings |
| Calendar | Events with scheduling and filtering controls |
| Activity | An activity feed with filters |
Add a screen to your starter
Choose the screen closest to what you want to build, then add it from the Project Management template. For example, to add the directory screen:
Open /projects after the command finishes. Its main source is in src/app/(protected-pages)/projects/.
The directory and the selected-item workspace are separate demo pages. If you want both parts, also add the dynamic workspace:
The workspace source is in src/app/(protected-pages)/[projectId]/. [projectId] is replaced by the selected record's ID in the URL; /proj-001 opens one of the supplied examples. Run npx nateui@latest list --template project-management to see the other available page IDs. See Add demo pages for adding, replacing or removing a page.
Turn it into your page
The supplied names, fields, views and statuses are examples. You can keep one screen, combine several, or reuse only a useful part without adopting the demo's project structure.
A practical way to adapt a screen is:
- Search for a visible heading, field label or action to find the component that renders it.
- Change the information and actions shown to the user.
- Remove views or controls your application does not need.
- If you keep both the directory and workspace, use the same record ID in the directory link and the workspace data request so the selected item opens correctly.
Begin in the folder of the page you added. If the supplied screens do not fit what you are building, follow Create your own page and reuse only the views or components you need.
Connect your application
The added screen uses sample data and demonstration interactions. Replace its data reads with calls to the database or API used by your application. Keep the data shape expected by the screen, or update its components and types at the same time.
Then connect the actions you keep—such as creating, editing or deleting a record—to real write operations. A visible change or success message in the demo does not by itself mean the change is stored.
Test the complete round trip: load a record, change it, reload the page and confirm the saved result is returned. Follow Connect your data for the read and write pattern.