CF

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

Related courses

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling, you should have a foundational understanding of frontend development, as this course builds on those skills by transitioning to backend development. Familiarity with frontend technologies such as React and Next.js, which are part of the course's technology stack, will be beneficial. Basic knowledge of Git and database concepts will also be advantageous, as these are covered in the course.
What will I build during this course?
During the course, you will build a Prompt Manager application. This project involves creating a backend that retains information across sessions. Key features include the ability to view, add, edit, delete, and copy AI prompts. The application will help you understand how to manage data efficiently using a database.
Who is the target audience for this course?
This course is designed for individuals who have a basic understanding of frontend development and are looking to expand their skills into backend development. It is ideal for those aspiring to become full-stack developers or anyone interested in building robust web applications with both frontend and backend components.
How does the depth of this course compare to similar courses?
This course provides a focused exploration of backend development within the context of a full-stack project. It emphasizes creating a functional backend for a web application, covering key topics like database management and server-side logic. Compared to introductory courses that might skim over practical backend implementation, this course offers concrete project-based learning.
What specific tools and platforms will I use in this course?
In this course, you'll use various modern tools and platforms, including PostgreSQL for database management, Supabase for setting up the backend, and Next.js for server actions and rendering. Additionally, you will work with Tailwind CSS for styling and learn about environment variables and ORMs as part of the backend development process.
What is not covered in this course that I might need to learn separately?
The course focuses on backend development with an emphasis on building a specific application. It does not cover advanced frontend topics or other backend languages and frameworks beyond those specified in the technology stack. If you're interested in exploring areas like advanced JavaScript, different backend frameworks, or frontend frameworks other than React, you would need to pursue those separately.
What is the time commitment required for this course?
The course consists of 21 lessons, each designed to progressively build on your understanding of backend development. While the runtime isn't specified, you should allocate time to thoroughly engage with each lesson, practice coding assignments, and work on the Prompt Manager project. The actual time commitment will vary based on your prior knowledge and pace of learning.