Full-Stack Fundamentals 2 - Backend

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