Skip to main content

​
Get Started in 5 Minutes

Follow this guide to set up and run the Sushi Restaurant App locally. You’ll have a fully functional restaurant menu application running in no time.
1

Clone the Repository

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

Install Dependencies

Install all required dependencies using your preferred package manager:
npm install
The app uses Angular 20, Ionic 8, and Capacitor 8. All dependencies will be automatically installed.
3

Start the Development Server

Launch the development server to run the app locally:
npm start
The app will automatically open in your browser at http://localhost:8100. You’ll see the restaurant menu with delicious seafood dishes.
The npm start command runs ng serve from the Angular CLI, which includes hot-reload for a smooth development experience.
4

Explore the Menu

Once the app is running, you’ll see “El Faro del Mar” restaurant menu with six featured dishes:
  • Ceviche de Pescado - Fresh fish ceviche with lime and red onion
  • Cóctel de Camarón - Shrimp cocktail with special ketchup sauce
  • Tacos de Pescado - Battered fish tacos with chipotle dressing
  • Aguachile Verde - Raw shrimp in lime juice with serrano chile
  • Filete al Mojo de Ajo - Garlic butter fish fillet with rice
  • Pulpo Zarandeado - Grilled octopus with special marinade
Click any dish to view its detailed ingredients and preparation notes.

​
Your First View

Here’s what happens when the app loads and displays the menu:
src/app/home/home.page.ts
import { Component, OnInit } from '@angular/core';
import { RegistrosServiceTs } from './home.service';
import { Registro } from './home.model';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
  standalone: false,
})
export class HomePage implements OnInit {
  registros: Registro[] = [];

  constructor(private registrosService: RegistrosServiceTs) {}

  ngOnInit() {
    this.registros = this.registrosService.getRegistros();
  }
}
The HomePage component fetches all menu items from the RegistrosServiceTs service when it initializes. Each item is a Registro object containing the dish name, photo, and ingredients.

​
Understanding the Menu Data

The app uses a simple service to manage menu items. Here’s how the data is structured:
src/app/home/home.model.ts
export interface Registro {
  id: string;
  nombre: string;
  foto: string;
  observaciones: string[];
}
Each menu item includes:
  • id - Unique identifier for the dish
  • nombre - Dish name in Spanish
  • foto - URL to the dish photo
  • observaciones - Array of ingredients or preparation notes
{
  id: '1',
  nombre: 'Ceviche de Pescado',
  foto: 'https://images.unsplash.com/photo-1535399831218...',
  observaciones: [
    'Pescado fresco',
    'Limón',
    'Cebolla morada',
    'Chile serrano',
  ],
}

​
Next Steps

Now that you have the app running, explore these features:

Project Structure

Learn how the app is organized

Components

Dive into the HomePage component

Services

Understand the data service layer

Styling

Customize the app’s appearance

​
Available Commands

Here are the key commands from package.json you’ll use during development:
CommandDescription
npm startStart the development server
npm run buildBuild the app for production
npm run watchBuild with watch mode for development
npm testRun unit tests
npm run lintLint the codebase
Make sure you have Node.js (v18 or higher) and npm installed before running these commands.

​
Troubleshooting

If port 8100 is occupied, you can specify a different port:
ng serve --port 8200
Try clearing the npm cache and reinstalling:
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
Install the Angular CLI globally:
npm install -g @angular/cli

​
What’s Next?

You’re now ready to start exploring and customizing the Sushi Restaurant App. Check out the Architecture Overview to understand how everything works together, or jump straight into Building to learn how to create a production-ready version.

Build docs developers (and LLMs) love

Get started for freeTalk to us