Test App - Angular + Node.js + MongoDB

Full-stack web application menggunakan Angular 19, Node.js/Express, dan MongoDB.

Fitur

• ✅ Angular 19 frontend dengan standalone components
• ✅ Node.js/Express REST API backend
• ✅ MongoDB database
• ✅ Environment configuration untuk development & production
• ✅ CORS enabled
• ✅ Ready untuk production deployment

---

Quick Start - Development

Prerequisites

• Node.js 20.x atau lebih baru
• npm
• MongoDB (local atau remote)

Installation

1. Clone repository

   git clone <repository-url>
   cd test-app

2. Setup Backend

   cd server
   npm install
   cp .env.example .env
   # Edit .env sesuai konfigurasi MongoDB Anda

3. Setup Frontend

   cd ..
   npm install

4. Start MongoDB

   # Pastikan MongoDB sudah running
   sudo systemctl start mongod

5. Seed Sample Data

   cd server
   node seed-data.js

6. Run Backend

   npm start
   # Backend running at http://localhost:3000

7. Run Frontend (terminal baru)

   cd ..
   npm start
   # Frontend running at http://localhost:4200

8. Open Browser

   http://localhost:4200
   

---

Documentation

Development Setup

📖 SETUP.md - Panduan lengkap setup development environment

Production Deployment

📖 DEPLOYMENT.md - Dokumentasi lengkap deployment ke VPS 📖 QUICKSTART-DEPLOY.md - Quick start deployment guide

---

Project Structure

test-app/
├── src/                          # Angular frontend source
│   ├── app/
│   │   ├── pages/
│   │   │   └── titles/          # Titles page component
│   │   ├── services/
│   │   │   └── title.service.ts # API service
│   │   ├── app.component.*      # Root component
│   │   ├── app.config.ts        # App configuration
│   │   └── app.routes.ts        # Routing configuration
│   └── environments/            # Environment configurations
│       ├── environment.ts       # Development config
│       ├── environment.prod.ts  # Production config
│       └── environment.example.ts # Template
│
├── server/                      # Node.js backend
│   ├── server.js               # Express server
│   ├── seed-data.js            # Sample data script
│   ├── test-connection.js      # MongoDB test script
│   ├── package.json            # Backend dependencies
│   ├── .env                    # Environment variables (not committed)
│   └── .env.example            # Environment template
│
├── scripts/                    # Deployment & maintenance scripts
│   ├── setup-vps.sh           # VPS initial setup
│   ├── backup-mongodb.sh      # MongoDB backup script
│   └── restore-mongodb.sh     # MongoDB restore script
│
├── deploy.sh                  # Auto deployment script
├── ecosystem.config.js        # PM2 configuration
├── nginx.conf.example         # Nginx configuration template
│
├── SETUP.md                   # Development setup guide
├── DEPLOYMENT.md              # Production deployment guide
├── QUICKSTART-DEPLOY.md       # Quick deployment guide
└── README.md                  # This file

---

Environment Variables

Backend (server/.env)

PORT=3000
MONGODB_URI=mongodb://localhost:27017
DB_NAME=testdb
COLLECTION_NAME=titles
NODE_ENV=development

Frontend (src/environments/environment.ts)

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

---

API Endpoints

Base URL: http://localhost:3000/api

Method	Endpoint	Description
GET	/titles	Get all titles
POST	/titles	Create new title

Example Request

# Get all titles
curl http://localhost:3000/api/titles

# Create new title
curl -X POST http://localhost:3000/api/titles \
  -H "Content-Type: application/json" \
  -d '{"title":"New Title"}'

---

Scripts

Development

# Run backend
cd server && npm start

# Run frontend
npm start

# Build for production
npm run build -- --configuration production

Testing & Utilities

# Test MongoDB connection
cd server && node test-connection.js

# Add sample data
cd server && node seed-data.js

Deployment (VPS)

# Initial VPS setup
bash scripts/setup-vps.sh

# Deploy/Update application
bash deploy.sh

# Backup MongoDB
bash scripts/backup-mongodb.sh

# Restore MongoDB
bash scripts/restore-mongodb.sh backup_file.tar.gz

---

Production Deployment

Quick Deploy to VPS

1. Setup VPS (one time)

   bash scripts/setup-vps.sh

2. Configure environment

   # Backend
   cd server
   cp .env.example .env
   nano .env  # Edit with production values
   
   # Frontend
   nano src/environments/environment.prod.ts  # Edit apiUrl

3. Deploy

   bash deploy.sh

📖 See QUICKSTART-DEPLOY.md for detailed instructions.

---

Technologies

Frontend

• Angular 19 - Web framework
• TypeScript - Programming language
• RxJS - Reactive programming

Backend

• Node.js - Runtime environment
• Express - Web framework
• MongoDB - NoSQL database
• dotenv - Environment configuration

DevOps & Deployment

• PM2 - Process manager
• Nginx - Web server & reverse proxy
• Let's Encrypt - SSL/TLS certificates

---

Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add some AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open Pull Request

---

Troubleshooting

MongoDB Connection Error

# Check MongoDB status
sudo systemctl status mongod

# Test connection
cd server && node test-connection.js

Backend API Not Running

# Development
cd server && npm start

# Production
pm2 status
pm2 logs test-app-api

Frontend Not Loading

# Clear cache and rebuild
rm -rf node_modules .angular dist
npm install
npm start

CORS Issues

Make sure backend CORS is configured in server/server.js:

app.use(cors());

---

Support & Documentation

• 📖 Setup Guide - Development environment setup
• 📖 Deployment Guide - Production deployment
• 📖 Quick Deploy - Quick deployment steps

---

License

This project is open source and available under the MIT License.

---

Author

Marore Bestari Indonesia

---

Changelog

v1.0.0 (2025-01-21)

• Initial release
• Angular 19 frontend
• Node.js/Express backend
• MongoDB integration
• Environment configuration
• Production deployment ready