• No hay productos en el carrito.

Inicio / Cursos / Shopping Platform From Scratch
Impartido por Brad TraversyPago único de $2,800 MXN · acceso por 12 meses

Shopping Platform From Scratch

Use Next 15, React 19, TypeScript, PostgreSQL and Prisma to build a real-world ecommerce website

Certificado oficial emitido por la SEPA través del Gobierno del Estado de México
12 meses de acceso En línea · 60 h 18 unidades
Qué aprenderás

Lo que serás capaz de hacer

If you want to take your React skills to the next level and learn to use Next.js in an actual real-world project, this is the course for you. We are using Next.js, TypeScript and many other technologies to create "Prostore". A full-featured shopping platform with reviews, PayPal and Stripe integration, email receipts and more. This course is for people that already know React. Knowing the basics of Next.js is even better. You will learn how to use many different technologies together to create a full project that you can then display on your portfolio. Here is a list of some of the technologies and libraries that we'll be using: Next.js v15 React v19 TypeScript ES Lint PostgreSQL Prisma Zod Next Auth React Hook Form PayPal & Stripe API ShadCN UI Tailwind CSS Recharts Uploadthing Jest Even though this is a project-based course, it is not simply "watch me code". I will explain in detail what I am doing so that you can understand rather than just copy. You can then use that knowlege to create your own awesome projects. Here is a complete outline of the course sections: 1. Introduction - I explain what the course is about and we go over the project and the stack. 2. App Creation & Basic Layour - We create our app, the layout, setup ShadCN UI and learn how to use UI components, create a theme toggler, loading & not found pages, display some sample data. 3. Database, Prisma & Product Display - We setup our Neon PostgreSQL database and the Prisma ORM. We learn to create models and migrations and how to seed data and fetch products from the database. 4. Authentication With Next Auth - We create full authentication with the Next Auth library 5. Add To Cart - Create a cart system with database and session integration. 6.. Cart & Shipping Page - We start out checkout process with the cart page summary and the shipping address form. 7. Payment Method & Order Pages - We create the other pages in our checkout process. 8. PayPal Payments - Integrate the PayPal API. We even do a little unit testing with JEST. 9. Order History & User Profile - Create the user area with a list of orders and the profile update page. 10. Admin Dashboard - We start on the admin area and the overview page 11. Admin Products & Image Uploading - We manage products from admin and implement image uploading with Uploadthing. 12. Admin Users & Search - Manage users from admin and implement a search for products, orders and users in admin. 13. Drawer, Carousel and Search - We create a category drawer, featured product carousel and then work on the main product search filters. 14. Ratings & Reviews - We create the rating and review system. 15. Stripe Payments - Use the Srtipe API and some packages to ad stripe payments. 16. Email Purchase Receipts - We use the Resend service for sending emails through the app. 17 - Homepage Components & Wrap Up - We add few more homepage components and then wrap up the course.

  • Build a professional ecommerce website from absolute scratch
  • PayPal, Stripe and Cash On Delivery payment options
  • Learn Next 15, React 19, PostgreSQL, Prisma, TypeScript & Zod
  • Full Authentication, admin area, review system, featured projects, sorting, search filters, user profiles, image uploading & more
  • Continuous deployment with Vercel & Git
  • Shopping cart, sessions, JWT & cookies

Temario

UNIDAD 1 - Introduction · 6 lecciones

UNIDAD 1 - Introduction

  • Welcome To The CourseVideo · 5 min
  • The StackVideo · 6 min
  • The ProjectVideo · 6 min
  • The EnvironmentVideo · 5 min
  • Premium DocsVideo · 2 min
  • Final Code & DemoLectura · 0 min
UNIDAD 2 - App Creation & Basic Layout · 11 lecciones

