sushantjadhav/frontend repository overview

⁠Frontend Service - API Testing Dashboard

A modern, responsive frontend application built with TypeScript and Express.js for testing backend API endpoints. This service provides an intuitive web interface to interact with backend services and monitor their health status.

⁠🚀 Features

• Modern UI Design: Clean, responsive interface with professional blue color scheme
• API Testing Dashboard: Test multiple backend endpoints with dedicated buttons
• Real-time Health Monitoring: Monitor backend service health and status
• Comprehensive Debug Logging: Detailed console logging for troubleshooting
• TypeScript: Type-safe development with modern JavaScript features
• Docker Optimized: Multi-stage build for minimal container size

⁠🎯 What This Service Does

This frontend service serves as a centralized API testing dashboard that allows you to:

1. Test Backend APIs: Interact with backend services through a web interface
2. Monitor Service Health: Check health and status of backend services
3. Debug API Calls: View detailed request/response information in console logs
4. Visual Feedback: Get immediate visual feedback on API call success/failure

⁠Available API Tests:

• 📡 Backend API Endpoint: Tests the main backend service (/)
• 🏥 Backend Health Check: Monitors backend health status (/api/healthcheck)
• 📊 Backend Status Check: Checks backend running status (/api/status)

⁠🛠️ Technology Stack

• Runtime: Node.js 18
• Framework: Express.js
• Language: TypeScript
• Styling: CSS3 with modern gradients and animations
• Package Manager: npm
• Containerization: Docker

⁠🚀 Quick Start

⁠Using Docker (Recommended)

1. Build the image:

   docker build -t frontend-service .
   

   Copy

2. Run the container:

   docker run -p 80:80 -e BACKEND_URL=http://backend-service:8080 frontend-service
   

   Copy

3. Access the application:

   • Open http://localhost:80⁠ in your browser

⁠Development Mode

1. Install dependencies:

   npm install
   

   Copy

2. Start development server:

   npm run dev
   

   Copy

3. Build for production:

   npm run build
   npm start
   

   Copy

⁠📁 Project Structure

frontend/
├── src/
│   └── app.ts              # Main TypeScript application
├── dist/                   # Compiled JavaScript (generated)
├── package.json            # Dependencies and scripts
├── tsconfig.json          # TypeScript configuration
├── Dockerfile             # Container definition
└── README.md              # This file

⁠🔧 Configuration

⁠Environment Variables

• BACKEND_URL: Backend service URL (default: http://localhost:8080)
• NODE_ENV: Node.js environment (default: production)
• PORT: Server port (default: 80)

⁠Available Scripts

• npm run dev: Start development server with hot reload
• npm run build: Compile TypeScript to JavaScript
• npm start: Start production server
• npm run watch: Watch mode for TypeScript compilation

⁠🎨 UI Features

• Responsive Design: Works on desktop and mobile devices
• Loading States: Visual feedback during API calls with disabled buttons
• Error Handling: Clear error messages and status indicators
• Modern Styling: Professional blue color scheme with gradients
• Compact Layout: Optimized for efficient space usage
• Status Indicators: Visual dots showing service status

⁠🔍 API Endpoints

⁠Frontend Endpoints

• GET / - Main dashboard interface
• GET /call-backend - Proxy to backend API
• GET /call-backend-healthcheck - Proxy to backend health check
• GET /call-backend-status - Proxy to backend status check
• GET /healthcheck - Frontend health check

⁠🐳 Docker Details

⁠Image Specifications

• Base Image: Node.js 18 Alpine (lightweight)
• Port: 80 (configurable)
• Size: Optimized with multi-stage build
• Dependencies: Production-only packages

⁠Build Process

1. Build Stage: Install all dependencies and compile TypeScript
2. Production Stage: Copy only compiled code and production dependencies
3. Result: Minimal production image with only necessary files

⁠🔍 Debugging

The application provides comprehensive logging:

• Request Logging: All incoming requests with timestamps
• API Call Details: Detailed backend API call information
• Error Tracking: Complete error information for troubleshooting
• Response Monitoring: Full response data and status codes

⁠Console Logs Include:

• Request timestamps and headers
• Backend URL configuration
• Response status and data
• Detailed error information
• Network connectivity issues

⁠🚀 Deployment

⁠Production Deployment

1. Build the Docker image
2. Configure environment variables
3. Deploy using container orchestration
4. Set up reverse proxy if needed

⁠Scaling

• Can be scaled horizontally
• Stateless design allows multiple instances
• Load balancer can distribute traffic

⁠📊 Performance

• Fast Startup: Optimized Docker image for quick container startup
• Low Memory: Minimal memory footprint
• Efficient Builds: Multi-stage Docker build reduces image size
• TypeScript: Compile-time error checking for reliability

⁠🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

⁠📝 License

This project is open source and available under the MIT License⁠.

⁠🆘 Support

For issues and questions:

1. Check the console logs for detailed error information
2. Verify the backend service is running and accessible
3. Check environment variable configuration
4. Review network connectivity between services

Built with ❤️ using TypeScript, Express.js, and Docker