Full-Stack Web Development

Bash
# Project setup
mkdir my-app && cd my-app
npm init -y
npm install express mysql2 vue@next
mkdir client server
echo "console.log('Server running on port 3000')" > server/index.js

Progress:

• Plan database schema and API endpoints
• Set up project structure (client/server separation)
• Build backend API with Express and database
• Create Vue.js frontend components
• Implement client-server communication
• Test and deploy

1. Project Structure

project/
├── client/          # Vue.js frontend
├── server/          # Node.js backend
├── shared/          # Common types/utilities
└── package.json     # Root dependencies

2. Database Setup

Choose based on requirements:

• PostgreSQL: Complex queries, relationships, production
• MySQL: General purpose, good performance
• SQLite: Development, simple applications

3. Backend (Express + SQL)

JavaScript
// server/index.js
const express = require('express');
const mysql = require('mysql2/promise');

const app = express();
app.use(express.json());

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  database: 'myapp'
});

app.get('/api/users', async (req, res) => {
  const [rows] = await db.execute('SELECT * FROM users');
  res.json(rows);
});

app.listen(3000);

4. Frontend (Vue.js)

VUE
<!-- client/App.vue -->
<template>
  <div>
    <UserList :users="users" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const users = ref([])
    
    const fetchUsers = async () => {
      const response = await fetch('/api/users')
      users.value = await response.json()
    }
    
    onMounted(fetchUsers)
    return { users }
  }
}
</script>

Example 1: User CRUD API Input: Need user management system Output:

JavaScript
// Routes
app.get('/api/users', getAllUsers);
app.post('/api/users', createUser);
app.put('/api/users/:id', updateUser);
app.delete('/api/users/:id', deleteUser);

// Database queries
const getAllUsers = async (req, res) => {
  const [rows] = await db.execute(
    'SELECT id, name, email FROM users ORDER BY created_at DESC'
  );
  res.json(rows);
};

Example 2: Database Connection Pool Input: Handle multiple concurrent requests Output:

JavaScript
const mysql = require('mysql2/promise');

const pool = mysql.createPool({
  host: 'localhost',
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: 'myapp',
  waitForConnections: true,
  connectionLimit: 10
});

• Environment Variables: Use .env for database credentials
• SQL Injection Prevention: Always use parameterized queries
• Error Handling: Wrap async routes in try-catch
• CORS: Configure for frontend-backend communication
• Database Migrations: Version control schema changes
• Component Organization: Keep Vue components focused and reusable
• API Design: RESTful endpoints with consistent naming

• Don't put database credentials in source code
• Don't use string concatenation for SQL queries
• Don't forget to handle database connection errors
• Don't mix business logic in Vue components
• Don't skip input validation on both frontend and backend
• Don't forget to close database connections in long-running processes
• Don't use synchronous database calls in production