This commit is contained in:
Gal Podlipnik 2025-07-14 22:20:46 +02:00
parent 8bbe2b4167
commit 4526870b2a
3 changed files with 544 additions and 54 deletions

251
README.md Normal file
View File

@ -0,0 +1,251 @@
# 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)

View File

@ -1,82 +1,238 @@
# Org # Client Application (Angular + Nx)
<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a> This is an Angular application built with Nx workspace, featuring multiple libraries and a modern development setup.
✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨. ## Prerequisites
[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed! - Node.js (version 18 or higher)
- npm package manager
- Angular CLI (optional, Nx provides similar functionality)
## Finish your remote caching setup ## Quick Start
[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/mI3T4Te8D0) ```bash
# Install dependencies
npm install
# Start development server
## Run tasks npm start
To run the dev server for your app, use:
```sh
npx nx serve org
``` ```
To create a production bundle: The application will be available at `http://localhost:4200`
```sh ## Available Scripts
npx nx build org
- `npm start` - Start development server
- `npm run build` - Build for production
- `npm test` - Run tests
## Nx Commands
```bash
# Serve the application
nx serve org
# Build the application
nx build org
# Run tests
nx test org
# Lint the code
nx lint org
# Show project dependencies
nx graph
``` ```
To see all available targets to run for a project, run: ## Project Structure
```sh ```
npx nx show project org src/
├── app/ # Main application
├── index.html # HTML template
├── main.ts # Application bootstrap
└── styles.scss # Global styles
libs/
├── shared/
│ ├── api/ # API services
│ ├── stores/ # State management
│ ├── i18n/ # Internationalization
│ └── toast/ # Toast notifications
└── web/
├── users/ # User management
└── tasks/ # Task management
``` ```
These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files. ## Libraries Overview
[More about running tasks in the docs &raquo;](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) ### Shared Libraries
## Add new projects - **api**: HTTP services for backend communication
- **stores**: State management utilities
- **i18n**: Internationalization support
- **toast**: Toast notification service
While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature. ### Web Libraries
Use the plugin's generator to create new projects. - **users**: User management components and services
- **tasks**: Task management functionality
To generate a new application, use: ## Development Features
```sh - **Angular 20**: Latest Angular features with signals
npx nx g @nx/angular:app demo - **Angular Material**: UI component library with Azure Blue theme
- **Standalone Components**: Modern Angular architecture
- **TypeScript**: Strict type checking enabled
- **SCSS**: Styling with Sass preprocessing
- **Jest**: Testing framework
- **ESLint**: Code linting with Angular-specific rules
## Building and Deployment
### Development Build
```bash
nx build org --configuration=development
``` ```
To generate a new library, use: ### Production Build
```sh ```bash
npx nx g @nx/angular:lib mylib nx build org --configuration=production
``` ```
You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list <plugin-name>` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE. Built files will be in `dist/org/`
[Learn more about Nx plugins &raquo;](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry &raquo;](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) ## Testing
### Run All Tests
[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) ```bash
nx test
```
## Install Nx Console ### Run Specific Library Tests
Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ. ```bash
nx test api
nx test users
nx test tasks
```
[Install Nx Console &raquo;](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) ### Test Configuration
## Useful links - **Framework**: Jest with Angular preset
- **Setup**: `jest-preset-angular`
- **Coverage**: Available with `--coverage` flag
Learn more: ## Linting
- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects) ```bash
- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) # Lint all projects
- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) nx lint
- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
And join the Nx community: # Lint specific project
- [Discord](https://go.nx.dev/community) nx lint org
- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl) nx lint api
- [Our Youtube channel](https://www.youtube.com/@nxdevtools) ```
- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
## Code Generation
### Generate Component
```bash
nx generate @nx/angular:component my-component --project=org
```
### Generate Service
```bash
nx generate @nx/angular:service my-service --project=org
```
### Generate Library
```bash
nx generate @nx/angular:library my-lib
```
## Environment Configuration
Development and production environments are configured in:
- `src/environments/environment.ts` (development)
- `src/environments/environment.prod.ts` (production)
## Styling
- **Theme**: Angular Material Azure Blue
- **Global Styles**: `src/styles.scss`
- **Component Styles**: Co-located with components
- **Fonts**: Roboto (Google Fonts)
- **Icons**: Material Icons
## State Management
The application uses Angular signals for state management:
- **Local State**: Component signals
- **Shared State**: Injectable services with signals
- **Derived State**: Computed signals
## API Integration
API services are located in `libs/shared/api/`:
- **Users Service**: User CRUD operations
- **Tasks Service**: Task management
- **Comments Service**: Comment functionality
Base API URL is configured to `http://localhost:3000`
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## Performance
- **Bundle Analysis**: Use `nx build org --analyze`
- **Lazy Loading**: Feature modules are lazy loaded
- **OnPush**: Change detection strategy optimized
- **Tree Shaking**: Unused code eliminated in production
## Troubleshooting
### Clear Nx Cache
```bash
nx reset
```
### Reinstall Dependencies
```bash
rm -rf node_modules package-lock.json
npm install
```
### Port Already in Use
Change the port in `project.json` serve configuration or use:
```bash
nx serve org --port=4201
```
### Build Errors
Check TypeScript configuration and ensure all dependencies are installed:
```bash
npm install
nx build org
```

View File

@ -1,11 +1,94 @@
To install dependencies: # Server Setup and Run Instructions
```sh
bun install This is a Node.js server built with Hono framework, using SQLite database with Drizzle ORM.
## Prerequisites
- Node.js (version 18 or higher)
- npm or yarn package manager
## Initial Setup
### 1. Install Dependencies
```bash
cd server
npm install
``` ```
To run: ### 2. Environment Configuration
```sh
bun run dev The server uses a `.env` file for configuration. The current setup uses:
```bash
DB_FILE_NAME=file:./src/db/local.db
``` ```
open http://localhost:3000 This is already configured and will create a local SQLite database file.
### 3. Database Setup
#### Generate Database Schema
```bash
npm run db:generate
```
#### Push Schema to Database
```bash
npm run db:push
```
#### Seed Database with Sample Data
```bash
npm run db:seed
```
This will create sample users, tasks, and comments using faker.js.
## Available Scripts
- `npm run dev` - Start development server with hot reload
- `npm run db:push` - Push schema changes to database
- `npm run db:generate` - Generate database migrations
- `npm run db:migrate` - Run database migrations
- `npm run db:reset` - Reset database (careful - this will delete all data)
- `npm run db:seed` - Seed database with sample data
## Running the Server
### Development Mode
```bash
npm run dev
```
The server will start on `http://localhost:3000`
## API Endpoints
The server provides the following API routes:
- `/users` - User management endpoints
- `/tasks` - Task management endpoints
- `/comments` - Comment management endpoints
## Database
The server uses SQLite with Drizzle ORM. The database file is stored at `./src/db/local.db` and will be created automatically when you run the setup commands.
## Technology Stack
- **Framework**: Hono.js
- **Database**: SQLite
- **ORM**: Drizzle ORM
- **Runtime**: Node.js
- **Development**: tsx for TypeScript execution
## Troubleshooting
1. **Database issues**: Run `npm run db:reset` and then `npm run db:push` followed by `npm run db:seed`
2. **Port conflicts**: The server runs on port 3000 by default
3. **Dependencies**: Make sure all dependencies are installed with `npm install`