Carousel App

A full-stack TypeScript application built with NestJS (backend) and Angular (frontend) featuring an interactive carousel and item details view.

Project Structure

.
├── backend/          # NestJS backend API
├── frontend/         # Angular frontend application
└── package.json      # Root package.json with convenience scripts

Features

• Carousel Component: Interactive carousel displaying items in the top 30% of the page
• Item Details: Detailed view showing item information in the bottom 70% when an item is selected
• Responsive Design: Mobile-friendly layout that adapts to different screen sizes
• Unit Tests: Comprehensive test coverage for both backend and frontend

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Installation

1. Install all dependencies:

npm run install:all

Or install separately:

# Install root dependencies
npm install

# Install backend dependencies
cd backend && npm install

# Install frontend dependencies
cd ../frontend && npm install

Running the Application

Start Backend (Terminal 1)

npm run start:backend

The backend will run on http://localhost:3000

Start Frontend (Terminal 2)

npm run start:frontend

The frontend will run on http://localhost:4200

Open your browser and navigate to http://localhost:4200

Testing

Backend Tests

npm run test:backend

Frontend Tests

npm run test:frontend

Architecture

Backend (NestJS)

• Items Module: Handles item-related API endpoints
• Items Service: Business logic for item operations
• Items Controller: REST API endpoints (GET /items, GET /items/:id)
• DTOs: Data transfer objects for type safety

Frontend (Angular)

• Carousel Component: Displays items in a scrollable carousel
• Item Details Component: Shows selected item details with image and Buy Now button
• Item Service: Handles HTTP requests to the backend API
• Models: TypeScript interfaces for type safety

Code Quality

• TypeScript for type safety
• Modular architecture with separation of concerns
• Comprehensive unit tests
• Clean, maintainable code structure
• Responsive CSS with modern design