Learn
M5: Frontend

Module 5: Frontend

Green Boost uses the JavaScript Library, React (opens in a new tab), the React Framework, Next.js (opens in a new tab), and the UI Component Library, Material UI (opens in a new tab).

Learn

  • React: read React's new and interactive learning plan (opens in a new tab).
  • Next.js: read Next.js' docs (opens in a new tab) focusing on Project Structure, React Essentials, Routing, Data Fetching, and Rendering.
    • Notice how React Server Components enable fetching data directly in components and passing that data via props client components. This means you don't have to build backend for frontend APIs you'd traditionally need with a single page application (SPA).
    • Notice how server actions enable server side mutation functions to exist within (or besides) the client components calling it. Next.js transparently handles the network requests for you.
⚠️

Co-locating client and server code is productivity boost, but also a potential security concern. Checkout the guide on Configuration to ensure server code doesn't get into client bundles.

Apply

M5.1 - Run The Dev Server

With your DB port forwarded to your local machine as you learned in the previous module, let's run the Next.js local development server.

  • Within the ui/ folder, run pnpm dev.
  • Visit http://localhost:3000 (opens in a new tab) and interact with your web app locally!
  • Try changing the color of the app bar by updating theme.colorSchemes.light.palette.primary.main from colors.lagoon to colors.carrot in ui/src/components/theme/theme.tsx. Save the file and then watch the update happen in your browser

M5.2 - Create The Album Table Page

Continuing with our album feature request from the previous module, let's create an album table page so that users can list their albums.

  • Let's start by adding the server component: ui/src/app/albums/page.tsx.
    • You can follow the example from ui/src/app/items/page.tsx.
    • Make sure to call listAlbumsUseCase which you refactored in the last module
  • Now create the client component: ui/src/app/albums/AlbumsTable.tsx.
    • Follow the example from ui/src/app/items/ItemsTable.tsx excluding any code related to filtering and sorting.
  • Visit http://localhost:3000/albums (opens in a new tab) to see your table!
    • Notice how Next.js automatically sets up routing for you based on the file structure.

M5.3 - Create The Create/View Album Page

Add the Create and View album page so users can create and individually view albums.

  • Add ui/src/app/albums/new/page.tsx, ui/src/app/albums/new/CreateAlbum.tsx, and ui/src/app/albums/new/create-album-action.ts.
    • Use ui/src/app/items/new/** to guide you.
    • Ensure you're using the createAlbumUseCase function in ui/src/app/albums/new/create-album-action.ts you refactored in the last module
  • Visit http://localhost:3000/albums/new (opens in a new tab) and create a new album. Note, the id created
  • Give users a way to access the page to create a new album by adding a toolbar to the top of the table. Add ui/src/app/albums/AlbumsToolbar.tsx and update ui/src/app/albums/AlbumsTable.tsx to reference it.
    • Use ui/src/app/items/ItemsToolbar.tsx to guide you.
  • Add ui/src/app/albums/[id]/page.tsx, ui/src/app/albums/[id]/CreateItem.tsx, and ui/src/app/albums/[id]/update-album-action.ts.
  • Visit http://localhost:3000/albums/<id> replacing <id> with the id of the album you previously created.

Bonus

M5.4 - Add Filtering and Sorting to Album Table Page

Congrats on enabling users to create, read, and update albums in your web app! Users have reported they want the ability to filter and sort. Add this capability

  • Create a script, core/src/db/scripts/seed-albums.ts to generate 10s of albums to test sorting and filtering on.
  • Update ui/src/app/albums/AlbumsTable.tsx to add sorting and filtering capabilities to the frontend.
  • Update core/src/modules/albums/list-albums.usecase.ts to accept parameters necessary for filtering and sorting.
M4: BackendM6: Tooling