Shopping Platform From Scratch
Use Next 15, React 19, TypeScript, PostgreSQL and Prisma to build a real-world ecommerce website
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 leccionesUNIDAD 1 - Introduction
UNIDAD 1 - Introduction
- Welcome To The Course
- The Stack
- The Project
- The Environment
- Premium Docs
- Final Code & Demo
UNIDAD 2 - App Creation & Basic Layout · 11 leccionesUNIDAD 2 - App Creation & Basic Layout
UNIDAD 2 - App Creation & Basic Layout
- Section Intro
- Create Next App & Assets
- ShadCN UI Setup
- Root Layout & Constants
- Header & Footer Components
- Theme Mode Toggle
- Loading & Not Found Pages
- Responsive Sheet Menu
- Sample Products & Product List
- Product Card Component
- Product Price Component
UNIDAD 3 - Database, Prisma & Product Display · 11 leccionesUNIDAD 3 - Database, Prisma & Product Display
UNIDAD 3 - Database, Prisma & Product Display
- Section Intro
- PostgreSQL & Prisma Setup
- Prisma Models & Migrations
- Seed Sample Data
- Load Products From Database
- Zod Validation & Type Inference
- Servlerless Environment Config
- Product Details Page
- Product Images Component
- Initial Deployment
- A Note On ES Lint Errors
UNIDAD 4 - Authentication With Next Auth · 15 leccionesUNIDAD 4 - Authentication With Next Auth
UNIDAD 4 - Authentication With Next Auth
- Section Intro
- Prisma User-Related Models
- Seed User Data
- Next Auth Setup
- Next Auth Catch All API Route
- Sign In & Sign Out Action
- Auth Layout & Sign In Page
- Credentials Sign In Form
- Hook Up Sign In Form
- Callback URL Redirect
- User Button & Sign Out
- Sign Up Zod Schema & Action
- Sign Up Page & Form
- Sign Up Error Handling
- Customize Token With JWT Callback
UNIDAD 5 - Add To Cart · 10 leccionesUNIDAD 5 - Add To Cart
UNIDAD 5 - Add To Cart
- Section Intro
- Cart Zod Schema & Prisma Model
- Add To Cart Component
- Session Cart ID Cookie
- Get Item From Cart
- Price Calc & Add To Database
- Handle Quantity & Multiple Products
- Remove Cart Action
- Dynamic Cart Button
- Smooth UI With useTransition Hook
UNIDAD 6 - Cart & Shipping Pages · 10 leccionesUNIDAD 6 - Cart & Shipping Pages
UNIDAD 6 - Cart & Shipping Pages
- Section Intro
- Cart Page
- ShadCN UI Table
- Subtotal Card
- Shipping Address Zod Schema & Page
- Shipping Address & Form
- Update User Address
- Checkout Steps Component
- Persist Session Cart
- Protecting Paths
UNIDAD 7 - Payment Method & Order Pages · 12 leccionesUNIDAD 7 - Payment Method & Order Pages
UNIDAD 7 - Payment Method & Order Pages
- Section Intro
- Payment Method Action & Zod Schema
- Payment Method Page
- Payment Method Form & Update
- Order & OrderItem Prisma Schema
- Order Zod Schemas & Types
- Place Order Page
- Create Order Action
- Place Order Form
- Order Page & Action
- Format Utility Functions
- Order Details Table
UNIDAD 8 - PayPal Payments · 9 leccionesUNIDAD 8 - PayPal Payments
UNIDAD 8 - PayPal Payments
- Section Intro
- PayPal Sandbox Setup
- Generate Access Token
- Jest Testing For Access Token
- Create Order & Capture Payment Request
- Jest Testing For Order Payment
- Create PayPal Order Action
- Approve & Update Order
- Implement PayPal Button
UNIDAD 9 - Order History & User Profile · 8 leccionesUNIDAD 9 - Order History & User Profile
UNIDAD 9 - Order History & User Profile
- Section Intro
- User Layout & Menu
- Get My Orders Action
- Orders Page
- Orders Pagination
- Update Profile Action
- Update Profile Form
- Profile Form Submission
UNIDAD 10 - Admin Overview & Orders · 10 leccionesUNIDAD 10 - Admin Overview & Orders
UNIDAD 10 - Admin Overview & Orders
- Section Intro
- Admin Layout & Main Nav
- Get Order Summary
- Admin Overview Display Data
- Monthly Sales Chart
- Protecting Admin Routes
- Admin Orders Page & Action
- Delete Orders
- Update Order Actions (COD)
- Update Order Buttons (COD)
UNIDAD 11 - Admin Products & Image Upload · 13 leccionesUNIDAD 11 - Admin Products & Image Upload
UNIDAD 11 - Admin Products & Image Upload
- Section Intro
- Get Products For Admin Page
- Display Products
- Delete Products
- Create & Update Actions
- Create Product Page & Form
- Form Fields & Slugify
- Create Product Form Submission
- Uploadthing Configuration
- Add Image Uploads
- Product Cleanup
- Is Featured & Banner
- Product Update Form
UNIDAD 12 - Admin Users & Search · 9 leccionesUNIDAD 12 - Admin Users & Search
UNIDAD 12 - Admin Users & Search
- Section Intro
- Get & Display Users
- Delete Users
- User Edit Page
- Update User Form
- Update User Action
- Admin Search Form
- Admin Order Search
- Admin User Search
UNIDAD 13 - Search Filtering, Drawer & Carousel · 11 leccionesUNIDAD 13 - Search Filtering, Drawer & Carousel
UNIDAD 13 - Search Filtering, Drawer & Carousel
- Section Intro
- Category Drawer
- Featured Products Carousel
- Search Component
- Search Page
- Search Filters
- Get Filter URL Function
- Category & Price UI Filters
- Rating Filter & Filter Display
- Sorting Products
- Dynamic Metadata
UNIDAD 14 - Ratings & Reviews · 9 leccionesUNIDAD 14 - Ratings & Reviews
UNIDAD 14 - Ratings & Reviews
- Section Intro
- Review Prisma Schema, Zod & Type
- Review List Component
- Review Form Dialog Component
- Create & Update Review Action
- Connect Review Form To Action
- Get Reviews Action
- Display Reviews
- Update & Reload Reviews
UNIDAD 15 - Stripe Payments · 6 leccionesUNIDAD 15 - Stripe Payments
UNIDAD 15 - Stripe Payments
- Section Intro
- Stripe Seup
- Order Form Payment Intent
- Stripe Payment Component
- Stripe Payment Success Page
- Webhook To Mark Order As Paid
UNIDAD 16 - Email Purchase Receipts · 6 leccionesUNIDAD 16 - Email Purchase Receipts
UNIDAD 16 - Email Purchase Receipts
- Section Intro
- Resend API Key & Setup
- Resend Main Function
- Purchase Email Receipt Template
- Preview Email In Browser With React Email
- Sending Emails
UNIDAD 17 - Homepage Components & Wrap Up · 5 leccionesUNIDAD 17 - Homepage Components & Wrap Up
UNIDAD 17 - Homepage Components & Wrap Up
- Section Intro
- Icon Boxes Component
- Deal Countdown Component
- Wrap Up
- Vercel Hobby Plan Error
UNIDAD 18 - Notes & Fixes · 2 leccionesUNIDAD 18 - Notes & Fixes
UNIDAD 18 - Notes & Fixes
- Vercel Hobby Tier Fix
- Cart Persist On Sign Out Fix
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
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
18 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
- 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.
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
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.