UNIDAD 2 - App Creation & Basic Layout

  • Section IntroVideo · 2 min
  • Create Next App & AssetsVideo · 8 min
  • ShadCN UI SetupVideo · 5 min
  • Root Layout & ConstantsVideo · 10 min
  • Header & Footer ComponentsVideo · 10 min
  • Theme Mode ToggleVideo · 13 min
  • Loading & Not Found PagesVideo · 9 min
  • Responsive Sheet MenuVideo · 8 min
  • Sample Products & Product ListVideo · 10 min
  • Product Card ComponentVideo · 7 min
  • Product Price ComponentVideo · 5 min
UNIDAD 3 - Database, Prisma & Product Display · 11 lecciones

UNIDAD 3 - Database, Prisma & Product Display

  • Section IntroVideo · 3 min
  • PostgreSQL & Prisma SetupVideo · 4 min
  • Prisma Models & MigrationsVideo · 9 min
  • Seed Sample DataVideo · 4 min
  • Load Products From DatabaseVideo · 10 min
  • Zod Validation & Type InferenceVideo · 17 min
  • Servlerless Environment ConfigVideo · 8 min
  • Product Details PageVideo · 15 min
  • Product Images ComponentVideo · 8 min
  • Initial DeploymentVideo · 5 min
  • A Note On ES Lint ErrorsVideo · 2 min
UNIDAD 4 - Authentication With Next Auth · 15 lecciones

UNIDAD 4 - Authentication With Next Auth

  • Section IntroVideo · 3 min
  • Prisma User-Related ModelsVideo · 10 min
  • Seed User DataVideo · 7 min
  • Next Auth SetupVideo · 18 min
  • Next Auth Catch All API RouteVideo · 4 min
  • Sign In & Sign Out ActionVideo · 8 min
  • Auth Layout & Sign In PageVideo · 7 min
  • Credentials Sign In FormVideo · 7 min
  • Hook Up Sign In FormVideo · 9 min
  • Callback URL RedirectVideo · 4 min
  • User Button & Sign OutVideo · 12 min
  • Sign Up Zod Schema & ActionVideo · 8 min
  • Sign Up Page & FormVideo · 8 min
  • Sign Up Error HandlingVideo · 13 min
  • Customize Token With JWT CallbackVideo · 8 min
UNIDAD 5 - Add To Cart · 10 lecciones

UNIDAD 5 - Add To Cart

  • Section IntroVideo · 1 min
  • Cart Zod Schema & Prisma ModelVideo · 13 min
  • Add To Cart ComponentVideo · 12 min
  • Session Cart ID CookieVideo · 8 min
  • Get Item From CartVideo · 13 min
  • Price Calc & Add To DatabaseVideo · 16 min
  • Handle Quantity & Multiple ProductsVideo · 12 min
  • Remove Cart ActionVideo · 8 min
  • Dynamic Cart ButtonVideo · 8 min
  • Smooth UI With useTransition HookVideo · 6 min
UNIDAD 6 - Cart & Shipping Pages · 10 lecciones

UNIDAD 6 - Cart & Shipping Pages

  • Section IntroVideo · 1 min
  • Cart PageVideo · 8 min
  • ShadCN UI TableVideo · 11 min
  • Subtotal CardVideo · 8 min
  • Shipping Address Zod Schema & PageVideo · 10 min
  • Shipping Address & FormVideo · 20 min
  • Update User AddressVideo · 8 min
  • Checkout Steps ComponentVideo · 7 min
  • Persist Session CartVideo · 6 min
  • Protecting PathsVideo · 6 min
UNIDAD 7 - Payment Method & Order Pages · 12 lecciones

UNIDAD 7 - Payment Method & Order Pages

  • Section IntroVideo · 2 min
  • Payment Method Action & Zod SchemaVideo · 9 min
  • Payment Method PageVideo · 8 min
  • Payment Method Form & UpdateVideo · 13 min
  • Order & OrderItem Prisma SchemaVideo · 11 min
  • Order Zod Schemas & TypesVideo · 8 min
  • Place Order PageVideo · 18 min
  • Create Order ActionVideo · 14 min
  • Place Order FormVideo · 8 min
  • Order Page & ActionVideo · 8 min
  • Format Utility FunctionsVideo · 8 min
  • Order Details TableVideo · 14 min
