Full-Stack Fundamentals 2 - Backend

1h 45m 49s
English
Paid
In the first project, we focused on the frontend by creating a personal portfolio website. Now we will take the next step towards full-stack development by creating a full-fledged web application with a server side capable of storing and processing data.
Read more about the course

What you will create:

You will develop a Prompt Manager—a web application for storing, organizing, and managing frequently used AI prompts. With it, you can:

  • 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:

In the portfolio project, we simply displayed information. In this project, you need to save data that won't disappear after page reloads. This is the job of the backend—the server-side part of the application.

  • Backend—the part of a web application that runs on the server. It processes data, executes logic, and interacts with the database.
  • Database—an organized storage of information (in this case, your prompts).
  • Full-Stack—an application that includes both the client-side (interface) and server-side (data, logic) components.

Technology stack:

We will use modern technologies for both frontend and backend:

Frontend:

  • React—for creating a component-based interface
  • Next.js—a framework providing routing, rendering, and server actions
  • Tailwind CSS—a utility-first CSS framework for quick styling
  • Shadcn—quality UI components (cards, buttons, dialogs)
  • Framer Motion—for creating smooth animations

Backend:

  • PostgreSQL—a powerful open-source relational database
  • Supabase—a platform for rapid deployment and management of PostgreSQL in the cloud
  • Drizzle ORM—a TypeScript tool for database interactions without direct SQL writing, supporting type safety

What you will learn:

  • How the client-server model works
  • Setting up a cloud database using Supabase
  • Defining table structures with Drizzle
  • Conducting database migrations
  • Initial seeding of the database
  • CRUD operations (create, read, update, delete) using Drizzle ORM
  • Implementing Next.js Server Actions for server-side data processing
  • Linking the interface with database data, including loading and updating state
  • The complete cycle of creating a full-stack application

Watch Online Full-Stack Fundamentals 2 - Backend

Join premium to watch
Go to premium
# Title Duration
1 1. Introduction 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

Similar courses to Full-Stack Fundamentals 2 - Backend

Full-Stack Tao

Full-Stack TaoAlex Kondov

Category: Other (Frontend)
Duration
Mastering Postgres | The most comprehensive course on PostgreSQL

Mastering Postgres | The most comprehensive course on PostgreSQLAaron Francis

Category: Other (Backend)
Duration 16 hours 13 minutes 30 seconds
DuckDB - The Ultimate Guide

DuckDB - The Ultimate Guideudemy

Category: Other (Backend)
Duration 5 hours 56 minutes 13 seconds
UI Architecture Academy

UI Architecture AcademyLogic Room

Category: Other (Frontend)
Duration 21 hours 37 minutes 23 seconds
Practical Accessibility - Practical Accessibility for web designers and developers

Practical Accessibility - Practical Accessibility for web designers and developersSara Soueidan

Category: Other (Frontend)
Duration 14 hours 47 minutes 28 seconds
SolidJS: The Complete Guide

SolidJS: The Complete GuideSinan Polat

Category: Other (Frontend)
Duration
Content Sites with Astro and Vue.js

Content Sites with Astro and Vue.jsvueschool.io

Category: Vue, Other (Frontend)
Duration 1 hour 3 minutes 38 seconds
Frontend architecture and patterns bootcamp

Frontend architecture and patterns bootcampudemy

Category: Other (Frontend)
Duration 4 hours 21 minutes 43 seconds