Skip to content

Commit ecf8507

Browse files
KohulanKohulan
authored
Merge pull request #740 from Steinbeck-Lab/development
Complete migration to Vite, React 19, TypeScript 5, and Tailwind v4
2 parents 44b6093 + 02f832d commit ecf8507

275 files changed

Lines changed: 44300 additions & 24031 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/dev-build.yml‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,5 @@ jobs:
6666
file: ./frontend/Dockerfile
6767
push: true
6868
build-args: |
69-
REACT_APP_API_URL=https://dev.api.naturalproducts.net/latest
70-
# REACT_APP_API_URL will use the default from frontend/Dockerfile (https://dev.api.naturalproducts.net/latest)
71-
# If a specific one is needed for this dev build, add build-args here.
72-
# build-args: |
73-
# REACT_APP_API_URL=your-dev-frontend-api-url
69+
VITE_API_URL=https://dev.api.naturalproducts.net/latest
7470
tags: ${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:app-dev

‎.github/workflows/frontend-test.yml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
name: frontend-test
2+
3+
on:
4+
pull_request:
5+
branches: [main, development]
6+
paths:
7+
- 'frontend/**'
8+
push:
9+
branches: [main, development]
10+
paths:
11+
- 'frontend/**'
12+
13+
jobs:
14+
test:
15+
runs-on: ubuntu-latest
16+
defaults:
17+
run:
18+
working-directory: frontend
19+
steps:
20+
- uses: actions/checkout@v4
21+
- uses: actions/setup-node@v4
22+
with:
23+
node-version: '24'
24+
cache: 'npm'
25+
cache-dependency-path: frontend/package-lock.json
26+
- run: npm ci
27+
- name: ESLint
28+
run: npm run lint
29+
- name: Prettier
30+
run: npm run format:check
31+
- name: Tests
32+
run: npm run test
33+
- name: Security audit
34+
run: npm audit --audit-level=low
35+
- name: Production build
36+
run: npm run build

‎.github/workflows/prod-build.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ jobs:
8888
file: ./frontend/Dockerfile
8989
push: true
9090
build-args: |
91-
REACT_APP_API_URL=https://api.naturalproducts.net/latest
91+
VITE_API_URL=https://api.naturalproducts.net/latest
9292
tags: |
9393
${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:app-${{ github.event.release.tag_name }}
9494
${{ env.REPOSITORY_NAMESPACE }}/${{ env.REPOSITORY_NAME }}:app

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,3 +141,6 @@ docs/_build/
141141

142142
#grafana
143143
grafana_data/
144+
145+
#gsd
146+
.planning/

‎.husky/pre-commit‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
cd frontend && npx lint-staged

‎.planning/PROJECT.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Cheminformatics Microservice — Frontend Overhaul
2+
3+
## What This Is
4+
5+
A comprehensive frontend modernization of the Cheminformatics Microservice UI. The existing React + Tailwind frontend serves as a web interface for cheminformatics services (structure analysis, format conversion, 2D/3D depiction, descriptor generation, OCSR). This project upgrades the entire frontend stack, resolves all security vulnerabilities, and polishes the UI/UX while preserving current functionality.
6+
7+
## Core Value
8+
9+
The frontend must feel noticeably modern, fast, and polished — while never breaking existing functionality. Zero security alerts, production-grade quality.
10+
11+
## Requirements
12+
13+
### Validated
14+
15+
- ✓ React SPA with client-side routing — existing
16+
- ✓ Pages: Home, Chem, Convert, Depict, OCSR, Tools, About, Privacy, Terms — existing
17+
- ✓ Component architecture per feature domain (chem, convert, depict, ocsr, tools, common) — existing
18+
- ✓ API service layer communicating with FastAPI backend — existing
19+
- ✓ Tailwind CSS styling — existing
20+
- ✓ Framer Motion animations — existing
21+
- ✓ File upload (react-dropzone) — existing
22+
- ✓ Axios HTTP client — existing
23+
- ✓ Prettier formatting — existing
24+
25+
### Active
26+
27+
- [ ] Migrate from Create React App (react-scripts) to Vite
28+
- [ ] Upgrade React 18 → React 19
29+
- [ ] Upgrade Tailwind CSS v3 → v4
30+
- [ ] Integrate shadcn/ui component library
31+
- [ ] Add dark mode with user toggle (light/dark)
32+
- [ ] Fix all dependabot security vulnerabilities
33+
- [ ] Update all dependencies to latest stable versions
34+
- [ ] Modernize layout and visual design (evolve current look, don't reinvent)
35+
- [ ] Smooth animations and micro-interactions throughout
36+
- [ ] Improve navigation and UX workflows
37+
- [ ] Responsive design improvements
38+
- [ ] Faster load and interaction times (code splitting, lazy loading)
39+
- [ ] Production-grade build optimization
40+
41+
### Out of Scope
42+
43+
- Backend API changes — this is frontend-only
44+
- Adding new API endpoints or features
45+
- Changing the backend Python code
46+
- Mobile native app
47+
- Complete visual rebrand — evolving the current design, not replacing it
48+
49+
## Context
50+
51+
- **Current stack:** React 18.2, react-scripts 5.0.1 (CRA, deprecated), Tailwind 3.3.5, TypeScript 4.9.5, framer-motion 12.6.2
52+
- **Current structure:** 9 pages, 6 component directories (chem, common, convert, depict, ocsr, tools), service layer for API calls
53+
- **CRA is deprecated:** react-scripts is no longer maintained, Vite is the recommended replacement
54+
- **Existing overrides in package.json:** nth-check, postcss, svgo, underscore, serialize-javascript — these are security patches that should be resolved by proper upgrades
55+
- **Backend is stable:** FastAPI backend with RDKit/CDK/OpenBabel — not being touched
56+
- **The frontend communicates via `REACT_APP_API_URL` env var** — will need to change to `VITE_API_URL` after Vite migration
57+
- **Docker builds exist** for frontend — Dockerfile.frontend will need updating for Vite
58+
59+
## Constraints
60+
61+
- **No breaking changes:** All existing pages and functionality must continue working after each phase
62+
- **Backend untouched:** Only frontend code changes
63+
- **Env var migration:** CRA's `REACT_APP_*` prefix must migrate to Vite's `VITE_*` prefix
64+
- **Docker compatibility:** Frontend Docker build must continue working
65+
- **CI compatibility:** GitHub Actions test workflow must continue passing
66+
- **Design evolution:** Keep the current design language, make it better — not a complete redesign
67+
68+
## Key Decisions
69+
70+
| Decision | Rationale | Outcome |
71+
|----------|-----------|---------|
72+
| CRA → Vite | CRA is deprecated, Vite is faster and actively maintained | — Pending |
73+
| React 18 → 19 | Latest stable with performance improvements and new hooks | — Pending |
74+
| Tailwind v3 → v4 | CSS-first config, better performance, modern features | — Pending |
75+
| Add shadcn/ui | Tailwind-native, customizable, consistent component system | — Pending |
76+
| Dark mode with toggle | User requested, modern expectation | — Pending |
77+
| Evolve design, don't replace | User wants improvement, not reinvention — don't break what works | — Pending |
78+
79+
---
80+
*Last updated: 2026-03-12 after initialization*

‎.planning/REQUIREMENTS.md‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
# Requirements: Cheminformatics Microservice Frontend Overhaul
2+
3+
**Defined:** 2026-03-12
4+
**Core Value:** The frontend must feel noticeably modern, fast, and polished — while never breaking existing functionality. Zero security alerts, production-grade quality.
5+
6+
## v1 Requirements
7+
8+
Requirements for this milestone. Each maps to roadmap phases.
9+
10+
### Build & Infrastructure
11+
12+
- [x] **BUILD-01**: Frontend builds and runs on Vite instead of Create React App (react-scripts)
13+
- [x] **BUILD-02**: All dependabot security vulnerabilities are resolved (zero alerts)
14+
- [x] **BUILD-03**: All package.json overrides are eliminated (proper dependency upgrades)
15+
- [x] **BUILD-04**: All dependencies updated to latest stable versions
16+
- [x] **BUILD-05**: Docker frontend build (Dockerfile.frontend) works with Vite
17+
- [x] **BUILD-06**: Environment variables migrated from REACT_APP_* to VITE_* prefix
18+
19+
### Framework Upgrades
20+
21+
- [x] **FRAME-01**: React upgraded from 18.2 to 19.x (latest stable)
22+
- [x] **FRAME-02**: Tailwind CSS upgraded from v3.3 to v4.x with CSS-first config
23+
- [x] **FRAME-03**: TypeScript upgraded from 4.9.5 to 5.x (latest stable)
24+
- [x] **FRAME-04**: All Tailwind v3 class renames and breaking changes resolved
25+
- [x] **FRAME-05**: Framer Motion verified compatible with React 19
26+
27+
### Component System
28+
29+
- [x] **COMP-01**: shadcn/ui installed and configured for Vite + Tailwind v4
30+
- [x] **COMP-02**: Core buttons replaced with shadcn/ui Button component
31+
- [x] **COMP-03**: Cards and content containers replaced with shadcn/ui Card
32+
- [x] **COMP-04**: Modals and dialogs replaced with shadcn/ui Dialog/Sheet
33+
- [x] **COMP-05**: Form inputs replaced with shadcn/ui Input/Select/Textarea
34+
- [x] **COMP-06**: Icons migrated from react-icons to lucide-react
35+
- [x] **COMP-07**: Consistent component usage across all 9 pages
36+
37+
### Theming & Dark Mode
38+
39+
- [x] **THEME-01**: Dark mode toggle available in UI (header/nav)
40+
- [x] **THEME-02**: System preference auto-detection (prefers-color-scheme)
41+
- [x] **THEME-03**: Theme preference persisted in localStorage
42+
- [x] **THEME-04**: CSS variable-based theming using shadcn/ui approach
43+
- [x] **THEME-05**: All pages and components render correctly in both light and dark modes
44+
45+
### Visual Design System
46+
47+
- [x] **VISUAL-01**: Glassmorphism + liquid glass fusion aesthetic applied to cards, containers, and panels across all pages
48+
- [x] **VISUAL-02**: Glass-styled tabbed navigation for tool pages (tab-based UX with glassmorphism aesthetic, replacing the originally planned bento grid layouts per user preference)
49+
- [x] **VISUAL-03**: Animated molecule structure cards with hover shimmer, glow effects, and expand/collapse
50+
- [x] **VISUAL-04**: Resizable input/output panels with draggable divider on wide screens
51+
- [x] **VISUAL-05**: Result comparison mode for side-by-side molecule analysis
52+
- [x] **VISUAL-06**: Claymorphism accents blended with glass effects for depth and tactile feel
53+
54+
### Loading & Feedback
55+
56+
- [x] **LOAD-01**: Skeleton loading states replace full-page spinners during API calls
57+
- [x] **LOAD-02**: Toast notification system (Sonner) replaces alert() calls
58+
- [x] **LOAD-03**: Per-component error states with clear messages and retry actions
59+
- [x] **LOAD-04**: Loading indicators for individual API operations (not full-page)
60+
61+
### Animations & Polish
62+
63+
- [x] **ANIM-01**: Smooth page transitions when navigating between routes
64+
- [x] **ANIM-02**: Micro-interactions on buttons (press scale, hover glow/lift)
65+
- [x] **ANIM-03**: Focus ring animations on interactive elements
66+
- [x] **ANIM-04**: View transitions when switching tabs within tool pages
67+
- [x] **ANIM-05**: Staggered list animations for results and data displays
68+
- [x] **ANIM-06**: Layout animations on content state changes (expand/collapse, show/hide)
69+
70+
### Power User Features
71+
72+
- [x] **POWER-01**: Cmd+K / Ctrl+K command palette for quick tool navigation
73+
- [x] **POWER-02**: Inline molecule structure preview when entering SMILES strings
74+
- [x] **POWER-03**: Breadcrumb navigation showing current location in tool hierarchy
75+
76+
### UX Improvements
77+
78+
- [x] **UX-01**: Responsive layout works well on mobile and tablet viewports
79+
- [x] **UX-02**: Code splitting with React.lazy for route-level lazy loading
80+
- [x] **UX-03**: Improved navigation structure and visual wayfinding
81+
- [x] **UX-04**: Faster initial page load (measurable improvement via Lighthouse)
82+
83+
## v2 Requirements
84+
85+
Deferred to future release. Tracked but not in current roadmap.
86+
87+
### Advanced Features
88+
89+
- **ADV-01**: Interactive 3D molecule viewer (3Dmol.js or similar)
90+
- **ADV-02**: Result comparison mode (side-by-side molecule comparison)
91+
- **ADV-03**: Persistent workspace (save and resume sessions)
92+
- **ADV-04**: Export results to PDF/CSV
93+
- **ADV-05**: Keyboard shortcuts for common operations beyond Cmd+K
94+
95+
## Out of Scope
96+
97+
| Feature | Reason |
98+
|---------|--------|
99+
| Backend API changes | This is frontend-only; backend is stable |
100+
| New API endpoints | Not adding new backend functionality |
101+
| Mobile native app | Web-first, responsive is sufficient for now |
102+
| Complete visual rebrand | Evolving current design, not replacing it |
103+
| Real-time collaboration | Complexity too high for this milestone |
104+
| User accounts/auth | Not part of current architecture |
105+
| Internationalization (i18n) | Not requested, can add later |
106+
107+
## Traceability
108+
109+
Which phases cover which requirements. Updated during roadmap creation.
110+
111+
| Requirement | Phase | Status |
112+
|-------------|-------|--------|
113+
| BUILD-01 | Phase 1 | Complete |
114+
| BUILD-02 | Phase 1 | Complete |
115+
| BUILD-03 | Phase 1 | Complete |
116+
| BUILD-04 | Phase 1 | Complete |
117+
| BUILD-05 | Phase 1 | Complete |
118+
| BUILD-06 | Phase 1 | Complete |
119+
| FRAME-01 | Phase 2 | Complete |
120+
| FRAME-02 | Phase 3 | Complete |
121+
| FRAME-03 | Phase 2 | Complete |
122+
| FRAME-04 | Phase 3 | Complete |
123+
| FRAME-05 | Phase 2 | Complete |
124+
| COMP-01 | Phase 4 | Complete |
125+
| COMP-02 | Phase 4 | Complete |
126+
| COMP-03 | Phase 4 | Complete |
127+
| COMP-04 | Phase 4 | Complete |
128+
| COMP-05 | Phase 4 | Complete |
129+
| COMP-06 | Phase 4 | Complete |
130+
| COMP-07 | Phase 4 | Complete |
131+
| THEME-01 | Phase 4 | Complete |
132+
| THEME-02 | Phase 4 | Complete |
133+
| THEME-03 | Phase 4 | Complete |
134+
| THEME-04 | Phase 4 | Complete |
135+
| THEME-05 | Phase 4 | Complete |
136+
| VISUAL-01 | Phase 4.1 | Complete |
137+
| VISUAL-02 | Phase 4.1 | Complete |
138+
| VISUAL-03 | Phase 4.1 | Complete |
139+
| VISUAL-04 | Phase 4.1 | Complete |
140+
| VISUAL-05 | Phase 4.1 | Complete |
141+
| VISUAL-06 | Phase 4.1 | Complete |
142+
| LOAD-01 | Phase 5 | Complete |
143+
| LOAD-02 | Phase 5 | Complete |
144+
| LOAD-03 | Phase 5 | Complete |
145+
| LOAD-04 | Phase 5 | Complete |
146+
| ANIM-01 | Phase 6 | Complete |
147+
| ANIM-02 | Phase 6 | Complete |
148+
| ANIM-03 | Phase 6 | Complete |
149+
| ANIM-04 | Phase 6 | Complete |
150+
| ANIM-05 | Phase 6 | Complete |
151+
| ANIM-06 | Phase 6 | Complete |
152+
| POWER-01 | Phase 6 | Complete |
153+
| POWER-02 | Phase 6 | Complete |
154+
| POWER-03 | Phase 6 | Complete |
155+
| UX-01 | Phase 5 | Complete |
156+
| UX-02 | Phase 5 | Complete |
157+
| UX-03 | Phase 5 | Complete |
158+
| UX-04 | Phase 5 | Complete |
159+
160+
**Coverage:**
161+
- v1 requirements: 46 total
162+
- Mapped to phases: 46
163+
- Unmapped: 0
164+
165+
---
166+
*Requirements defined: 2026-03-12*
167+
*Last updated: 2026-03-12 after roadmap creation*

0 commit comments

Comments
 (0)