Full-Stack Development

Meet the course project, a Notes app where users sign up, log in and keep their own notes. Learn the three layers of every web app, follow one request from a tap on Save to the database and back, compare popular stacks, and set up your tools.

1. What full-stack meansEvery web app has three layers: the frontend that users see in the browser, the backend server that applies the rules, and the database that stores the data. A full-stack developer can build all three and connect them. In this course you will build one real project, a Notes app, layer by layer.25 min
2. What happens when you tap SaveWhen you tap Save in the Notes app, JavaScript builds a request, the browser finds the server with DNS, opens a secure HTTPS connection and sends the request. A server route checks it, runs an SQL query, and sends back a JSON response with a status code. The browser reads it and updates the screen. All this usually takes well under a second.30 min
3. Popular stacks and how to chooseA stack is the set of tools you pick for each layer. Popular ones are MERN, Next.js, Django with React, Laravel and Spring Boot with React or Angular. The ideas underneath (requests, routes, SQL, components, login) are the same in all of them. Choose by the jobs near you, your team and the project, then learn one stack well.25 min
4. Setting up your toolsYou need a code editor (VS Code), Node.js (the current LTS version) with npm, Git with a GitHub account, and basic terminal skills. Then you create the Notes app folder with client and server parts, a package.json with scripts, a .gitignore that keeps node_modules and .env out of Git, and a README.30 min

Plan the Notes app before coding: write user stories and pick the MVP, design the users and notes tables, agree an API contract, and sketch the screens with all their states.

1. Requirements and user storiesBefore writing code, write down what the app must do and for whom. A user story says who wants something, what they want and why. Acceptance criteria say when a story is done. You then pick the smallest useful set of stories, the MVP, and build that first.25 min
2. Designing the data modelA data model decides what things your app stores and how they connect. Each thing (a user, a note) becomes a table, its details become columns, and keys link the tables together. Getting this right early makes every later step easier.30 min
3. Writing the API contractAn API contract is a written agreement about how the frontend and backend talk: which URLs exist, what to send, and what comes back, including errors. When both sides agree on it first, they can build at the same time without waiting for each other.25 min
4. Planning screens and user flowsBefore building screens, sketch them. List the screens, draw how a user moves between them, and break each screen into small components. Plan the loading, empty, error and success state of every screen, and make it usable on a phone and with a keyboard.25 min

Build the Notes app backend from the module 2 plan: create the tables with migrations and seed data, write the SQL behind each endpoint, add thin Express 5 route handlers that follow the contract, and validate input with one clear error shape.

1. Creating the database: schema, migrations and seed dataIn module 2 you designed the users and notes tables on paper. Now you create them for real. Each change to the database is saved as a small numbered file called a migration, applied in order and recorded in a table, so every laptop and server ends up with the same tables. Seed data fills a development database with sample rows.30 min
2. The SQL behind each endpointEvery endpoint in the contract runs one or two SQL queries. Listing, reading, searching, creating, changing and deleting notes each have a matching query, and every one of them checks user_id so people only touch their own notes. Values from the user always go in through placeholders, never pasted into the SQL text.30 min
3. Route handlers that follow the contractA route handler is the function Express runs when a request matches a method and a path. Keep it thin: it reads the request, calls a service function that holds the rules, and the service calls data access code that holds the SQL. The handler then answers with exactly the status codes and JSON shapes the contract promised.30 min
4. Validating input and handling errors on the serverThe server must check every request itself, because anyone can skip your website and send any data straight to the API. Validate and clean the input (trim spaces, lower-case emails, check types and lengths), and answer every problem in one error shape with the right status code. One central error handler logs the details for you and shows users only a safe message.30 min

Build the Notes app frontend in React 19: components and props for the notes list, forms with client-side validation, state with useState and useReducer, and pages with client-side routing and shareable URLs.

1. Components and props: building the notes listIn React, a component is a function that returns a piece of the screen. Props are the inputs you pass to it, like arguments to a function. You build the notes page by putting small components inside bigger ones, and you show a list by mapping each note to a NoteCard with a stable key.30 min
2. Forms and client-side validationA React form usually keeps each input's value in state (a controlled input) and handles submit in JavaScript with preventDefault. The browser checks the same rules as the server for quick feedback, shows each error as text next to its field, and disables Save while saving. The server still checks everything, because browser checks can be skipped.30 min
3. State: what the screen remembersState is data a component remembers that can change while the app runs, such as the search text or the list of notes. When state changes, React draws the screen again. Keep each piece of state in one place (the nearest common parent of the components that need it), compute everything else from it, and never change state in place: always make new arrays and objects.30 min
4. Pages and client-side routingA single-page app (SPA) loads once and then swaps pages in JavaScript when the URL changes, without a full reload. A router such as React Router (or the folders of a Next.js app) maps each URL, like /notes/42, to a page component. Put shareable state such as the search text in the URL, use Link for in-app links, and make the server send index.html for deep links.30 min

Make the React frontend talk to the Express API: a fetch-based API client, CORS and cookies across origins, loading and error states on slow networks, and keeping the screen in sync with optimistic updates.

