Full Stack Application

A modern full-stack application built with Vue 3 frontend and Nest.js backend, managed with pnpm workspace.

full-stack-workspace/
├── apps/
│   ├── frontend/          # Vue 3 + TypeScript + Element Plus
│   └── backend/           # Nest.js + TypeScript + Express
├── packages/              # Shared packages (if any)
├── pnpm-workspace.yaml    # pnpm workspace configuration
└── package.json           # Root package.json

• Vue 3 with Composition API
• TypeScript
• Element Plus UI Framework
• Vite Build Tool
• Pinia State Management
• Vue Router
• Axios for HTTP requests

• Nest.js Framework
• TypeScript
• Express.js
• Swagger/OpenAPI Documentation
• JWT Authentication (configured)
• TypeORM (configured)
• Class Validator

• Node.js (>=18.0.0)
• pnpm (>=8.0.0)

1. Clone the repository and navigate to the project directory:

cd /workspace

2. Install dependencies for all packages:

pnpm install

3. Set up environment variables:
   • Copy .env.example to .env in the backend directory
   • Modify environment variables as needed

pnpm dev

Frontend (Vue 3):

cd apps/frontend
pnpm dev

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

Backend (Nest.js):

cd apps/backend
pnpm dev

The backend will be available at http://localhost:3001 API documentation available at http://localhost:3001/api

Build all applications:

pnpm build

Build individual applications:

cd apps/frontend
pnpm build

cd apps/backend
pnpm build

Run tests for all packages:

pnpm test

Run linting for all packages:

pnpm lint

Run formatting for all packages:

pnpm format

The backend provides Swagger/OpenAPI documentation available at:

• Development: http://localhost:3001/api
• The documentation includes all available endpoints and their schemas

VITE_API_BASE_URL=http://localhost:3001

NODE_ENV=development
PORT=3001
FRONTEND_URL=http://localhost:3000
DB_HOST=localhost
DB_PORT=3306
DB_USERNAME=root
DB_PASSWORD=password
DB_DATABASE=fullstack_app
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production

• ✅ Modern TypeScript development
• ✅ Hot reload for development
• ✅ API documentation with Swagger
• ✅ Responsive design with Element Plus
• ✅ CORS enabled
• ✅ Environment configuration
• ✅ JWT authentication setup
• ✅ Database integration ready (TypeORM)
• ✅ Validation and transformation
• ✅ Monorepo structure with pnpm workspace

• pnpm dev - Start both frontend and backend in development mode
• pnpm build - Build all applications
• pnpm test - Run tests for all packages
• pnpm lint - Run linting for all packages
• pnpm format - Run formatting for all packages

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build

• pnpm dev - Start development server with hot reload
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm test - Run tests

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

This project is licensed under the MIT License.