RingID Frontend

Legacy RingID web frontend modernized with Vite build system, pnpm workspaces, and comprehensive tooling.

Table of Contents

• Project Structure
• Quick Start
• Development
• Build & Deployment
• Testing
• Code Quality
• Documentation
• Migration Status

Project Structure

This is a monorepo using pnpm workspaces:

dump-data/
├── apps/                    # Applications
│   └── main-app/          # Main RingID app (AngularJS 1.8.3)
│       ├── app/            # Core application code
│       ├── newsportal/     # News portal sub-app
│       ├── webapp/        # Web app variant
│       └── pages/         # HTML pages
├── packages/               # Shared packages
│   ├── scripts/          # Shared JS utilities
│   └── templates/       # Shared HTML templates
├── tests/                 # Test files (Karma + Jasmine)
├── dist/                  # Build output (generated)
└── node_modules/          # Dependencies (managed by pnpm)

Quick Start

Prerequisites

• Node.js ≥18 (use nvm install 18 if needed)
• pnpm ≥10 (npm install -g pnpm)

Installation

# Clone the repository
git clone https://github.com/threatcode/dump-data.git
cd dump-data

# Install dependencies (pnpm only!)
pnpm install

Development

Start Dev Server

pnpm start

Opens Vite dev server at http://localhost:8080 with:

• HMR (Hot Module Replacement)
• Proxy to backend at http://localhost:3000
• Source maps for debugging

Environment Modes

The project supports multiple environments:

File	Purpose
.env.development	Local development
.env.staging	Staging environment
.env.production	Production environment

# Build for specific environment
pnpm build --mode staging

Build & Deployment

Build for Production

pnpm build

Output in dist/ directory with:

• Hashed filenames for cache busting
• Minified JavaScript/CSS
• Optimized assets

Preview Production Build

pnpm preview

Docker Deployment

# Build Docker image
docker build -t ringid-frontend .

# Run container
docker run -p 8080:80 ringid-frontend

# Or use docker-compose
docker-compose up -d

Testing

Unit Tests (Karma + Jasmine)

# Run tests once
pnpm test

# Run tests in watch mode
cd tests && karma start karma.conf.cjs

Coverage reports generated in coverage/ directory.

E2E Tests (Playwright)

# Run E2E tests
pnpm test:e2e

# Run with UI
pnpm test:e2e:ui

Code Quality

Linting

# Lint all JavaScript files
pnpm lint

Uses ESLint with:

• eslint-plugin-angular for AngularJS best practices
• Modern ES2020+ syntax support

Formatting

# Format code with Prettier
pnpm format

Pre-commit Hooks

Husky + lint-staged automatically:

• Lints staged JavaScript files
• Formats code with Prettier
• Runs before each commit

Security Audit

pnpm audit

Documentation

File	Description
README.md	This file
ARCHITECTURE.md	System architecture and module structure
CONTRIBUTING.md	Development guidelines and conventions
MIGRATION.md	Migration guides and notes
MIGRATION-PLAN.md	Detailed migration strategy to React
CHANGELOG.md	Version history
TODO.md	Gap analysis and action items

Migration Status

Completed ✅

• Migrate Bower → pnpm
• Migrate Grunt → Vite
• Upgrade AngularJS 1.3.15 → 1.8.3 (security fix)
• Upgrade Bootstrap 3.3.5 → 5.3.8
• Set up CI/CD (GitHub Actions)
• Add ESLint + Prettier
• Add pre-commit hooks (Husky)
• Consolidate templates to packages/templates/
• Remove jQuery dependencies (partial)
• Create Docker configuration

In Progress 🚧

• Refactor feed controllers (consolidate 15+ controllers)
• Remove remaining jQuery (image_slider.js, utils_script.js)
• Add CSS preprocessing (Sass/PostCSS)
• Optimize images (imagemin)

Planned 📋

• Migrate to modern framework (React recommended)
• Implement state management
• Add bundle size monitoring
• Set up micro-frontends

See MIGRATION-PLAN.md for the detailed migration strategy.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Note: This is a legacy AngularJS application (1.8.3). The team is planning a migration to a modern framework (React recommended). See MIGRATION-PLAN.md for details.