Skip to main content

Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js

Version 18.x or higher recommended

npm

Comes bundled with Node.js
This project uses Angular 20 and Ionic 8, which require Node.js 18.x or higher.

Installation Steps

1

Clone the Repository

Clone the Sushi Restaurant App repository to your local machine:
git clone https://github.com/mauriciouniversidad77-commits/Sushi.git
cd Sushi
2

Install Dependencies

Install all required npm packages:
npm install
This will install:
  • Angular 20 framework
  • Ionic 8 components and toolkit
  • Capacitor 8 for native functionality
  • Development tools (TypeScript, ESLint, Karma)
  • TailwindCSS for styling
3

Verify Installation

Check that the Angular CLI is available:
npm run ng -- version
You should see Angular CLI version 20.0.0 and related package versions.

Key Dependencies

Core Framework

  • Angular: v20.0.0 - Modern web application framework
  • Ionic Angular: v8.0.0 - Mobile UI components
  • RxJS: v7.8.0 - Reactive programming library

Native Capabilities

  • Capacitor Core: v8.1.0 - Native runtime
  • Capacitor Plugins: App, Haptics, Keyboard, Status Bar (v8.0.1)

Development Tools

  • TypeScript: v5.9.0 - Type-safe JavaScript
  • Angular ESLint: v20.0.0 - Code quality
  • Karma & Jasmine: Testing framework
  • TailwindCSS: v3.4.19 - Utility-first CSS

IDE Setup Recommendations

Visual Studio Code

Recommended extensions for the best development experience:
{
  "recommendations": [
    "angular.ng-template",
    "ms-vscode.vscode-typescript-next",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "ionic.ionic"
  ]
}

TypeScript Configuration

The project uses strict TypeScript settings for type safety:
  • Strict Mode: Enabled for maximum type safety
  • Target: ES2022 with ES2020 modules
  • Experimental Decorators: Enabled for Angular
  • Strict Templates: Enforced in Angular components

Project Structure

After installation, your project structure will look like:
Restaurant/
├── src/
│   ├── app/              # Application components
│   ├── assets/           # Static assets
│   ├── theme/            # Ionic theming
│   ├── environments/     # Environment configs
│   └── global.scss       # Global styles
├── www/                  # Build output directory
├── angular.json          # Angular CLI configuration
├── capacitor.config.ts   # Capacitor configuration
├── tailwind.config.js    # TailwindCSS configuration
├── karma.conf.js         # Test runner configuration
└── package.json          # Project dependencies

Next Steps

Running the App

Learn how to start the development server

Building

Create production builds for deployment

Build docs developers (and LLMs) love