Build an E-Commerce Web App with Paystack, NextJS, Supabase @freecodecamp

Uploaded March 2026 | Updated September 2026, 2 weeks ago

Learn how to build a full-stack e-commerce application using the powerful combination of Next.js, Supabase, and Zustand. Paystack is a seamless payment gateway for businesses to accept online transactions. It is like Stripe but with a focus on Africa. The course covers every step of the development process, from managing complex state with the React Context API to deploying your finished application on Vercel. This course will teach you to build and scale real-world applications using industry-standard tools.

Course from @eldics

Project Hosted: https://eldics-store.vercel.app
Github Repo: github.com/eldominics/eldics-store

Media Files: Within the GitHub repository in public folder
SQL Queries: Within the Github Repository.

Contents
- 0:00:00 Intro
- 0:02:40 Quick App Demo
- 0:04:06 NextJS Installation
- 0:07:39 Figma Intro
- 0:10:26 Supabase Intro
- 0:39:45 Sql Queries For Table And Triggers
- 0:50:21 Supabase Strorage
- 0:52:30 Supabase Setup For NextJS
- 1:02:52 Server Actions
- 1:30:54 Committing Codes To Github
- 1:31:56 Authentication
- 1:42:14 Zod
- 2:23:43 Supabase Triggers and Functions
- 2:41:53 Context API
- 3:10:07 Product Details
- 3:12:49 Buy Now Functionality
- 3:38:47 Paystack Implementations
- 3:45:15 API routes
- 4:30:15 Address Table
- 5:03:00 Triggers
- 5:40:22 Reviews
- 6:30:05 Zustand for storing Cart items
- 7:16:33 Preparing to host
- 7:18:59 Committing all codes to Github
- 7:19:37 Vercel hosting
- 7:22:58 Resolving a bug
- 7:28:36 outro

❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: scrimba.com/freecodecamp

🎉 Thanks to our Champion and Sponsor supporters:
👾 @omerhattapoglu1158
👾 @goddardtan
👾 @akihayashi6629
👾 @kikilogsin
👾 @anthonycampbell2148
👾 @tobymiller7790
👾 @rajibdassharma497
👾 @CloudVirtualizationEnthusiast
👾 @adilsoncarlosvianacarlos
👾 @martinmacchia1564
👾 @ulisesmoralez4160
👾 @_Oscar_
👾 @jedi-or-sith2728
👾 @justinhual1290

--

Learn to code for free and get a developer job: freecodecamp.org

Read hundreds of articles on programming: freecodecamp.org/news

Build an E-Commerce Web App with Paystack, NextJS, Supabase

AWS Certified AI Practitioner (AIF-C01) – Full Course to PASS the Certification Exam

3D Printing & Additive Manufacturing – Full Course

Bangladeshs thriving developer scene is full of beginners who are truly passionate about learning

Youve likely heard fake it til you make it...well, Mark has done that, and talks about it here.

Project-based learning is a popular way to teach these days

$Intro to Shaders – JavaScript & p5.js Course for Beginners Learn the fundamentals of shaders, with zero prior experience required. Starting from the basics of how the GPU renders pixels, youll progress to building an animated, fractal heart effect written entirely from scratch. Designed specifically for creative developers who want to break into WebGL and master the math of motion. Course developed by @pattvira ⭐️ Connect with Patt Vira ⭐️ 🔗 Website: https://pattvira.com 🔗 Twitter: https://twitter.com/pattvira 🔗 Instagram: https://www.instagram.com/pattvira ⭐️ Code ⭐️ Part 1: https://editor.p5js.org/pattvira/sketches/LV4ZSuHXD Part 2: https://editor.p5js.org/pattvira/sketches/fdykpy1OD Part 3: https://editor.p5js.org/pattvira/sketches/I0HtC1ISj Part 4: https://editor.p5js.org/pattvira/sketches/WQXm21NW2 ❤️ Support for this channel comes from our friends at Scrimba – the coding platform thats reinvented interactive learning: https://scrimba.com/freecodecamp ⭐️ Chapters ⭐️ - 0:00:00 Intro - 0:00:51 Part 1 - Basic Introduction to Shaders - 0:01:17 What is a shader? - 0:03:24 Bridge between CPU and GPU - 0:04:20 Vertex and fragment shaders - 0:06:09 Start coding in p5.js - 0:09:44 GLSL Rulebook - 0:12:50 Set up canvas space in a vertex shader - 0:16:16 Color pixels in a fragment shader - 0:17:44 Map clip space to screen coordinates - 0:20:03 Create a static gradient - 0:22:04 Create a dynamic gradient - 0:27:03 Part 2 - Domain Repetition - 0:28:33 Draw a circle - 0:32:05 Use gl_FragCoord to get pixel coordinates - 0:38:45 Create tiling with fract() - 0:42:00 Fix aspect ratio - 0:43:56 Introduce the standard resolution fix - 0:45:01 Part 3 - Shaping Functions - 0:45:38 What is a shaping function? - 0:46:20 Explore sin() function - 0:47:41 Explore step() function - 0:48:25 Explore smoothstep() function - 0:49:40 Explore abs() function - 0:51:33 Create a glowing effect with inverse distance equation - 0:55:02 Animate glowing rings - 0:54:21 Experiment with other shapes - 0:57:43 Part 4: Colors - 0:57:43 Introduce mix() function - 1:01:01 Change the blend ratio using uTime - 1:02:12 Change the blend ratio using position - 1:04:18 Change the blend ratio using shaping functions (step & smoothstep) - 1:05:22 Change the blend ratio using shaping functions (distance functions) - 1:08:22 Introduce cosine-based color palette - 1:10:54 Bonus! Fractals! 🎉 Thanks to our Champion and Sponsor supporters: 👾 @omerhattapoglu1158 👾 @goddardtan 👾 @akihayashi6629 👾 @kikilogsin 👾 @anthonycampbell2148 👾 @tobymiller7790 👾 @rajibdassharma497 👾 @CloudVirtualizationEnthusiast 👾 @adilsoncarlosvianacarlos 👾 @martinmacchia1564 👾 @ulisesmoralez4160 👾 @_Oscar_ 👾 @jedi-or-sith2728 👾 @justinhual1290 Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news$

Guide to Agentic AI – Build a Python Coding Agent with Gemini

Learn the basics of Git in 60 seconds with Beau Carnes

Whats CS50s 72-hour Regret Clause? Dr. David J. Malan explains here.