Skip to main content

​
Prerequisites

Before diving into building the ML Store, let’s ensure you have everything you need to succeed. This page covers the required tools, recommended knowledge, and helpful resources.

​
Required Software

You’ll need the following tools installed on your computer:

Node.js

Version 18 or higherNode.js provides the runtime environment and npm (package manager) needed to run the development tools.Download Node.js

Code Editor

VS Code RecommendedA modern code editor with TypeScript support. Visual Studio Code is free and has excellent TypeScript integration.Download VS Code

Web Browser

Modern Browser with DevToolsChrome, Firefox, Edge, or Safari. You’ll use the browser’s developer tools extensively.

Terminal

Command Line InterfaceBuilt into VS Code or use your system’s terminal (Terminal on Mac/Linux, Command Prompt/PowerShell on Windows).

​
Verifying Your Installation

Check that Node.js and npm are installed correctly:
Terminal
node --version
# Should output: v18.0.0 or higher

npm --version
# Should output: 9.0.0 or higher
If these commands don’t work, you may need to restart your terminal or computer after installing Node.js.
These extensions will significantly improve your development experience:

​
TypeScript and JavaScript

  • ESLint - Identifies and fixes code quality issues
  • Prettier - Automatic code formatting
  • JavaScript (ES6) code snippets - Quick code snippets

​
HTML and CSS

  • HTML CSS Support - IntelliSense for CSS class names in HTML
  • Auto Rename Tag - Automatically rename paired HTML tags
  • CSS Peek - Jump to CSS definitions

​
Development Tools

  • Live Server - Launch a local development server (though we’ll use Vite)
  • Path Intellisense - Auto-completes file paths
  • Better Comments - Colorizes comments for better readability

​
Required Knowledge

​
Basic Understanding Required

You should have a basic familiarity with:
1

HTML Basics

  • What HTML is and how it structures web pages
  • Basic tags like <div>, <p>, <h1>, <a>, <img>
  • How to create a simple HTML file
Don’t worry if you’re not an expert! The tutorial includes extensive explanations of all HTML concepts.
2

CSS Fundamentals

  • How CSS adds styling to HTML
  • Basic selectors (classes, IDs, elements)
  • Common properties like color, font-size, margin, padding
We’ll cover advanced CSS concepts like Flexbox and Grid from scratch.
3

JavaScript Basics

  • Variables and data types
  • Functions and basic control flow (if/else, loops)
  • What the DOM (Document Object Model) is
TypeScript builds on JavaScript, so basic JS knowledge is helpful but not required to be an expert.

​
Nice to Have (But Not Required)

These will help but aren’t essential - we’ll teach them:
  • ✨ TypeScript syntax (we explain all TypeScript features used)
  • ✨ API concepts (we cover HTTP requests and REST APIs)
  • ✨ Module systems (we explain imports/exports)
  • ✨ Build tools (Vite is pre-configured)

​
Helpful Background Concepts

​
Understanding the Web

A basic understanding of how the web works will help:
  • Client: Your web browser that displays the website
  • Server: Remote computer that sends data (like product information)
  • HTTP: Protocol for communication between client and server
In this project:
  • The browser (client) runs your HTML/CSS/TypeScript code
  • The Platzi API (server) provides product data
  • We use the Fetch API to request data via HTTP
Modern browsers include powerful tools for web development:
  • Elements/Inspector: View and edit HTML/CSS in real-time
  • Console: See JavaScript logs and errors
  • Network: Monitor API requests and responses
  • Sources/Debugger: Debug JavaScript code
Open DevTools: F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac)
npm (Node Package Manager) helps manage project dependencies:
npm install     # Install dependencies from package.json
npm run dev     # Run the development server
npm run build   # Build for production
All commands needed for this project are in package.json.

​
Project Dependencies

The tutorial uses minimal dependencies:
package.json
{
  "name": "mi-tutorial",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "~5.9.3",
    "vite": "^7.3.1"
  }
}
Only 2 dependencies! This keeps the project simple and focused on fundamentals.

​
Why These Tools?

Vite

Lightning-Fast Development
  • Instant hot module replacement (HMR)
  • Optimized production builds
  • Native ES modules support
  • Zero configuration needed

TypeScript

Type Safety & Better DX
  • Catch errors before runtime
  • Excellent IDE autocomplete
  • Self-documenting code with types
  • Compiles to standard JavaScript

​
System Requirements

  • OS: Windows 10 or 11
  • RAM: 4GB minimum (8GB recommended)
  • Storage: 500MB for project + dependencies
  • Terminal: PowerShell or Command Prompt

​
Internet Connection

An active internet connection is required for:
  • Installing dependencies via npm
  • Fetching products from the Platzi Fake Store API
  • Loading documentation and resources

​
Learning Resources

If you need to brush up on fundamentals, these resources are excellent:

HTML

CSS

JavaScript

TypeScript

​
Pre-Tutorial Checklist

Before moving to the setup page, ensure you have:
1

Node.js and npm installed

Run node --version and npm --version to verify.
2

Code editor ready

VS Code installed with recommended extensions (optional but helpful).
3

Browser with DevTools

Any modern browser is fine; Chrome is recommended for consistent DevTools.
4

Basic knowledge refreshed

Reviewed HTML, CSS, and JavaScript basics if needed.
5

Terminal accessible

Know how to open and run commands in your terminal.
All set? Great! You’re ready to start building.

​
Need Help?

If you’re stuck with any prerequisites:

Installation Issues

Check the official docs:

Concept Questions

TypeScript Help

Continue to Setup

Ready to start? Let’s set up your development environment and run the project!

Build docs developers (and LLMs) love

Get started for freeTalk to us