RizTech Academy logo
RizTech Academy

Full-Stack Web Development with Next.js and NestJS

Build and ship a complete online grocery store — React and Next.js on the front, NestJS and PostgreSQL behind it.

This is the course everything else on this site builds towards. You write both halves of a real application and connect them properly, which is the part that tutorials almost always skip.

The front end is React with Next.js. The back end is NestJS with PostgreSQL and Prisma. Both are TypeScript, so one language covers the whole stack and the types travel between them.

The project is a working online grocery store for a neighbourhood kirana shop: catalogue, search, cart, checkout, payments, order tracking, delivery slots and an admin area for the owner. The sort of thing BigBasket does, at a scale one shop can actually run.

It is deliberately a real brief rather than a to-do list. Real briefs have stock that runs out mid-checkout, prices that change while an item sits in a cart, and customers who refresh at exactly the wrong moment. Those problems are the reason this course is worth taking, and they are why it is the longest one here.

Who this is for

  • Developers who can write TypeScript and want to build whole products
  • Front-end developers who want to own the back end too
  • Back-end developers tired of waiting on somebody else for the UI
  • Interns moving on to real client project work

What you need first

  • Solid JavaScript and TypeScript. The TypeScript Foundation course is assumed throughout, not taught again.
  • HTML and CSS to roughly the level of our Web UI Development Foundation course.
  • SQL basics. The Database Foundation course covers far more than enough.
  • Comfort with Git and the command line.

Tools you will use

Next.jsReactNestJSTypeScriptPostgreSQLPrismaTailwind CSSDockerPlaywrightVercel

By the end you can

  • Build a React front end with the Next.js App Router, server and client components
  • Build a NestJS back end with modules, dependency injection, guards and pipes
  • Model and query PostgreSQL through Prisma, including migrations
  • Design REST APIs with validation, useful errors and pagination
  • Implement authentication, sessions and role-based access properly
  • Handle money, stock and orders without a race condition losing you data
  • Take payments through a gateway in test mode, verified by webhook
  • Test both halves of the stack, including end to end
  • Deploy the whole thing and know when it breaks
Syllabus

16 modules, 81 lessons

