My Pizza App 🍕

A full-stack pizza shop web application built with ASP.NET Core 9 and Vue.js 3. This project serves as an interview tool for developers to demonstrate their skills in identifying and fixing code issues.

🎯 Project Overview

This application allows users to browse pizzas, view details, and authenticate. The initial implementation focuses on core functionality with clean architecture principles.

Note for Interview Candidates: Future PRs will include cart and order functionality with intentional code issues for you to identify and fix as part of the interview process.

🛠️ Technology Stack

Backend

• Framework: ASP.NET Core 9 (MVC API)
• Database: SQLite with Entity Framework Core (Code-First)
• Authentication: JWT Bearer Tokens
• Architecture: Clean Code / Layered Architecture
  • PizzaApp.DTO - Data Transfer Objects
  • PizzaApp.Data - Entity Framework Context, Entities, Migrations
  • PizzaApp.Service - Business Logic Layer
  • PizzaApp.API - Web API Controllers

Frontend

• Framework: Vue.js 3 with Composition API
• Build Tool: Vite
• State Management: TanStack Query (Vue Query)
• UI Framework: Vuetify (Material Design)
• Styling: Tailwind CSS
• Routing: Vue Router

📋 Prerequisites

Before you begin, ensure you have the following installed:

• .NET 9 SDK
• Node.js (v18 or higher)
• npm or yarn
• A code editor (VS Code recommended)
• SQLite (usually comes pre-installed on macOS/Linux)

Verify Installation

# Check .NET version
dotnet --version

# Check Node.js version
node --version

# Check npm version
npm --version

🚀 Getting Started

Backend Setup

1. Navigate to the backend directory

   cd backend

2. Restore NuGet packages

   dotnet restore

3. Apply database migrations

   cd PizzaApp.API
   dotnet ef database update

   This will create the SQLite database and seed it with sample data.

4. Run the API

   dotnet run

   The API will start on http://localhost:5000 (or https://localhost:5001 for HTTPS).

   Swagger documentation will be available at http://localhost:5000/swagger

Frontend Setup

1. Navigate to the frontend directory (from project root)

   cd frontend

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

   The application will start on http://localhost:5173

4. Open your browser

   Navigate to http://localhost:5173 to view the application.

📁 Project Structure

sample-vue-repo/
├── backend/
│   ├── PizzaApp.sln                    # Solution file
│   ├── PizzaApp.DTO/                   # Data Transfer Objects
│   │   ├── Requests/                   # API request models
│   │   ├── Responses/                  # API response models
│   │   └── Models/                     # Shared DTOs
│   ├── PizzaApp.Data/                  # Data Access Layer
│   │   ├── Context/                    # DbContext
│   │   ├── Entities/                   # Entity models
│   │   ├── Configurations/             # EF configurations
│   │   └── Migrations/                 # EF migrations
│   ├── PizzaApp.Service/               # Business Logic Layer
│   │   ├── Interfaces/                 # Service interfaces
│   │   ├── Services/                   # Service implementations
│   │   └── Repositories/               # Repository pattern
│   └── PizzaApp.API/                   # Web API
│       ├── Controllers/                # API controllers
│       ├── Middleware/                 # Custom middleware
│       ├── Extensions/                 # Extension methods
│       ├── appsettings.json           # Configuration
│       └── Program.cs                  # Application entry point
├── frontend/
│   ├── src/
│   │   ├── components/                 # Reusable components
│   │   │   ├── layout/                # Layout components
│   │   │   ├── auth/                  # Auth components
│   │   │   └── pizza/                 # Pizza components
│   │   ├── views/                      # Page components
│   │   ├── services/                   # API services
│   │   ├── composables/                # Vue composables
│   │   ├── router/                     # Vue Router config
│   │   ├── App.vue                     # Root component
│   │   └── main.js                     # Application entry
│   ├── package.json                    # Dependencies
│   ├── vite.config.js                  # Vite configuration
│   └── tailwind.config.js              # Tailwind configuration
├── plans/                              # Architecture documentation
└── README.md                           # This file

🔑 Features

Current Features (Phase 1)

• ✅ User Authentication

  • Register new account
  • Login with JWT tokens
  • Secure password hashing

• ✅ Pizza Browsing

  • View all available pizzas
  • See pizza details with toppings
  • Computed pricing (base price + toppings)

• ✅ Responsive UI

  • Material Design components
  • Tailwind CSS styling
  • Mobile-friendly layout

Upcoming Features (Phase 2 - Interview Task)

• 🔄 Shopping cart functionality
• 🔄 Order placement and history
• 🔄 Admin panel for pizza management
• 🔄 Pizza customization (add/remove toppings)
• 🔄 User profile management

🍕 Sample Data

The application comes pre-seeded with 5 classic pizzas:

1. Margherita - $8.99

   • Mozzarella, Tomato Sauce, Basil

2. Pepperoni - $10.99

   • Mozzarella, Tomato Sauce, Pepperoni

3. Hawaiian - $11.99

   • Mozzarella, Tomato Sauce, Ham, Pineapple

4. Meat Lovers - $13.99

   • Mozzarella, Tomato Sauce, Pepperoni, Sausage, Bacon, Ham

5. Veggie Supreme - $12.99

   • Mozzarella, Tomato Sauce, Bell Peppers, Onions, Mushrooms, Olives

🔌 API Endpoints

Authentication

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login and receive JWT token

Pizzas

• GET /api/pizzas - Get all pizzas with computed prices
• GET /api/pizzas/{id} - Get pizza details with toppings

Toppings

• GET /api/toppings - Get all available toppings

🧪 Testing the Application

Manual Testing Steps

1. Start both backend and frontend servers

2. Test Authentication

   • Navigate to /register
   • Create a new account
   • Login with your credentials
   • Verify JWT token is stored in localStorage

3. Test Pizza Listing

   • Navigate to home page (/)
   • Verify all 5 pizzas are displayed
   • Check that computed prices are shown correctly

4. Test Pizza Details

   • Click on any pizza card
   • Verify navigation to detail page
   • Check that all toppings are listed
   • Verify computed price matches (base + sum of toppings)

Using Swagger

1. Navigate to http://localhost:5000/swagger
2. Test API endpoints directly
3. Use "Authorize" button to add JWT token for protected endpoints

🐛 Troubleshooting

Backend Issues

Database not created

cd backend/PizzaApp.API
dotnet ef database update

Port already in use

• Edit backend/PizzaApp.API/Properties/launchSettings.json
• Change the port numbers

Migration errors

# Remove existing migrations
dotnet ef migrations remove

# Create new migration
dotnet ef migrations add InitialCreate

# Apply migration
dotnet ef database update

Frontend Issues

Dependencies not installing

# Clear npm cache
npm cache clean --force

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

CORS errors

• Verify backend CORS configuration in Program.cs
• Check that frontend URL matches allowed origins
• Ensure backend is running before making requests

Vite port conflict

• Edit frontend/vite.config.js
• Change the port in server configuration

📚 Additional Resources

Documentation

• ASP.NET Core Documentation
• Entity Framework Core
• Vue.js 3 Documentation
• TanStack Query
• Vuetify Documentation
• Tailwind CSS

Architecture

• See plans/pizza-app-architecture.md for detailed architecture
• See plans/implementation-guide.md for implementation details

🤝 For Interview Candidates

What to Expect

This codebase represents a working pizza shop application. In the interview process, you will:

1. Review the current implementation
   • Understand the architecture
   • Explore the codebase
   • Run the application locally