Prompt Management System

This project was developed as part of a MERN Stack Internship Assignment from Mindro Company. The task evolved into a complete full-stack web application for creating, organizing, and managing prompts.

• Frontend: Next.js (TypeScript) with MUI
• Backend: NestJS with PostgreSQL (TypeORM)
• Infrastructure: Fully containerized using Docker
• Automation: Continuous Integration & Deployment (CI/CD)

Where can it run?

Environment	How	Default URLs
Local (Docker)	docker-compose up --build	Frontend: http://localhost:3000 • Backend: http://localhost:8000 • DB: localhost:5432 • Adminer: http://localhost:8080
Local (native)	Node.js + local Postgres	Frontend: http://localhost:3000 • Backend: http://localhost:8000 • DB: localhost:5432 • Adminer: http://localhost:8080
Staging/Prod	Docker-based deployment using CI/CD	On each push to master, Docker images are built and pushed to Docker Hub. Deploy using these images on a VM or container platform.

---

Feature Highlights

Frontend (Next.js + MUI + Redux)

• Built with Next.js and TypeScript
• Material UI (MUI) used for consistent and responsive styling
• Global state managed via Redux Toolkit (promptSlice)
• Fetches prompts using a custom REST client (/prompt) and displays them in a todo-style list
• Clean layout with reusable components
• API base URL driven by environment variable: NEXT_PUBLIC_API_URL

Backend (NestJS + TypeORM + PostgreSQL)

• Single controller: /prompt with full CRUD support
• Request validation using DTOs and class-validator
• Clean architecture with service/controller separation
• PostgreSQL integration via TypeORM

DevOps

• One-command local setup with Docker Compose
• Adminer for DB inspection at http://localhost
• CI/CD pipeline: builds, tests, and pushes Docker images to Docker Hub on master commits

---

🗂 Project Structure

.
├── client/                     # Next.js app (frontend)
│ ├── public/                   # Static assets (images, icons, etc.)
│ ├── src/
│ │ ├── components/             # Reusable React components
│ │ ├── pages/                  # Route-based pages (Next.js routing)
│ │ ├── redux/                  # Redux Toolkit slices and store
│ │ ├── styles/                 # Global styles (e.g., base.css)
│ │ └── theme/                  # MUI custom theme configuration
│ ├── Dockerfile                # Frontend Docker config
│ ├── next.config.ts            # Next.js config
│ └── package.json              # Frontend dependencies and scripts
├── webapp/                     # NestJS app (backend)
│   ├── src/
│   │   ├── prompt/              # Prompt module (controller, service, DTOs)
│   │   │   └── dto/             # Data Transfer Objects for prompt
│   │   ├── entities/            # TypeORM entities
│   │   ├── main.ts              # App bootstrap file
│   │   ├── app.module.ts        # Root application module
│   │   ├── app.service.ts       # Root service
│   │   └── app.controller.ts    # Root controller (optional, unused)
│   ├── test/                    # Auto-generated test specs
│   ├── ormconfig.ts             # TypeORM configuration
│   ├── Dockerfile               # Backend Docker config
│   ├── nest-cli.json            # NestJS CLI config
│   └── package.json             # Backend dependencies and scripts
├── docker-compose.yml
├── .github/workflows/           
└── README.md

---

Quick Start

Prerequisites

• Docker & Docker Compose installed
• Node.js (v18 recommended)
• npm or yarn package manager
• Docker Hub account (for pushing images)

---

Running with Docker (Recommended)

First of all pull the latest version of front- and backend from Dockerhun with the following command:

docker pull arianof/my-backend:latest
docker pull arianof/my-frontend:latest

and now you can run it with:

docker compose up -d

if you want to stop them:

docker compose stop

Services:

• Frontend → http://localhost:3000
• Backend → http://localhost:8000
• PostgreSQL → localhost:5432 (volume persisted)
• Adminer → localhost:8080

---

📖 API Overview

Base URL: ${NEXT_PUBLIC_API_URL} (e.g., http://localhost:8000)

Method	Endpoint	Description
GET	/prompt	List prompts
POST	/prompt	Create a prompt
GET	/prompt/:id	Get a single prompt
PUT	/prompt/:id	Update a prompt
DELETE	/prompt/:id	Delete a prompt

---

Demo

---

📝 License

MIT – see LICENSE file. Feel free to use, modify, and distribute.