Development Basics: Frontend, Backend, API, Database and Git

• Frontend (client): everything the user sees and touches in the browser (HTML, Tailwind CSS, animations, buttons).
• Backend (server): the "brain" behind the scenes that checks passwords, sends emails and runs the business logic.
• API (Application Programming Interface): the "waiter" that carries an order from the frontend to the backend and brings the answer back.
• Database: the digital storeroom where users, products and orders are kept permanently (e.g. PostgreSQL in Supabase).
• Git & GitHub: Git remembers the history of every change in your code, and GitHub keeps a safe copy of the project in the cloud.
• CI/CD: an automated system (e.g. Vercel) that picks up code from GitHub and puts it live on its own.

The simplest way to understand modern full-stack development:

• The guest at a table in the dining room is the user, looking at a nicely arranged room and the menu (frontend).
• The waiter is the API: they take the guest's order to the kitchen and come back with the finished dish.
• The chef in the kitchen is the backend: they prepare the food, follow the recipes and keep things hygienic.
• The fridge and pantry are the database (e.g. Supabase), where all ingredients and supplies are stored in an orderly way.

The new generation of AI tools does more than answer questions. It works like a junior engineer on your team:

• An AI agent has tools ("hands"): it can look through the whole repository, run tests in the terminal and fix a bug by itself.
• The context window is the model's working memory. Modern models can take in a large part of a codebase at once.

1. Check installed tools in the terminal

   node -v && git --version

   Checks whether Node.js and Git (for tracking code changes) are installed.

A big advantage of the Next.js App Router is that it combines frontend and backend in a single project. You don't need to run two separate servers; everything lives under one roof.