AlgoCademy
Start learning free

CoursesBuild real appsFull-Stack

Join your API and your storefront into one app.

For people who have built a frontend and a backend and want to connect them. You join a React storefront to an Express API: login with cookies, a cart and checkout, handling errors, and shipping both as one app.

Start the first lesson See the plans
You type every line A real checker runs your code Nothing to install
Lessons
58
Chapters
6
Language
JavaScript
Level
Advanced
Free
The first chapter
Before you start
The Frontend path and the Backend path, in JavaScript.

What you build

Login with cookies

Sign-up, a session cookie, and pages and routes that need a login.

Cart and checkout

A cart kept on the server, a payment, and one order per click.

One app to ship

One server for both programs, one command to build, one image.

A feature from a ticket

The data, the API and the page, then proof that it works.

Tools and topics

Syllabus

01Two Programs, One App11 lessons
  1. Two Addressesfree
  2. The Browser Asks Firstfree
  3. One Address in Developmentfree
  4. One Door to the APIfree
  5. Errors the Client Can Readfree
  6. A Feature in Two Halves: The Serverfree
  7. A Feature in Two Halves: The Pagefree
  8. Let the Database Searchfree
  9. Pages of Productsfree
  10. Settings on Both Sidesfree
  11. Project: The Category Menufree
02Login with Cookies13 lessons
  1. Sign Up: The Server
  2. Sign Up: The Form
  3. Log In: A Session Cookie
  4. Who Am I?
  5. The Login Form
  6. Cookies Across Origins
  7. A Safe Cookie
  8. Log Out
  9. Routes That Need a Login
  10. Pages That Need a Login
  11. Someone Else's Page
  12. Admins Only
  13. Project: Change the Password
03Cart and Checkout12 lessons
  1. The Cart on the Server
  2. The Cart on the Page
  3. Change and Remove Lines
  4. A Cart Before Login
  5. Check on the Server
  6. Show It on the Page
  7. Never Trust the Client's Total
  8. Take the Payment
  9. All or Nothing
  10. One Click, One Order
  11. The Receipt
  12. Project: A Discount Code
04When Things Go Wrong8 lessons
  1. A 500 Without Secrets
  2. Find It in the Log
  3. The API Is Down
  4. Too Slow
  5. Logged Out Halfway
  6. Somebody Was Faster
  7. Three Kinds of Not Found
  8. Project: Try Again, Safely
05Shipping It8 lessons
  1. One Server for Both
  2. Deep Links
  3. Production Is Different
  4. What Browsers May Keep
  5. One Command to Build, One to Start
  6. One Image
  7. Before Every Merge
  8. Project: Ready to Release?
06Ship a Feature6 lessons
  1. The Ticket, and Its First Slice
  2. The API Slice
  3. The Data Slice
  4. The Page Slice
  5. Prove It
  6. Review the AI's Patch

More in Build real appsFrontendBackendSecurityAll courses

LESSON 1

Two Addresses

The first chapter is free, no card needed. The rest comes with PRO.

Start the lesson See the plans