UNIDAD 8 - PayPal Payments · 9 lecciones

UNIDAD 8 - PayPal Payments

  • Section IntroVideo · 1 min
  • PayPal Sandbox SetupVideo · 4 min
  • Generate Access TokenVideo · 7 min
  • Jest Testing For Access TokenVideo · 8 min
  • Create Order & Capture Payment RequestVideo · 9 min
  • Jest Testing For Order PaymentVideo · 8 min
  • Create PayPal Order ActionVideo · 8 min
  • Approve & Update OrderVideo · 16 min
  • Implement PayPal ButtonVideo · 12 min
UNIDAD 9 - Order History & User Profile · 8 lecciones

UNIDAD 9 - Order History & User Profile

  • Section IntroVideo · 1 min
  • User Layout & MenuVideo · 14 min
  • Get My Orders ActionVideo · 5 min
  • Orders PageVideo · 13 min
  • Orders PaginationVideo · 15 min
  • Update Profile ActionVideo · 6 min
  • Update Profile FormVideo · 12 min
  • Profile Form SubmissionVideo · 7 min
UNIDAD 10 - Admin Overview & Orders · 10 lecciones

UNIDAD 10 - Admin Overview & Orders

  • Section IntroVideo · 1 min
  • Admin Layout & Main NavVideo · 8 min
  • Get Order SummaryVideo · 10 min
  • Admin Overview Display DataVideo · 17 min
  • Monthly Sales ChartVideo · 8 min
  • Protecting Admin RoutesVideo · 10 min
  • Admin Orders Page & ActionVideo · 12 min
  • Delete OrdersVideo · 16 min
  • Update Order Actions (COD)Video · 6 min
  • Update Order Buttons (COD)Video · 13 min
UNIDAD 11 - Admin Products & Image Upload · 13 lecciones

UNIDAD 11 - Admin Products & Image Upload

  • Section IntroVideo · 1 min
  • Get Products For Admin PageVideo · 8 min
  • Display ProductsVideo · 8 min
  • Delete ProductsVideo · 4 min
  • Create & Update ActionsVideo · 8 min
  • Create Product Page & FormVideo · 10 min
  • Form Fields & SlugifyVideo · 13 min
  • Create Product Form SubmissionVideo · 6 min
  • Uploadthing ConfigurationVideo · 8 min
  • Add Image UploadsVideo · 13 min
  • Product CleanupVideo · 8 min
  • Is Featured & BannerVideo · 9 min
  • Product Update FormVideo · 10 min
UNIDAD 12 - Admin Users & Search · 9 lecciones

UNIDAD 12 - Admin Users & Search

  • Section IntroVideo · 1 min
  • Get & Display UsersVideo · 13 min
  • Delete UsersVideo · 3 min
  • User Edit PageVideo · 9 min
  • Update User FormVideo · 14 min
  • Update User ActionVideo · 7 min
  • Admin Search FormVideo · 11 min
  • Admin Order SearchVideo · 6 min
  • Admin User SearchVideo · 3 min
UNIDAD 13 - Search Filtering, Drawer & Carousel · 11 lecciones

UNIDAD 13 - Search Filtering, Drawer & Carousel

  • Section IntroVideo · 1 min
  • Category DrawerVideo · 9 min
  • Featured Products CarouselVideo · 14 min
  • Search ComponentVideo · 9 min
  • Search PageVideo · 13 min
  • Search FiltersVideo · 11 min
  • Get Filter URL FunctionVideo · 7 min
  • Category & Price UI FiltersVideo · 10 min
  • Rating Filter & Filter DisplayVideo · 10 min
  • Sorting ProductsVideo · 6 min
  • Dynamic MetadataVideo · 8 min
UNIDAD 14 - Ratings & Reviews · 9 lecciones

