Skip to content

Latest commit

 

History

History
253 lines (184 loc) · 6.72 KB

README.md

File metadata and controls

253 lines (184 loc) · 6.72 KB

🌐 PastePoint Client (Angular Frontend)

The PastePoint client is a modern Angular application with Server-Side Rendering (SSR) support, providing an intuitive interface for file sharing and communication on local networks. Features WebRTC file transfer capabilities, real-time chat, and comprehensive user experience enhancements.

Angular Tailwind Flowbite

🛠️ Tech Stack

Development Tools

  • Build Tool: Angular CLI with custom webpack configuration
  • Testing: Jasmine and Karma for unit tests
  • Linting: ESLint with Angular-specific rules
  • Formatting: Prettier with custom configuration
  • Styling: stylelint for CSS/SCSS validation
  • WebRTC: Native WebRTC API for peer-to-peer file transfers
  • Notifications: Hot-toast for real-time user feedback

📁 Project Structure

client/
├── 📁 src/
│   ├── 📁 app/
│   │   ├── 📁 core/
│   │   │   ├── 📁 i18n/           # Internationalization
│   │   │   ├── 📁 services/       # Core services
│   │   │   │   ├── 📁 communication/    # WebRTC, WebSocket, Chat
│   │   │   │   ├── 📁 file-management/  # File transfer services
│   │   │   │   ├── 📁 ui/              # Theme, Language services
│   │   │   │   ├── 📁 user-management/ # User services
│   │   │   │   └── 📁 migration/       # App migration
│   │   │   └── 📁 interfaces/     # TypeScript interfaces
│   │   ├── 📁 features/           # Features such as chat, file sharing, etc.
│   │   ├── 📁 utils/              # Utility functions
│   │   ├── 📁 testing/            # Test utilities
│   │   ├── app.component.*        # Root component
│   │   ├── app.routes.ts          # Application routes
│   │   └── app.config.*           # App configuration
│   ├── 📁 environments/           # Environment configs
│   ├── index.html                 # Main HTML file
│   ├── main.ts                    # Application entry point
│   ├── server.ts                  # SSR server
│   └── styles.css                 # Global styles
├── 📁 public/                     # Static assets
│   ├── 📁 assets/                 # Assets
│   │   ├── favicon.*              # Favicon files
│   │   ├── pastepoint-*.svg       # Logo files
│   │   └── *.png                  # App icons
│   ├── 📁 fonts/                  # Custom fonts
│   ├── 📁 icons/                  # SVG icons
│   └── site.webmanifest           # Web app manifest
├── 📁 dist/                       # Build output
├── 📁 node_modules/               # Dependencies
├── package.json                   # Project dependencies
├── angular.json                   # Angular CLI config
├── tailwind.config.js             # Tailwind CSS config
├── tsconfig.json                  # TypeScript config
├── Dockerfile                     # Docker configuration
└── README.md                      # Project documentation

🚀 Quick Start

Prerequisites

  • Node.js: v22.14.0 (specified in ../.nvmrc)
  • npm: Latest version
  • Angular CLI: npm install -g @angular/cli

Development Setup

  1. Navigate to client directory:

    cd client

  2. Install dependencies:

    npm install

  3. Start development server:

    ng serve

  4. Open browser: Navigate to http://localhost:4200

⚙️ Configuration

Environment Files

  • src/environments/environment.ts: Development configuration
  • src/environments/environment.prod.ts: Production configuration

Example environment configuration:

export const environment = {
  production: false,
  apiUrl: 'https://localhost:9000',
  logLevel: NgxLoggerLevel.DEBUG,
  enableSourceMaps: true,
  disableFileDetails: false,
  disableConsoleLogging: false,
};

Angular Configuration

Key configurations in angular.json:

  • Build optimization: Bundle optimization and tree shaking
  • SSR configuration: Server-side rendering setup
  • Asset optimization: Image and font optimization
  • Service worker: PWA configuration

🧪 Testing

Unit Tests

# Run all tests
npm run test

# Run tests with coverage
npm run test:coverage

# Run tests in CI mode
npm run test:ci

Linting and Formatting

# Run ESLint
npm run lint

# Fix ESLint issues
npm run lint:fix

# Run Prettier
npm run format

🎨 Styling and Theming

Tailwind CSS Configuration

The project uses a custom Tailwind configuration with:

  • Custom color palette: Brand-specific colors
  • Dark mode: Class-based dark mode switching
  • Custom components: Reusable component classes
  • Responsive breakpoints: Mobile-first design

Flowbite Integration

Flowbite components are integrated for:

  • Navigation components
  • Form elements
  • Modal dialogs
  • Toast notifications
  • Loading indicators

🌐 Internationalization (i18n)

Supported Languages

  • English (default)
  • Arabic
  • ... (Add more as needed)

Translation Files

src/app/core/i18n/localizations/
├── en.json
└── ar.json

Usage

// In components
constructor(private translate: TranslateService) {}

// Get translation
this.translate.instant('WELCOME');

🔧 Development Guide

Adding New Features

  1. Generate component:

    ng generate component features/feature-name

  2. Generate service:

    ng generate service core/services/service-name

Code Standards

  • TypeScript: Strict mode enabled
  • ESLint: Angular-specific rules
  • Prettier: Consistent code formatting
  • Conventional Commits: Standardized commit messages

🐛 Troubleshooting

Common Issues

  1. Node Version Mismatch:

    # Use correct Node version
nvm use
# Or install the specified version
nvm install 22.14.0

  2. WebSocket Connection Issues:

    • Check backend server is running
    • Verify SSL certificates are valid
    • Check CORS configuration

🤝 Contributing

📜 License

This project is licensed under the GPL-3.0 License. See the LICENSE file for details.

🔗 Related Documentation