1. Calling the API with fetchfetch is the browser function that sends HTTP requests from your React code to the Express API. To send data you give a method, a Content-Type header and a JSON.stringify body, then read the answer with res.json(). fetch does not fail on 404 or 500, so you must check res.ok yourself. Put all of this in one small API client that every screen uses.30 min
2. CORS, origins and cookiesAn origin is the scheme, host and port of a URL, so localhost:5173 and localhost:3000 are different origins. Browsers block a page from reading answers from another origin unless the server allows it with CORS headers. Sending cookies across origins needs credentials: "include" plus an exact allowed origin. The easiest fix is to avoid the problem: serve the app and the API from the same origin.30 min
3. Loading, errors and slow networksEvery request can be slow or fail, so each screen tracks three things: loading, error and data. A network error (fetch throws) is different from an HTTP error (the server answered 4xx or 5xx). Add timeouts, cancel requests the user no longer needs, and retry only safe requests. Never send a payment or a new note twice by accident.30 min
4. Keeping the screen in syncAfter you create, edit or delete a note, the list on screen must match the server. You can refetch the list, update it from the server's answer, or update it optimistically: change the screen at once and roll back if the server fails. Libraries like TanStack Query handle caching and refetching for you. Also ignore late answers to old searches, and wait for a pause in typing before searching.30 min

Add signup, login and logout to the Notes app with hashed passwords and session cookies, protect every page and API route, and attach images to notes with object storage and presigned URLs.

1. Signup and login end to endSignup and login are a conversation between the browser and the server. The browser sends an email and password; the server stores only a hash of the password, never the password itself. After login the server gives the browser a session cookie, and the browser sends it back on every request so the server knows who you are.30 min
2. Protecting pages and API routesA protected route is a page or API that only logged-in users may use. Redirecting to /login on the frontend makes the app pleasant, but it does not protect anything. The backend must check the session on every request, return 401 when nobody is logged in, and return 404 when someone asks for another user's note.25 min
3. Adding image attachments to notesTo attach a photo to a note, the browser sends the file to object storage such as Amazon S3 or Cloudflare R2, and your database saves only a key: the file's name inside that storage. Your server checks the type and size and hands out short-lived upload and download links, so big files never pass through it.30 min

Put the Notes app on the internet and keep it healthy: choose hosts and a region, connect a domain with HTTPS, manage environment variables and secrets, ship every change through a CI/CD pipeline, and watch the app with health checks, logs, alerts and backups.

1. Where to deployDeploying means putting your app on computers that are always on and reachable from the internet. The Notes app has three parts: the React frontend, the Express API and the PostgreSQL database, and each needs a home. You choose between easy platforms, a server you control yourself, and managed databases, then connect your own domain with HTTPS.30 min
2. Environment variables and secretsThe same code runs on your laptop, on a preview copy and in production; only its settings change. Those settings, like the database address and secret keys, come from environment variables, never from the code. Secrets live in a local .env file (never committed) and in the host's dashboard, and the app checks them when it starts.30 min
3. CI/CD: shipping every change safelyCI (continuous integration) means a robot checks every change: it installs, lints, tests and builds the code within minutes. CD (continuous delivery or deployment) means changes that pass are shipped automatically, the same way every time. Add preview deployments for pull requests, safe database migrations, a quick rollback and branch protection, and releasing stops being scary.30 min
4. Monitoring, logs and alertsOnce the app is live, you need to know it is working before users tell you it is not. A health endpoint, an uptime monitor, clean logs and error tracking show what is happening; a few key numbers and alerts tell a person when to act. Backups that you have actually restored, and a simple incident routine, protect the users' notes when something goes wrong.30 min

Make the Notes app fast, safe and trustworthy: measure and fix performance with Core Web Vitals, run a full security review from HTTPS to backups, and build a test suite from unit tests to end-to-end tests in CI.

1. Making the Notes app fastPerformance means how quickly your app loads and reacts. First measure with Lighthouse, the DevTools Performance panel and data from real users. Then fix the biggest problem: heavy images and scripts on the frontend, slow queries and missing indexes on the backend. Always test on a cheap phone with slow 4G, because that is how many people in India will use your app.30 min
2. A full-stack security reviewA security review is going through your whole app with a checklist before launch, and again every few months. For the Notes app that means HTTPS, hashed passwords, safe cookies, checking ownership on every endpoint, validating input, escaping output, parameterised SQL, keeping secrets out of git, updating packages, setting security headers, rate limiting logins, careful logs and backups.30 min
3. Testing a full-stack appTests are small programs that check your app still works after every change. A full-stack app needs many fast unit tests, some integration tests that call the real API with a test database, and a few end-to-end tests that click through the app in a real browser. Test money, login and data-loss paths first, and run every test in CI on each push.30 min

Plan, build and ship your capstone in four weeks, present it in a strong portfolio, prepare for full-stack interviews in India, and learn the basics of freelancing: scope, pricing, agreements, payments and taxes at a general level.

1. Capstone project briefThe capstone is one complete app that you plan, build, test and put online by yourself. You can finish the Notes app from this course or build an app of the same size, such as college event booking or a flatmate expense splitter. It must have login, full create, read, update and delete with ownership checks, validation, search, one extra feature, tests, a live HTTPS link and a README. Four weeks is enough if you follow a plan.30 min
2. Your portfolio and GitHubYour portfolio is the work you show to employers and clients. Two or three finished, live projects with clear READMEs beat ten tutorial clones. Set up your GitHub profile and pinned repositories, write a README that answers a reviewer's questions, keep a clean commit history, record a 2-minute demo, and write resume bullets with real numbers.30 min
3. Full-stack interviews in IndiaMost full-stack interviews mix a few rounds: an online test, data structures and algorithms, a machine coding round where you build a small feature in 60 to 90 minutes, a light design round, a deep dive into your own project, and an HR or manager round. Prepare for each one separately, practise aloud, answer behavioural questions with STAR, and ask good questions at the end.30 min
4. Freelancing basics in IndiaFreelancing means doing paid projects for several clients instead of one employer. Find first clients through local businesses, referrals, LinkedIn and platforms. Put the scope, milestones, payment terms, revisions and ownership in writing, take an advance, and send proper invoices. Freelance income is taxable, and tax rules changed in 2026, so confirm the details with a chartered accountant.30 min