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

git clone <repository-url>
cd tehnicni

2. Server Setup

# 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

# 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

   cd server
   npm install
   

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

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

3. Database Setup

   # Generate and push database schema
   npm run db:push
   
   # Seed with sample data (users, tasks, comments)
   npm run db:seed
   

4. Run Development Server

   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

   cd client
   npm install
   

2. Development Server

   npm start
   # or
   nx serve org
   

3. Build for Production

   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):

cd server
npm run dev

Terminal 2 (Client):

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

# 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

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

Nx Cache Issues

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
• Angular Documentation
• Hono Documentation
• Drizzle ORM Documentation