Tangy is building your next step
Shaping the lesson around what you want to make.
Tangy is building your next step
Shaping the lesson around what you want to make.
Computer Science
A hands‑on course that takes your current HTML/CSS knowledge and a splash of React experience to a full‑stack Node.js web app. You’ll set up an Express server, render pages with EJS, and add interactive vanilla‑JS behavior, ending with a deploy‑ready to‑do list you can showcase.
Project Foundations
2 lessonsSet up the development environment, initialize the Node project, and launch a minimal Express server.
Routing & Middleware
2 lessonsAdd useful routes, serve static assets, and handle POST data from forms.
Server‑Side Rendering with EJS
2 lessonsIntroduce EJS as the view engine and render the to‑do list dynamically.
Front‑End Interactivity with Vanilla JS
2 lessonsAdd client‑side behavior to create and delete tasks without reloading the page.
CRUD API Endpoints & In‑Memory Store
2 lessonsExpose a tiny JSON API for creating, reading, and deleting to‑do items, and wire the front end to it.
Polish, Test & Document
2 lessonsFinalize styling, verify functionality, and prepare the project for sharing.
Public lesson
To build a React application that goes beyond simple static pages, we need to set up a JavaScript environment outside of the browser. Node.js provides that runtime, and its package manager, npm, handles the libraries and tools we'll be pulling in.
Let's get your machine ready.
Tasks
First, download and install the Long Term Support (LTS) version of Node.js from the official website. This version is the most stable, which is what we want for a solid foundation.
Tasks
Once the installer finishes, open your terminal (Command Prompt, PowerShell, or Terminal) and verify the installation. You should see version numbers for both Node and the package manager.
node -v
npm -v
node -v
npm -v
If you see version numbers printed out, you're ready to go. If not, restart your terminal or computer and try again.
Tasks
Now, let's create the home for your project. Create a new folder for your app, navigate into it, and run the initialization command.
mkdir my-react-app
cd my-react-app
npm init -y
mkdir my-react-app
cd my-react-app
npm init -y
The -y flag tells npm to use the default settings for all the questions it would normally ask (like author name or license). This keeps things moving so we can get to the code.
Open the package.json file that appeared in your folder. This file acts as the ID card for your project—it tracks what your app is called and what tools (dependencies) it needs to run.
Tasks
For now, just confirm that the file exists and contains a "name" that matches your folder name.
{
"name": "my-react-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
{
"name": "my-react-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
With this file in place, npm knows exactly where it is, and we can start adding the specific pieces needed for React next.
6 modules · 12 lessons
Project Foundations
Routing & Middleware
Server‑Side Rendering with EJS
Front‑End Interactivity with Vanilla JS
CRUD API Endpoints & In‑Memory Store
Polish, Test & Document
Learn by building your own version.
Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.