# Full Stack Application Setup Guide

This project consists of a client-server architecture with an Angular frontend and Hono.js backend.

## Project Structure

```
tehnicni/
├── client/          # Angular application (Nx workspace)
├── server/          # Hono.js API server
└── README.md        # This file
```

## Prerequisites

- Node.js (version 18 or higher)
- npm package manager
- Git

## Quick Start

### 1. Clone and Setup

```bash
git clone <repository-url>
cd tehnicni
```

### 2. Server Setup

```bash
# Navigate to server directory
cd server

# Install dependencies
npm install

# Setup database
npm run db:push
npm run db:seed

# Start development server
npm run dev
```

The server will be running at `http://localhost:3000`

### 3. Client Setup

```bash
# Navigate to client directory (from project root)
cd client

# Install dependencies
npm install

# Start development server
npm start
```

The client will be running at `http://localhost:4200`

## Detailed Setup Instructions

### Server Setup (Backend)

#### Technologies Used

- **Framework**: Hono.js
- **Database**: SQLite with Drizzle ORM
- **Runtime**: Node.js with TypeScript

#### Setup Steps

1. **Install Dependencies**

   ```bash
   cd server
   npm install
   ```

2. **Environment Configuration**
   The `.env` file is already configured:

   ```
   DB_FILE_NAME=file:./src/db/local.db
   ```

3. **Database Setup**

   ```bash
   # Generate and push database schema
   npm run db:push

   # Seed with sample data (users, tasks, comments)
   npm run db:seed
   ```

4. **Run Development Server**
   ```bash
   npm run dev
   ```

#### Server Scripts

- `npm run dev` - Development server with hot reload
- `npm run db:push` - Push schema to database
- `npm run db:generate` - Generate migrations
- `npm run db:migrate` - Run migrations
- `npm run db:reset` - Reset database
- `npm run db:seed` - Seed sample data

#### API Endpoints

- `GET/POST /users` - User management
- `GET/POST /tasks` - Task management
- `GET/POST /comments` - Comment management

### Client Setup (Frontend)

#### Technologies Used

- **Framework**: Angular 20
- **Build System**: Nx workspace
- **UI Library**: Angular Material
- **Styling**: SCSS

#### Setup Steps

1. **Install Dependencies**

   ```bash
   cd client
   npm install
   ```

2. **Development Server**

   ```bash
   npm start
   # or
   nx serve org
   ```

3. **Build for Production**
   ```bash
   npm run build
   # or
   nx build org
   ```

#### Client Scripts

- `npm start` - Start development server
- `npm run build` - Build for production
- `npm test` - Run tests
- `nx serve org` - Serve with Nx
- `nx build org` - Build with Nx
- `nx test org` - Test with Nx

#### Libraries and Features

- **Shared Libraries**: API services, stores, i18n, toast notifications
- **Web Libraries**: Users, tasks management
- **Styling**: Angular Material with Azure Blue theme

## Development Workflow

### 1. Start Both Servers

**Terminal 1 (Server):**

```bash
cd server
npm run dev
```

**Terminal 2 (Client):**

```bash
cd client
npm start
```

### 2. Access Applications

- **Frontend**: http://localhost:4200
- **Backend API**: http://localhost:3000
- **Nx Console**: Available in VS Code with Nx extension

### 3. Development Tools

- **Nx Console**: VS Code extension for Nx workspace management
- **Angular DevTools**: Browser extension for Angular debugging
- **Database**: SQLite file at `server/src/db/local.db`

## Common Issues and Solutions

### Database Issues

```bash
# Reset and recreate database
cd server
npm run db:reset
npm run db:push
npm run db:seed
```

### Port Conflicts

- Server runs on port 3000
- Client runs on port 4200
- Change ports in respective configuration files if needed

### Dependencies

```bash
# Clean install for both projects
cd server && rm -rf node_modules && npm install
cd ../client && rm -rf node_modules && npm install
```

### Nx Cache Issues

```bash
cd client
nx reset
```

## Project Architecture

### Backend (Server)

- **API Routes**: RESTful endpoints for users, tasks, comments
- **Database**: SQLite with Drizzle ORM
- **Middleware**: CORS, logging
- **Seeding**: Faker.js for sample data

### Frontend (Client)

- **Nx Workspace**: Monorepo structure with multiple libraries
- **Angular**: Standalone components with signals
- **Shared Libraries**: Reusable services and utilities
- **Feature Libraries**: Domain-specific functionality

## Additional Resources

- [Nx Documentation](https://nx.dev)
- [Angular Documentation](https://angular.io)
- [Hono Documentation](https://hono.dev)
- [Drizzle ORM Documentation](https://orm.drizzle.team)