refactor: migrate frontend from npm dev server to nginx production#87
refactor: migrate frontend from npm dev server to nginx production#87NotYuSheng merged 14 commits intomainfrom
Conversation
- Add CSS shadow variables for light and dark modes - Apply shadows to header card, main cards, and buttons - Add subtle hover animations with lift effect on buttons - Style transcript entries with shadows and rounded corners - Enhance visual hierarchy and modern design aesthetics 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add subtle opacity reduction (50%) for disabled buttons - Include not-allowed cursor for better UX indication - Prevent hover animations on disabled state - Clean, minimal approach without color changes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Slow down particle movement speed from 6 to 2 for subtler motion - Add organizational color variety to particles using brand palette - Keep original white connecting lines with full opacity unchanged - Particles now use: #2998D5, #265289, #75797C, #bba88e, #c42030, #FFFFFF 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Fixed sun icon visibility in light mode (☀️) - Corrected CSS logic for checked/unchecked states - Light mode: sun icon on left with blue gradient - Dark mode: moon icon on right with gray gradient - Smooth transitions between states with proper icon positioning 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace flat colors with subtle linear gradients for visual depth - Add gradient backgrounds to app container, cards, and components - Enhance button styling with gradient backgrounds and hover effects - Improve transcript entries with gradient backgrounds - Maintain organizational color palette while adding modern visual appeal - Keep accessibility and contrast standards intact 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add professional styling to model selector dropdown - Implement proper focus and hover states with organizational colors - Use solid backgrounds for better cross-browser compatibility - Improve responsive layout with better spacing and alignment - Add consistent typography using Barlow font family - Support both light and dark theme modes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace plain #bba88e borders with subtle gradient border effects - Use CSS pseudo-elements for sophisticated gradient border technique - Fix rectangular shadow issue by moving shadows to pseudo-elements - Apply proper border-radius calculations for clean rounded corners - Add theme-aware gradient variations for light and dark modes - Improve visual depth and premium appearance of all cards 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove ugly red color (#c42030) from particle palette - Increase particle opacity from 1.0 to 0.9 for much sharper appearance - Make connecting lines more prominent (opacity 0.8, width 2.5px) - Use darker shade of #bba88e (#8a7c6b) for connecting lines - Reduce app background opacity to 50-60% so particles show through - Improve particle backgrounds with more contrasting gradients - Clean color palette: #2998D5, #265289, #75797C, #bba88e, #FFFFFF 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Convert recording, upload, and transcription buttons to discrete red design - Use #F4393B for discrete buttons with icon-only interface and tooltips - Implement prominent transcription button (#D32F2F) when file is uploaded - Add "Process Audio" text to transcription button for better UX clarity - Fix CSS specificity issues with \!important to override gradient backgrounds - Ensure consistent button sizing (2.5rem width) across all states - Support both light and dark mode themes with proper red color scheme 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace confusing MicOff icon with Square icon for stop recording - Fix recording timer vertical alignment with action buttons - Move recording indicator inside button group for better layout - Add smooth hover effects to transcript/summary tabs - Implement tab-like appearance with rounded top corners - Add subtle blue background and border hints on tab hover - Improve overall controls container alignment and spacing 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Implement pause/resume recording functionality with MediaRecorder API - Add professional HTML5 audio player with timeline scrubbing and volume control - Enable manual control over when to process recorded audio (no auto-processing) - Add discard recording option for better user control - Improve button state management for different recording phases: * Default: [Mic] [Upload] [Process Audio] * Recording: [Pause] [Stop] [Process Audio] * Preview: [Trash] [Upload] [Process Audio] + Audio Player - Add visual feedback for paused recording state (orange dot, timer shows "(Paused)") - Style audio player to match app theme with custom controls - Handle proper cleanup of audio URLs to prevent memory leaks 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Refactored Dockerfile to use multi-stage build with nginx - Added nginx.conf with production-ready configuration including gzip, security headers, and API proxying - Updated docker-compose.yml port mapping from 3000:3000 to 80:80 - Removed unnecessary volume mounts for frontend container - This addresses HTTPS requirements for getUserMedia API and improves production deployment 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove invalid 'must-revalidate' value from gzip_proxied directive - Change frontend port mapping from 80:80 to 3000:80 - Comment out GPU deployment configuration 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @NotYuSheng, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
I've implemented a significant refactor to migrate the frontend application from using an npm development server to a production-grade Nginx deployment. This change is crucial for enhancing the application's performance, security, and scalability. The update involves a complete overhaul of the frontend's Docker build process, the introduction of a dedicated Nginx configuration for serving static assets and proxying API requests, and a substantial visual refresh of the user interface. Additionally, I've added new features to the audio recording capabilities, providing users with more control and a better experience.
Highlights
- Frontend Deployment Migration to Nginx: I've completely overhauled the frontend deployment strategy, moving from a development-focused npm server to a robust, production-ready Nginx setup. This change significantly improves performance, security, and scalability for the frontend application.
- Optimized Docker Builds and Configuration: The Docker configuration for the frontend has been refactored to use a multi-stage build process. This new
Dockerfilenow efficiently builds the React application in one stage and then serves it using a lightweight Nginx image in another, resulting in smaller and more secure production containers. Thedocker-compose.ymlhas also been updated to reflect these changes, including port mapping adjustments and removal of development-specific volume mounts. - Comprehensive Nginx Configuration: A new
nginx.conffile has been introduced to configure Nginx. This configuration handles static file serving, API proxying to the backend, implements gzip compression for faster content delivery, sets up caching for static assets, and includes essential security headers and CORS handling. - Major UI/UX Visual Refresh: I've made extensive visual enhancements to the frontend, primarily through significant updates to the CSS. This includes transitioning to gradient backgrounds and buttons, introducing new 'discrete' button styles, adding subtle box shadows for depth, and refining border treatments to create a more modern and polished user interface.
- Improved Audio Recording and Playback Features: The audio recording functionality has been enhanced with new features. Users can now pause and resume recordings, discard recorded audio, and preview their recordings directly within the application before processing. The dark mode toggle has also received a visual upgrade to a more intuitive switch.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request is a significant improvement, moving the frontend to a production-ready nginx server. The use of a multi-stage Docker build is excellent. My review focuses on enhancing the security and robustness of the new nginx configuration and improving Docker practices. I've identified a few critical and high-severity security issues, such as a missing Content Security Policy and an overly permissive CORS configuration, that should be addressed before merging. I've also included some medium-severity suggestions for maintainability and correctness.
| server { | ||
| listen 80; | ||
| server_name _; |
There was a problem hiding this comment.
A Content Security Policy (CSP) header is missing. Adding a CSP is a critical security measure to prevent Cross-Site Scripting (XSS) and other injection attacks. You should add a Content-Security-Policy header with appropriate directives for your application.
Here is a basic example to get you started. You should tailor it to your specific needs:
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self';" always;There was a problem hiding this comment.
Will deal with this later
|
|
||
| # Handle preflight requests for CORS | ||
| if ($request_method = 'OPTIONS') { | ||
| add_header 'Access-Control-Allow-Origin' '*'; |
There was a problem hiding this comment.
Using a wildcard (*) for Access-Control-Allow-Origin is overly permissive and poses a security risk in a production environment. It allows any website to make requests to your API, which could be exploited.
You should restrict this to the specific domain of your frontend application.
add_header 'Access-Control-Allow-Origin' 'https://your-frontend-domain.com';
There was a problem hiding this comment.
Will deal with this later
| # Security headers | ||
| add_header X-Frame-Options "SAMEORIGIN" always; | ||
| add_header X-Content-Type-Options "nosniff" always; | ||
| add_header X-XSS-Protection "1; mode=block" always; |
There was a problem hiding this comment.
The X-XSS-Protection header is deprecated and modern browsers no longer support it. It can even introduce security vulnerabilities in older browsers. It's recommended to rely on a strong Content-Security-Policy (CSP) instead.
Please remove this line.
| } | ||
|
|
||
| .btn.btn-discrete { | ||
| background: var(--btn-discrete) !important; |
There was a problem hiding this comment.
Using !important can lead to CSS that is difficult to maintain and debug, as it breaks the natural cascading of styles. It's best to avoid it whenever possible.
Consider increasing the specificity of your selectors or refactoring the CSS structure to achieve the desired styling without !important. This issue is repeated for other discrete button styles.
| background: var(--btn-discrete) !important; | |
| background: var(--btn-discrete); |
- Add comprehensive .dockerignore to prevent copying node_modules, .git, and other dev files - Reduces Docker image size by excluding build artifacts, logs, and cache directories - Prevents host node_modules from overwriting container dependencies - Improves build performance by reducing context size - Excludes environment files and IDE configurations for security 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 participant
Summary
This PR migrates the frontend from npm development server to a production-ready nginx deployment, significantly improving performance, security, and scalability of the application.
Changes Made
Context / Rationale
The npm development server was not suitable for production deployment due to:
This migration to nginx provides:
Related Docs or References
General Checklist