Clothing Designer Application

A fullstack MERN application for designing custom t-shirts and sweaters, built with React, NestJS, Docker, and NX monorepo.

Features

• 🎨 Design custom t-shirts and sweaters
• 🎨 Multiple color and material options
• ✍️ Add custom text to t-shirts (up to 16 characters)
• 📷 Upload images to garments
• 💰 Real-time pricing in CAD, USD, and EUR
• 💾 Order persistence across page refreshes
• 📱 Responsive design for mobile and desktop
• 🐳 Docker containerization

Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS
• Backend: NestJS, TypeScript, Express
• Monorepo: NX
• Containerization: Docker, Docker Compose
• Testing: Jest, React Testing Library, Supertest
• API Documentation: Swagger

Prerequisites

• Node.js 18+
• npm or yarn
• Docker and Docker Compose (for containerized deployment)

Getting Started

Local Development

1. Install dependencies:

npm install

2. Start the backend:

npm run start:backend

3. Start the frontend (in a new terminal):

npm run start:frontend

4. Access the application:

• Frontend: http://localhost:4200
• Backend API: http://localhost:3000/api
• Swagger Docs: http://localhost:3000/api/docs

Docker Deployment

1. Build and start containers:

docker-compose up --build

2. Access the application:

• Frontend: http://localhost:4200
• Backend API: http://localhost:3000/api

3. Stop containers:

docker-compose down

Running Tests

# Run all tests
npm run test:all

# Run frontend tests
npm run test:frontend

# Run backend tests
npm run test:backend

# Run with coverage
nx test frontend --coverage
nx test backend --coverage

Project Structure

clothing-designer/
├── apps/
│   ├── frontend/          # React application
│   │   ├── src/
│   │   │   ├── components/
│   │   │   ├── hooks/
│   │   │   └── utils/
│   │   └── project.json
│   └── backend/           # NestJS application
│       ├── src/
│       │   ├── orders/
│       │   ├── currency/
│       │   └── app/
│       └── project.json
├── libs/
│   └── shared/            # Shared types and utilities
├── docker-compose.yml
├── Dockerfile.frontend
├── Dockerfile.backend
└── nx.json

API Endpoints

Orders

• POST /api/orders - Create or update order
• GET /api/orders - Get current order
• GET /api/docs - Swagger documentation

Pricing Rules

T-Shirts

• Black/White: $16.95
• Green/Red: $18.95
• Heavy Cotton: +$3.00
• Text (9-16 chars): +$5.00
• Image Upload: +$10.00

Sweaters

• Black/White: $28.95
• Pink/Yellow: $32.95
• Image Upload: +$10.00

Design Decisions

1. Monorepo Architecture: NX provides excellent tooling for managing multiple applications
2. In-Memory Storage: Simple solution for this exercise, easily replaceable with a database
3. Currency Fallback: Ensures application works even if external API fails
4. Validation Layers: Both frontend and backend validation for robust error handling
5. Docker Multi-Stage Builds: Optimized image sizes for production deployment

Future Enhancements

• User authentication and multiple users
• Database integration (PostgreSQL/MongoDB)
• Order history and management
• Payment integration
• Admin dashboard
• Image manipulation (crop, resize, filters)
• Preview with realistic garment models

License

MIT