Next.js
Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.
Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration.
Exercise 1 - Getting Started with Next.js
In the latest versions of Next.js and React, we were introduced to the concept of RSC (React Server Components). This is a new feature that allows us to render React components on the server. This opens up a lot of possibilities for server-side rendering, like faster page loads and better SEO. But it also introduces some new challenges, mostly to people that are just starting with React. Therefore, the idea of this exercise is to get you familiar with all these features, and to clearly understand what is happening in the client and what is happening in the server.
We will follow Next.js' tutorial to create a simple dashboard application. This tutorial will help you understand the basics of Next.js, React, RSC and Server Actions.
Exercise 2 - PlanIt Platform
We will now implement a complete platform for companies to organize events. Please check the platforms requirements and their estimates.
Methodology
Create an account on Trello or any other ticket management tool, and add all the user stories to a board. We will use this to keep track of the progress and communicate any possible question to the client. In this exercise the client is eagerworks.
In the board we will have 5 columns: Backlog, Current Sprint, In Progress, To Check, Done. The Backlog has all the platform user stories. The Current Sprint column has the user stories selected for this sprint iteration. Every time we start developing a new user story we need to move that user story to the In Progress column. We move to the To Check column when the user story is ready to be tested by the user. If the client validates the user story they move the card to the Done column.
You can check the UI on Figma.
Tools
To do this exercise we will use the T3 scaffolding tool. This tool will help us to create a Next.js application with all the necessary configurations to start developing the platform. We want to use the app router, Tailwind CSS for styling and Prisma as our ORM. For authentication we need to select None for now since we don't want to use NextAuth.js. We will use LuciaAuth for authentication. Lastly we will use tRPC to create our API.
tRPC (TypeScript Remote Procedure Call) is a framework that enables developers to build fully type-safe APIs without the need for a separate schema definition language or code generation. By leveraging TypeScript, tRPC ensures that the types of the server and client are synchronized, allowing developers to catch type errors at compile time rather than runtime. This leads to a more robust and maintainable codebase. tRPC simplifies API development by providing a straightforward, declarative way to define API routes and procedures directly within TypeScript. Additionally, it is strongly based on TanStack Query (formerly React Query), making it highly efficient for data fetching, caching, and synchronization in modern web applications. Its lightweight design and focus on type safety make it an attractive choice for projects where strong typing and developer productivity are paramount. This is really important to understand, because sometimes tRPC's doc is not super clear, and we can get lots of extra information from TanStack Query's documentation. There is a great video by Matt Pocock that teaches some tRPC basics in 5 minutes, you can check it here.
Some more useful resources: