platform
32 Chapters
5/3/2024
Build a Paid Content Platform: Step-by-Step Full-Stack Tutorial.
Learn to create your own paid content platform with our comprehensive 2024 guide. This step-by-step tutorial makes the process easy to follow. Discover how to use TypeScript, Next.js, SQL, Tailwind CSS with Shadcn-UI, Clerk, Neon Tech's Serverless Postgres Database, Stripe, Prisma ORM, and Vercel Hosting to build a full-stack platform.
nextjs
stripe
typescript
uploadthing
shadcn-ui
clerk
neon.tech
tailwindcss
prisma
vercel
tailwind
shadcn
next
neon
react
reactjs
# Introduction
Discover how to create a robust learning platform using a full stack approach. Step-by-step tutorial.
In this comprehensive guide, we'll teach you how to develop a fully-functional learning platform utilizing **Next.js** for the frontend, **Clerk** for user authentication, a **Neon DB** managed via **Prisma** as your ORM, handling payments with **Stripe**, and styling your application with **Tailwind CSS** and **Shadcn-UI**. By the end of this guide, you'll possess a deep understanding of how to build and integrate these technologies to create a seamless learning experience.
This guide focuses on several modern technologies, including JavaScript, TypeScript, React.js, Next.js, Neon DB, Clerk, Prisma, Stripe, and Shadcn-UI.
<p className="border p-4 rounded-md bg-muted flex gap-2">
<span>ā¹ļø</span>
<span>The principles and techniques discussed are not limited to learning platforms only; they can be adapted to various other types of web applications, making this guide versatile and beneficial for any developer looking to expand their skill set.</span>
</p>
This tutorial is designed for developers with some prior coding experience. While it offers detailed, step-by-step instructions, beginners may find the amount of information challenging.
If building a learning platform using an advanced, full-stack approach excites you, then this tutorial is tailored for you!
### Example
The learning platform discussed in this tutorial was built by following the comprehensive steps provided in this guide.
### What Sets This Guide Apart from Free Content Available Online?
Unlike many freely available tutorials, this guide provides a structured and detailed pathway through complex technologies and integrations. From setting up your development environment to integrating payment systems and user authentication, each step is designed to offer you a clear and thorough understanding of the full stack development process.
This guide delivers step-by-step instructions that are straightforward and actionable, setting it apart from many resources that might seem fragmented and confusing.
## Lessons
The curriculum of this tutorial covers the following:
1. Initializing a Next.js Project
2. Set up Clerk Authentication
3. Add Custom Sign-Up & Sign-In Pages
4. Setting Up Neon Database
4. Database Structure with Prisma
5. Setting Up Prisma Client
6. Seeding Your Database
7. Create a Navbar Component
8. Auth Layout Component
9. Create Courses Page
10. Building Course Pages
11. Config-based Metadata
12. Course Management Dashboard
13. Building a Course Dashboard
14. Add and Manage Courses
15. Secure Course Deletion
16. Manage Course Details
17. Manage Course Chapters
18. Add a Course Image with UploadThing
19. Update Course Functionality
20. Chapter Management
21. Update Chapter Component
22. Create Aside Component
23. Create Chapter Page
24. Setting Up Stripe Payments
25. User Enrollment and Checkout Flow
26. Stripe Integration with the Stripe CLI
27. Track User Learning Progress
28. Course Content with Markdown Preview
29. Deployment
30. Stripe Webhook
31. Clerk Organizations
32. Project Dependencies
## Technologies
This tutorial primarily focuses on the following technologies:
- TypeScript
- Next.js
- Neon DB
- Clerk
- Prisma
- Stripe
- Tailwind CSS
- Shadcn-UI
## Structure
```
š app
āāā š api
ā āāā š course
ā ā āāā š route.ts
ā ā āāā š [id]
ā ā ā āāā š chapters
ā ā ā ā āāā š route.ts
ā ā ā ā āāā š [chapterId]
ā ā ā ā ā āāā š progress
ā ā ā ā ā ā āāā š route.ts
ā ā ā ā ā āāā š route.ts
ā ā ā āāā š checkout
ā ā ā ā āāā š route.ts
ā āāā š uploadthing
ā ā āāā š core.ts
ā ā āāā š route.ts
ā āāā š webhook
ā ā āāā š route.ts
āāā š auth
ā āāā š layout.tsx
ā āāā š sign-in
ā ā āāā š [[...sign-in]]
ā ā ā āāā š page.tsx
ā āāā š sign-up
ā ā āāā š [[...sign-up]]
ā ā ā āāā š page.tsx
āāā š courses
ā āāā š page.tsx
ā āāā š [slug]
ā ā āāā š chapter
ā ā ā āāā š [chapterSlug]
ā ā ā ā āāā š page.tsx
ā ā āāā š page.tsx
āāā š dashboard
ā āāā š course
ā ā āāā š [id]
ā ā ā āāā š chapter
ā ā ā ā āāā š [chapterId]
ā ā ā ā ā āāā š page.tsx
ā ā ā āāā š page.tsx
ā āāā š layout.tsx
ā āāā š page.tsx
āāā š favicon.ico
āāā š globals.css
āāā š layout.tsx
āāā š page.tsx
š components
āāā š aside.tsx
āāā š dashboard
ā āāā š add-course.tsx
ā āāā š chapter-data.tsx
ā āāā š chapters.tsx
ā āāā š course-data.tsx
ā āāā š course-table.tsx
ā āāā š delete-course.tsx
ā āāā š update-chapter.tsx
ā āāā š update-course.tsx
āāā š enroll.tsx
āāā š navbar.tsx
āāā š progress.tsx
āāā š ui
ā āāā š alert-dialog.tsx
ā āāā š badge.tsx
ā āāā š button.tsx
ā āāā š card.tsx
ā āāā š dialog.tsx
ā āāā š dropdown-menu.tsx
ā āāā š input.tsx
ā āāā š label.tsx
ā āāā š markdown-preview.tsx
ā āāā š select.tsx
ā āāā š skeleton.tsx
ā āāā š table.tsx
ā āāā š textarea.tsx
š hooks
āāā š use-mounted.ts
š lib
āāā š prisma.ts
āāā š stripe.ts
āāā š uploadthing.ts
āāā š utils.ts
š prisma
āāā š schema.prisma
š public
āāā š placeholder.png
š .env
š .env.local
š .eslintrc.json
š .gitignore
š components.json
š middleware.ts
š next.config.js
š package.json
š postcss.config.js
š tailwind.config.js
š tsconfig.json
```
This guide is your pathway to mastering the creation of complex learning platforms using a full-stack approach, enriching both your development skills and understanding of modern web technologies.