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
Reference code

Stuck? Compare your work

The Kirana Store as the course builds it, one branch per module from module 10 onward. The teaching modules before that have no checkpoint, because they cover concepts rather than adding to one running project.

It is there for when you are stuck, not to start from. Type the code yourself first — copying it will teach you very little.

View on GitHub
Syllabus

17 modules, 86 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 application25 min
    2. What runs where, and why it matters so much25 min
    3. HTTP, REST and the life of a request30 min
    4. Setting up the project you will build all course30 min
  2. 2

    React Fundamentals

    Enough React to build real interfaces, without the folklore.

    1. Components and JSX25 min
    2. Props, and thinking in components25 min
    3. State and useState30 min
    4. Events and controlled forms30 min
    5. useEffect, and why you need it less than you think30 min
    6. Lists, keys and rendering collections25 min
    7. Composition over configuration25 min
  3. 3

    Next.js: Routing and Rendering

    The framework that makes a storefront fast and findable.

    1. The App Router and file-based routing30 min
    2. Server components versus client components35 min
    3. Fetching data, caching and revalidation35 min
    4. Layouts, loading and error states25 min
    5. Server actions, and forms without writing an API call30 min
    6. Metadata and SEO for a storefront that must rank25 min
  4. 4

    Building the Interface

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

    1. Styling with Tailwind25 min
    2. A small component library you will actually reuse30 min
    3. Responsive layouts for a real product grid30 min
    4. Accessible forms and validation feedback30 min
    5. Client state: when you need it and what to use30 min
  5. 5

    NestJS Fundamentals

    Structure, and what dependency injection actually buys you.

    1. Why NestJS, and what its structure is for25 min
    2. Modules30 min
    3. Controllers and routing30 min
    4. Providers and dependency injection35 min
    5. Pipes, filters and interceptors30 min
    6. Configuration, environments and secrets25 min
  6. 6

    The Data Layer

    Prisma and PostgreSQL, from schema to query.

    1. Prisma: schema, client and migrations30 min
    2. Modelling the catalogue35 min
    3. Relations in Prisma30 min
    4. Queries, filtering and pagination30 min
    5. Transactions, where they genuinely matter30 min
    6. Seeding a database you can actually develop against25 min
  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 them30 min
    2. DTOs and validation30 min
    3. Errors a client can actually act on30 min
    4. Pagination, filtering and sorting30 min
    5. Versioning, and not breaking your own front end25 min
  8. 8

    Authentication and Authorisation

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

    1. Sessions, tokens, and what to use when30 min
    2. Registration and login35 min
    3. Storing passwords properly25 min
    4. Guards and role-based access30 min
    5. Protecting pages and actions on the front end30 min
  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 end30 min
    2. Loading states, errors and optimistic updates35 min
    3. Handling failure without showing a blank screen25 min
    4. CORS, cookies and the security basics30 min
  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 online25 min
    2. From a brief to user stories30 min
    3. Designing the data model40 min
    4. Deciding the architecture, and writing down why30 min
  11. 11

    Kirana Store: Catalogue and Search

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

    1. Products, categories, units and pricing35 min
    2. The catalogue API35 min
    3. The storefront and product grid40 min
    4. Search, filters and sensible defaults35 min
    5. Product images, and why they will slow you down25 min
  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 login35 min
    2. The cart interface35 min
    3. Stock: the hard problem nobody warns you about40 min
    4. The checkout flow40 min
    5. Addresses and delivery slots30 min
  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 machine35 min
    2. Order history and tracking30 min
    3. The shop owner's admin area40 min
    4. Managing inventory and prices35 min
    5. Telling the customer what is happening25 min
  14. 14

    Payments

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

    1. How an online payment actually works25 min
    2. Integrating a payment gateway in test mode40 min
    3. Webhooks, and never trusting the browser35 min
    4. Failed payments, retries and refunds30 min
  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 with25 min
    2. Unit testing NestJS services30 min
    3. Testing the API end to end35 min
    4. Testing React components30 min
    5. End-to-end tests with Playwright35 min
  16. 16

    Shipping It

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

    1. Environments, secrets and configuration25 min
    2. Deploying the front end30 min
    3. Deploying the API and the database35 min
    4. Logging, errors and knowing when it breaks30 min
    5. Going live, and the checklist to run first30 min
  17. 17

    Engineering Practices Across a Stack

    The habits that make a three-layer codebase survivable: where a rule lives, what the layers agree to call things, and how to review a change that touches all of them.

    1. One concept, four names, and how to stop that30 min
    2. Which layer owns a rule35 min
    3. Contracts, error shapes and changing them safely35 min
    4. The bugs that only exist between layers40 min
    5. Reviewing a diff that spans web, API and schema30 min
Previous courseKotlin Multiplatform with ComposeNext courseAWS DevOps in Practice

Learning this with a mentor is faster

Going through a course like this one is how you qualify for our six-month internship, for selected students, mostly from Pune. Clear the interview and you build real-world projects with my mentorship.

About the internshipAll courses