Work through these in order. Each lesson is short enough to finish in one sitting and ends with something to build, not a quiz.

  1. 1

    How a Full-Stack Application Fits Together

    The mental model first, so the rest of the course has somewhere to attach.

    1. The shape of a modern web applicationComing soon
    2. What runs where, and why it matters so muchComing soon
    3. HTTP, REST and the life of a requestComing soon
    4. Setting up the project you will build all courseComing soon
  2. 2

    React Fundamentals

    Enough React to build real interfaces, without the folklore.

    1. Components and JSXComing soon
    2. Props, and thinking in componentsComing soon
    3. State and useStateComing soon
    4. Events and controlled formsComing soon
    5. useEffect, and why you need it less than you thinkComing soon
    6. Lists, keys and rendering collectionsComing soon
    7. Composition over configurationComing soon
  3. 3

    Next.js: Routing and Rendering

    The framework that makes a storefront fast and findable.

    1. The App Router and file-based routingComing soon
    2. Server components versus client componentsComing soon
    3. Fetching data, caching and revalidationComing soon
    4. Layouts, loading and error statesComing soon
    5. Server actions, and forms without writing an API callComing soon
    6. Metadata and SEO for a storefront that must rankComing soon
  4. 4

    Building the Interface

    Making it look right and work for everybody, including on a cheap phone.

    1. Styling with TailwindComing soon
    2. A small component library you will actually reuseComing soon
    3. Responsive layouts for a real product gridComing soon
    4. Accessible forms and validation feedbackComing soon
    5. Client state: when you need it and what to useComing soon
  5. 5

    NestJS Fundamentals

    Structure, and what dependency injection actually buys you.

    1. Why NestJS, and what its structure is forComing soon
    2. ModulesComing soon
    3. Controllers and routingComing soon
    4. Providers and dependency injectionComing soon
    5. Pipes, filters and interceptorsComing soon
    6. Configuration, environments and secretsComing soon
  6. 6

    The Data Layer

    Prisma and PostgreSQL, from schema to query.

    1. Prisma: schema, client and migrationsComing soon
    2. Modelling the catalogueComing soon
    3. Relations in PrismaComing soon
    4. Queries, filtering and paginationComing soon
    5. Transactions, where they genuinely matterComing soon
    6. Seeding a database you can actually develop againstComing soon
  7. 7

    REST APIs Done Properly

    The difference between an API that works and one somebody else can use.

    1. Designing the endpoints before writing themComing soon
    2. DTOs and validationComing soon
    3. Errors a client can actually act onComing soon
    4. Pagination, filtering and sortingComing soon
    5. Versioning, and not breaking your own front endComing soon
  8. 8

    Authentication and Authorisation

    Getting the part wrong that you cannot afford to get wrong.

    1. Sessions, tokens, and what to use whenComing soon
    2. Registration and loginComing soon
    3. Storing passwords properlyComing soon
    4. Guards and role-based accessComing soon
    5. Protecting pages and actions on the front endComing soon
  9. 9

    Connecting the Two Halves

    The seam between front and back, which is where most bugs live.

    1. Sharing types between front end and back endComing soon
    2. Loading states, errors and optimistic updatesComing soon
    3. Handling failure without showing a blank screenComing soon
    4. CORS, cookies and the security basicsComing soon
  10. 10

    Kirana Store: Planning

    What the shop actually needs, decided before any code is written.

    1. The brief: what a kirana shop actually needs onlineComing soon
    2. From a brief to user storiesComing soon
    3. Designing the data modelComing soon
    4. Deciding the architecture, and writing down whyComing soon
  11. 11

    Kirana Store: Catalogue and Search

    Products, categories and the units a grocery shop actually sells in.

    1. Products, categories, units and pricingComing soon
    2. The catalogue APIComing soon
    3. The storefront and product gridComing soon
    4. Search, filters and sensible defaultsComing soon
    5. Product images, and why they will slow you downComing soon
  12. 12

    Kirana Store: Cart and Checkout

    The hardest part of any shop, and the part most tutorials fake.

    1. Modelling a cart that survives a refresh and a loginComing soon
    2. The cart interfaceComing soon
    3. Stock: the hard problem nobody warns you aboutComing soon
    4. The checkout flowComing soon
    5. Addresses and delivery slotsComing soon
  13. 13

    Kirana Store: Orders and Admin

    What happens after the customer pays, and the screens the owner lives in.

    1. Orders, statuses and the state machineComing soon
    2. Order history and trackingComing soon
    3. The shop owner's admin areaComing soon
    4. Managing inventory and pricesComing soon
    5. Telling the customer what is happeningComing soon
  14. 14

    Payments

    Taking money, in test mode, without trusting anything the browser tells you.

    1. How an online payment actually worksComing soon
    2. Integrating a payment gateway in test modeComing soon
    3. Webhooks, and never trusting the browserComing soon
    4. Failed payments, retries and refundsComing soon
  15. 15

    Testing the Whole Stack

    Enough tests to change the code without fear, and no more.

    1. What to test, and what not to bother withComing soon
    2. Unit testing NestJS servicesComing soon
    3. Testing the API end to endComing soon
    4. Testing React componentsComing soon
    5. End-to-end tests with PlaywrightComing soon
  16. 16

    Shipping It

    Getting it live, and knowing when it breaks at two in the morning.

    1. Environments, secrets and configurationComing soon
    2. Deploying the front endComing soon
    3. Deploying the API and the databaseComing soon
    4. Logging, errors and knowing when it breaksComing soon
    5. Going live, and the checklist to run firstComing soon
Previous courseKotlin Multiplatform with ComposeNext courseAWS DevOps in Practice

Learning this with a mentor is faster

Our internship programme is free and fully remote. You get this curriculum, real project work, and code review from working developers.

Apply for the internshipAll courses