UNIDAD 14 - Ratings & Reviews

  • Section IntroVideo · 1 min
  • Review Prisma Schema, Zod & TypeVideo · 11 min
  • Review List ComponentVideo · 9 min
  • Review Form Dialog ComponentVideo · 16 min
  • Create & Update Review ActionVideo · 12 min
  • Connect Review Form To ActionVideo · 7 min
  • Get Reviews ActionVideo · 4 min
  • Display ReviewsVideo · 12 min
  • Update & Reload ReviewsVideo · 4 min
UNIDAD 15 - Stripe Payments · 6 lecciones

UNIDAD 15 - Stripe Payments

  • Section IntroVideo · 2 min
  • Stripe SeupVideo · 5 min
  • Order Form Payment IntentVideo · 12 min
  • Stripe Payment ComponentVideo · 17 min
  • Stripe Payment Success PageVideo · 11 min
  • Webhook To Mark Order As PaidVideo · 14 min
UNIDAD 16 - Email Purchase Receipts · 6 lecciones

UNIDAD 16 - Email Purchase Receipts

  • Section IntroVideo · 1 min
  • Resend API Key & SetupVideo · 3 min
  • Resend Main FunctionVideo · 6 min
  • Purchase Email Receipt TemplateVideo · 13 min
  • Preview Email In Browser With React EmailVideo · 13 min
  • Sending EmailsVideo · 5 min
UNIDAD 17 - Homepage Components & Wrap Up · 5 lecciones

UNIDAD 17 - Homepage Components & Wrap Up

  • Section IntroVideo · 1 min
  • Icon Boxes ComponentVideo · 4 min
  • Deal Countdown ComponentVideo · 19 min
  • Wrap UpVideo · 1 min
  • Vercel Hobby Plan ErrorVideo · 13 min
UNIDAD 18 - Notes & Fixes · 2 lecciones

UNIDAD 18 - Notes & Fixes

  • Vercel Hobby Tier FixVideo · 6 min
  • Cart Persist On Sign Out FixLectura · 0 min
Certificado oficial

Tu certificado lo emite la SEP, no solo una plataforma

Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.

Tu certificado con INEC

  • Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
  • Documento oficial con folio verificable en línea
  • Lo otorga la Universidad Tecnológica Fidel Velázquez

Otras plataformas en línea

  • Constancia privada emitida por la misma plataforma
  • Solo acredita horas cursadas o asistencia
  • Sin respaldo de una autoridad educativa
Cómo funciona

Tu itinerario, de la inscripción al certificado

  1. 1

    Inscripción con pago único

    Pagas $2,800 MXN una sola vez y entras de inmediato al curso.

  2. 2

    Estudias a tu ritmo

    18 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.

  3. 3

    Cuestionarios por unidad

    Cuestionarios para comprobar lo aprendido.

  4. 4

    Certificado

    Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.

Lo que obtienes

Un certificado oficial de la SEP

Muestra del certificado: Shopping Platform From Scratch

Muestra · verificable por folio y QR

  • Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
  • Contenido impartido por Brad Traversy.
  • Folio y QR verificables para compartirlo con quien te contrate.
Medios que necesitas
Equipo de cómputo Conexión estable a internet
Pago único

Empieza hoy, a tu ritmo

Un solo pago y acceso inmediato al curso completo durante 12 meses.

  • 18 unidades · 163 lecciones · 60 h
  • 12 meses de acceso
  • Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Pago único
$2,800MXN
Acceso por 12 meses
Inscribirme Hablar con un asesor
Preguntas frecuentes

Sobre tu inscripción

¿Cómo es el pago?

Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.

¿Cuánto tiempo tengo acceso?

12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.

¿Quién imparte el contenido?

El curso es impartido por Brad Traversy; INEC gestiona tu inscripción, evaluación y certificado.

¿Qué pasa cuando vence mi acceso?

Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.

Certificado emitido por la SEP a través del Gobierno del Estado de México · Shopping Platform From Scratch

Inscribirme
  INEC es una Marca de SalesPartners Ciudad de México S de RL de CV. Template Design © Learnify LMS. All rights reserved. Terminos y Condiciones Aviso de Privacidad Politica de Devolución
Hide picture