使用 Next.js 15 和 Supabase 构建有机食品市场应用程序

在当今的数字时代，电子商务正以惊人的速度增长。关于如何创建一个成功的电子商务平台，许多开发者和企业家可能会遇到种种挑战。在这篇博客文章中，我们将详细介绍如何使用 Next.js 15、Supabase、Shadcn、Tailwind CSS、Clerk 和 Zustand 等技术栈，从零开始构建一个功能齐全的有机食品市场应用程序。无论你是希望提升技能的前端开发者，还是想要掌握最新技术栈的全栈开发者，这将是一个宝贵的学习机会。

欢迎参加 Next.js v15 有机食品市场与 Supabase 的课程！在这个实践项目导向的课程中，你将构建一个完全功能性的现代电子商务市场。无论你是初学者，想要增强自己的作品集，还是希望掌握最新技术的经验丰富开发者，这门课程都将为你提供打造和部署真实世界电子商务平台所需的一切知识。

MP4 | 视频：h264、1920×1080 | 音频：AAC，44.1 KHz
语言：英语 | 大小：5.3GB | 时长：8 小时 56 分钟

本课所学内容

在此项目中，你将学习如何：

• 使用 Next.js 15 和 Supabase 从头构建一个有机食品市场。
• 实现基于 Clerk 和 Supabase 的安全身份验证和用户角色管理，包括管理员、销售者和客户。
• 开发高级电子商务功能，如产品管理、搜索和过滤、购物车和订单处理。
• 集成使用 Stripe 的安全支付处理，以实现无缝的结账交易。

前期准备

在开始之前，你需要具备基本的 Next.js 知识，以便能够更轻松地理解项目的框架和组件。

你将学习到的内容

1. 构建安全身份验证系统：使用 Clerk 和 Supabase 创建一个既安全又易于使用的身份验证系统。
2. 创建用户友好的仪表板：为管理员、销售者和客户开发多种角色的仪表板，提供个性化体验。
3. 多角色管理：实现管理员、销售者和客户的多角色管理，确保不同用户能够访问他们所需的功能。
4. 完整产品管理系统：开发包含创建、读取、更新和删除（CRUD）功能的产品管理系统。
5. 产品图像上传：利用 Supabase Storage 实现产品图像的上传功能，让您的市场更加生动。
6. 高级搜索与过滤：使用 Supabase 的全文搜索功能，实现便捷的产品搜索与过滤。
7. 购物车系统：使用 Zustand 进行状态管理，构建购物车系统，让用户体验更顺畅。
8. 安全支付集成：整合 Stripe 的结账功能，实现安全且无缝的支付处理。
9. 订单管理：实现客户和销售者的订单管理功能，确保订单流程的高效性。
10. 现代响应式 UI 设计：使用 Shadcn 和 Tailwind CSS 设计一个现代化且响应式的用户界面。
11. 遵循最佳实践：学习构建可扩展应用程序的真实世界最佳实践。
12. 项目部署：将项目部署到 Vercel，并为其配置自定义域名。

技术栈概述

• Next.js 15：强大的 React 框架，用于构建前端应用程序。
• Supabase：后端、数据库和存储解决方案，助力快速开发。
• Shadcn：现代化UI组件设计系统，让界面更加美观。
• Tailwind CSS：实用优先的样式设计，帮助实现响应式布局。
• Clerk：身份验证和用户管理工具，确保安全性。
• Zustand：轻量高效的状态管理工具，简化项目架构。
• Stripe：安全且流畅的支付处理服务。
• Vercel：快速简便的项目部署平台。

教程的收益

完成此课程后，你将掌握构建和发布完整功能的电子商务市场的技能。无论你是前端开发者还是全栈工程师，这门课程都将对你的职业生涯产生积极影响。

如果你是希望提高自己技能的开发者，或者希望建立一个可以在求职中展示的项目，请立即注册并开始构建吧！这个课程将是你学习新技术、提升工程能力的绝佳机会。

通过不断的实践与探索，相信你一定能够打造出一个独特的有机食品市场应用程序，将你的创意和技术能力展现出来！

概述
第 1 部分：简介

讲座 1 创建下一个应用程序

第 2 讲 安装和设置 shadcn

讲座 3 Shadcn 主题

第 2 部分：向职员验证身份

讲座 4 主页

讲座 5 安装和设置shadcn

讲座 6 添加登录和注册组件

讲座 7 样式文员组件

第 8 讲 注册、签到、退出

第 9 讲 访问文员用户对象

第 10 讲 保护私有路由

第 3 部分：将用户保存到 supabase

讲座 11 Supabase 设置

讲座 12 创建 user_profiles 表

第 13 讲 保存用户

第 4 部分：布局

第 14 讲 布局结构

第 15 讲标题

讲座 16 菜单项目 – 第 1 部分

讲座 17 菜单项 – 第 2 部分

第 18 讲 手动注销

讲座 19 显示旋转器

第 20 讲 全球商店

第 5 部分：产品 CRUD

第21讲 产品模块介绍

讲座 22 产品文件夹结构

讲座 23 产品形态 – 第一部分

讲座 24 产品形态 – 第二部分

讲座 25 将产品图像保存到 supabase 存储

讲座 26 添加产品

讲座27 展示产品

讲座 28 编辑产品

讲座 29 删除产品

第 6 部分：主页

讲座30 在主页上展示产品

讲座 31 产品卡片造型

讲座 32 产品购物车商店设置

讲座 33 购物车操作

第 7 部分：购物车页面

讲座 34 购物车页面 – 第 1 部分

讲座 35 购物车页面 – 第 2 部分

讲座 36 购物车页面 – 第 3 部分

第 8 部分：主页中的过滤器

讲座 37 过滤器 UI

讲座 38 过滤器逻辑

第 9 节：地址

讲座 39 地址表和文件夹结构

讲座 40 地址形式

讲座 41 显示地址

第 10 部分：结帐页面

讲座 42 显示和选择地址

讲义 43 Stripe 简介

讲座 44 Stripe 的安装和设置

讲座 45 支付意向 API

讲座 46 付款表格 – 第 1 部分

讲座 47 保存订单

第 11 节：命令

讲座 48 订单简介和数据前提条件

讲义49 获取用户订单

讲座50 用户显示顺序

讲座51 显示订单详情

讲座52 显示卖家订购的商品

讲53 取消订单

第 12 部分：管理

讲座 54 演出顺序

讲座 55 显示用户

讲座 56 展览和卖家