Product-Manager

A simple REST API with frontend

Features

• Product Listing: View all products
• Product Details: View detailed information about a specific product
• Product Creation: Add new products with name, type, colors, image URL, and description
• Responsive Design: Works on desktop and mobile devices

Technologies Used

Backend

• .NET 8 with ASP.NET Core WebAPI
• Entity Framework Core for database
• PostgreSQL/Supabase for data storage
• Swagger/OpenAPI for API documentation
• xUnit and FluentAssertions for unit testing

Frontend

• Next.js 15 with React 19
• TypeScript for type safety
• Tailwind CSS for styling

Project Structure

The project is organized into two main directories:

/
├── backend/
│   └── ProductAPI/            # .NET WebAPI project
│       ├── Controllers/       # API endpoints
│       ├── Data/              # Database context and migrations
│       ├── DTOs/              # Data Transfer Objects
│       ├── Middlewares/       # Custom middleware components
│       ├── Models/            # Domain entities
│       └── ProductAPI.Test/  # Unit tests
│
└── frontend/
    ├── app/                   # Next.js app directory
    │   ├── components/        # React components
    │   ├── interfaces/        # TypeScript interfaces
    │   ├── products/          # Product-related pages
    │   ├── create-product/    # Product creation page
    │   └── services/          # API service layer
    └── public/                # Static assets

Setup & Installation

Prerequisites

• .NET 8 SDK
• Node.js (v18+)
• PostgreSQL

Backend Setup

1. Navigate to the backend directory:

   cd backend/ProductAPI

2. Update the connection string in appsettings.json:

   "ConnectionStrings": {
     "DatabaseConnection": "Host=localhost;Database=productdb;Username=your_username;Password=your_password"
   }

3. Run the backend API:

   dotnet run

The API will be available at https://localhost:7059 with Swagger documentation at https://localhost:7059/swagger.

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Create a .env.local file with the API URL:

   NEXT_PUBLIC_API_URL=https://localhost:7059/api
   

4. Run the development server:

   npm run dev

The frontend will be available at http://localhost:3000.

Data Model

The system is built around these core entities:

• Product: Represents a product with name, description, image URL, and associated product type and colors
• ProductType: Categorizes products (e.g., Sofa, Chair, Table)
• Color: Available colors that can be associated with products

Database Model

API Endpoints

The API provides the following endpoints:

• GET /api/products - Retrieves a paginated list of products
• GET /api/products/{id} - Retrieves details for a specific product
• POST /api/products - Creates a new product
• GET /api/product-types - Retrieves all available product types
• GET /api/colors - Retrieves all available colors

Screenshots

Running Tests

To run the backend tests:

cd backend/ProductAPI.Test
dotnet test