CourseFlix

Full-Stack Fundamentals 2 - Backend

1h 45m 49s
English
Paid

Embark on the journey to becoming a full-stack developer by diving into the backend aspects of web application development.

Project Overview

In this course, you'll transition from frontend to backend by creating a comprehensive web application. Unlike our initial project focused on the frontend, this time you'll be developing a Prompt Manager—a platform for managing AI prompts efficiently.

What You Will Create

The Prompt Manager application will allow you to:

  • View a list of saved prompts
  • Add new prompts with a title, description, and content
  • Edit existing prompts
  • Delete unnecessary ones
  • Quickly copy prompts to the clipboard

Understanding the Backend

While the portfolio project displayed static data, this project advances to creating a backend that retains information across sessions. The backend is crucial for data preservation beyond page reloads.

Key Concepts

  • Backend — Processes data, executes logic, and interacts with the database.
  • Database — Stores information systematically (in this case, your prompts).
  • Full-Stack — Combines both client-side (interface) and server-side (data, logic) components.

Technology Stack

This project utilizes modern tools for both the frontend and backend to ensure a robust learning experience.

Frontend Technologies

  • React — For creating a component-based interface
  • Next.js — A framework offering routing, rendering, and server actions
  • Tailwind CSS — A utility-first CSS framework for rapid styling
  • Shadcn — Provides quality UI components such as cards, buttons, and dialogs
  • Framer Motion — For creating smooth animations

Backend Technologies

  • PostgreSQL — A powerful open-source relational database
  • Supabase — A platform for quick deployment and management of PostgreSQL in the cloud
  • Drizzle ORM — A TypeScript tool for seamless database interaction without direct SQL

Learning Outcomes

By the end of this project, you will have mastered:

  • The client-server model operation
  • Setting up a cloud database using Supabase
  • Defining database table structures with Drizzle
  • Conducting database migrations
  • Initial seeding of the database
  • Executing CRUD operations (create, read, update, delete) using Drizzle ORM
  • Implementing Next.js Server Actions for server-side data handling
  • Connecting the interface to the database, including loading and state updates
  • A comprehensive cycle of developing a full-stack application

Additional

https://github.com/mckaywrigley/takeoff-prompt-manager

About the Author: Mckay Wrigley

Mckay Wrigley thumbnail

Mckay Wrigley is a US developer and AI educator who runs Takeoff AI, an applied-AI engineering academy that has grown into one of the most active LLM-focused course platforms on the market. He publishes daily on X / Twitter, is widely cited for his ChatGPT / Claude-integration tutorials, and has one of the larger independent applied-AI followings.

His CourseFlix listing carries sixteen Takeoff courses — covering everything from foundational LLM-integration with the OpenAI and Anthropic APIs through RAG pipelines, AI-assisted coding workflows, and full-stack AI product builds. Material is paid and aimed at working developers who want to ship AI features into real products rather than read survey-style introductions to the field.

Watch Online 21 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 21 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1. Introduction
All Course Lessons (21)
#Lesson TitleDurationAccess
1
1. Introduction Demo
05:19
2
2. Quick Start
02:37
3
3. Git Basics
01:18
4
4. Introduction to PostgreSQL
02:55
5
5. Setting Up Supabase
01:53
6
6. Overview of ORMs
04:36
7
7. Installing Packages
02:53
8
8. Environment Variables
07:29
9
9. Creating AI Rules
01:37
10
10. Setting Up the Database
05:15
11
11. Defining the Schema
05:41
12
12. Database Migrations
03:25
13
13. Seeding the Database
04:59
14
14. Server Actions in Next.js
14:39
15
15. Starting the UI
05:08
16
16. Building the Prompts Page
03:14
17
17. Fetching Data (GET)
08:40
18
18. Creating Data (POST)
07:50
19
19. Updating Data (PUT/PATCH)
06:38
20
20. Deleting Data (DELETE)
05:06
21
21. Deploying the Project
04:37
Unlock unlimited learning

Get instant access to all 20 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

21 lessons · 1h 45m 49s
Show all 21 lessons
  1. 1 1. Introduction 05:19
  2. 2 2. Quick Start 02:37
  3. 3 3. Git Basics 01:18
  4. 4 4. Introduction to PostgreSQL 02:55
  5. 5 5. Setting Up Supabase 01:53
  6. 6 6. Overview of ORMs 04:36
  7. 7 7. Installing Packages 02:53
  8. 8 8. Environment Variables 07:29
  9. 9 9. Creating AI Rules 01:37
  10. 10 10. Setting Up the Database 05:15
  11. 11 11. Defining the Schema 05:41
  12. 12 12. Database Migrations 03:25
  13. 13 13. Seeding the Database 04:59
  14. 14 14. Server Actions in Next.js 14:39
  15. 15 15. Starting the UI 05:08
  16. 16 16. Building the Prompts Page 03:14
  17. 17 17. Fetching Data (GET) 08:40
  18. 18 18. Creating Data (POST) 07:50
  19. 19 19. Updating Data (PUT/PATCH) 06:38
  20. 20 20. Deleting Data (DELETE) 05:06
  21. 21 21. Deploying the Project 04:37

Related courses

  • Zero to Full Stack Hero thumbnail

    Zero to Full Stack Hero

    Sources: PAPA React (Sonny Sangha)
    PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
    101 hours 29 minutes 59 seconds 5 / 5
  • Full-Stack Fundamentals 3 - Auth thumbnail

    Full-Stack Fundamentals 3 - Auth

    Sources: Mckay Wrigley
    In the previous project, we created a working application - Prompt Manager, mastering the key principles of full-stack development using Next.js, Supabase...
    1 hour 9 minutes 21 seconds
  • Full-Stack Fundamentals 4 - Payments thumbnail

    Full-Stack Fundamentals 4 - Payments

    Sources: Mckay Wrigley
    In the previous section, we successfully implemented user authentication using Clerk. Now, based on this project, we will add online payment processing with...
    54 minutes 17 seconds 5 / 5

Frequently asked questions

What is Full-Stack Fundamentals 2 - Backend about?
Embark on the journey to becoming a full-stack developer by diving into the backend aspects of web application development. Project Overview In this course, you'll transition from frontend to backend by creating a comprehensive web…
Who teaches Full-Stack Fundamentals 2 - Backend?
Full-Stack Fundamentals 2 - Backend is taught by Mckay Wrigley. You can find more courses by this instructor on the corresponding source page.
How long is Full-Stack Fundamentals 2 - Backend?
Full-Stack Fundamentals 2 - Backend contains 21 lessons with a total runtime of 1 hour 45 minutes. All lessons are available to watch online at your own pace.
Is Full-Stack Fundamentals 2 - Backend free to watch?
Full-Stack Fundamentals 2 - Backend is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Full-Stack Fundamentals 2 - Backend online?
Full-Stack Fundamentals 2 - Backend is available to watch online on CourseFlix at https://courseflix.net/course/full-stack-fundamentals-2-backend. The page hosts every lesson with the integrated video player; no download is required.