SaaS Application

Modern SaaS application built with Vue3 frontend and Express backend.

Tech Stack

Frontend

• Vue 3 with TypeScript
• Vite (build tool)
• Pinia (state management)
• Vue Router (routing)
• Socket.IO Client (real-time communication)
• Sass (CSS preprocessor)

Backend

• Express with TypeScript
• Socket.IO (real-time communication)
• Winston (logging)
• Morgan (HTTP request logging)
• Helmet (security)
• CORS

Infrastructure

• Azure (to be configured)
• CI/CD pipelines (to be configured)

Project Structure

saas-app/
├── frontend/              # Vue3 frontend application
│   ├── src/
│   │   ├── assets/       # Static assets
│   │   ├── components/   # Vue components
│   │   ├── composables/  # Vue composables
│   │   ├── router/       # Vue Router configuration
│   │   ├── services/     # API and Socket services
│   │   ├── stores/       # Pinia stores
│   │   ├── types/        # TypeScript types
│   │   ├── views/        # Page views
│   │   ├── App.vue       # Root component
│   │   └── main.ts       # Entry point
│   ├── .env.example      # Environment variables example
│   └── vite.config.ts    # Vite configuration
│
├── backend/              # Express backend application
│   ├── src/
│   │   ├── config/       # Configuration files
│   │   ├── controllers/  # Route controllers
│   │   ├── middleware/   # Express middleware
│   │   ├── models/       # Data models
│   │   ├── routes/       # API routes
│   │   ├── services/     # Business logic
│   │   ├── types/        # TypeScript types
│   │   ├── utils/        # Utility functions
│   │   ├── app.ts        # Express app configuration
│   │   └── index.ts      # Entry point
│   ├── .env.example      # Environment variables example
│   └── tsconfig.json     # TypeScript configuration
│
└── package.json          # Root package.json with workspace scripts

Getting Started

Prerequisites

• Node.js v20.9.0 or higher
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd saas-app

2. Install dependencies for all projects

npm run install:all

Or install manually:

# Install root dependencies
npm install

# Install frontend dependencies
cd frontend
npm install

# Install backend dependencies
cd ../backend
npm install

3. Configure environment variables

Frontend (.env):

cd frontend
cp .env.example .env
# Edit .env with your configuration

Backend (.env):

cd backend
cp .env.example .env
# Edit .env with your configuration

Development

Run both frontend and backend in development mode:

npm run dev

Or run them separately:

Frontend only:

npm run dev:frontend
# Or: cd frontend && npm run dev

Backend only:

npm run dev:backend
# Or: cd backend && npm run dev

Access the application

• Frontend: http://localhost:5173
• Backend API: http://localhost:3000
• API Health Check: http://localhost:3000/api/v1/health

Building for Production

Build both projects:

npm run build

Or build separately:

npm run build:frontend
npm run build:backend

Available Scripts

Root

• npm run dev - Run both frontend and backend in development mode
• npm run build - Build both projects for production
• npm run install:all - Install dependencies for all projects

Frontend

• npm run dev - Start Vite dev server
• npm run build - Build for production
• npm run preview - Preview production build

Backend

• npm run dev - Start development server with hot reload
• npm run build - Compile TypeScript to JavaScript
• npm run start - Run production build
• npm run watch - Watch mode for TypeScript compilation

Features

• Real-time communication with Socket.IO
• RESTful API with Express
• State management with Pinia
• Routing with Vue Router
• TypeScript for type safety
• Logging with Winston
• Security with Helmet
• CORS configuration
• Error handling
• Environment configuration

Next Steps

1. Add authentication (JWT)
2. Add database integration (PostgreSQL/MongoDB)
3. Configure Azure infrastructure
4. Setup CI/CD pipelines
5. Add testing (Jest, Vitest, Cypress)
6. Add API documentation (Swagger)
7. Add monitoring and analytics

Contributing

1. Create a feature branch
2. Commit your changes
3. Push to the branch
4. Create a Pull Request

License

ISC