chore: remove outdated planning documents from codebase
- Deleted several planning documents including ARCHITECTURE.md, CONCERNS.md, CONVENTIONS.md, INTEGRATIONS.md, STACK.md, STRUCTURE.md, and TESTING.md. - These files were no longer relevant to the current project structure and development practices.
This commit is contained in:
@@ -1,212 +0,0 @@
|
||||
# Codebase Concerns
|
||||
|
||||
**Analysis Date:** 2026-04-07
|
||||
|
||||
## Tech Debt
|
||||
|
||||
**Missing 404 Page Implementation:**
|
||||
- Issue: 404 catch-all route currently redirects to HomePage instead of a dedicated 404 page
|
||||
- Files: `src/router/index.ts` (line 51: TODO comment)
|
||||
- Impact: Users encountering invalid routes see the homepage instead of a proper error page, creating confusion and poor UX. SEO also treats all invalid URLs as the homepage.
|
||||
- Fix approach: Create a new `NotFoundPage.vue` component in `src/views/` with proper 404 messaging, then update the route in `src/router/index.ts` to point to this component.
|
||||
|
||||
**Hardcoded GA Tracking ID:**
|
||||
- Issue: Google Analytics tracking ID `G-CDVVNFY6MV` is hardcoded in multiple places
|
||||
- Files: `index.html` (line 9), `src/router/index.ts` (line 109)
|
||||
- Impact: Cannot change analytics without code updates. Difficult to manage different GA IDs for development vs production environments.
|
||||
- Fix approach: Move tracking ID to environment variables (`.env`), access via `import.meta.env.VITE_GA_ID`.
|
||||
|
||||
**Hardcoded Site URL and Analytics:**
|
||||
- Issue: URLs and site identifiers hardcoded throughout the codebase
|
||||
- Files: `src/composables/useSeo.ts` (lines 103, 113, 143, 149), `src/config/site.ts` (line 69), `src/router/index.ts` (line 109)
|
||||
- Impact: Difficult to deploy to different environments (staging vs production). Requires code changes for different domains.
|
||||
- Fix approach: Move to environment configuration. Create environment-based config: `VITE_SITE_URL`, `VITE_SITE_DOMAIN`, etc.
|
||||
|
||||
**External Image Asset Dependency on Placeholder Service:**
|
||||
- Issue: Missing images fallback to external placeholder.com service without reliability guarantee
|
||||
- Files: `src/composables/useAssets.ts` (lines 18, 42)
|
||||
- Impact: If placeholder.com goes down or is rate-limited, missing images break visually. External dependency increases load time.
|
||||
- Fix approach: Use local SVG or base64-encoded placeholder image instead of external URL.
|
||||
|
||||
## Known Bugs
|
||||
|
||||
**Scroll Position Duplication:**
|
||||
- Symptoms: Multiple scroll handlers (in router and App.vue) could cause double-scrolling or jank
|
||||
- Files: `src/App.vue` (lines 14-18), `src/router/index.ts` (lines 62-82, 118-125)
|
||||
- Trigger: Navigation between routes
|
||||
- Workaround: Currently works, but behavior is fragile due to redundancy
|
||||
|
||||
**FormationPage Billing Toggle State Issue:**
|
||||
- Symptoms: Billing toggle (monthly/annual) uses `isAnnual` state but HTML shows `billingType` variable
|
||||
- Files: `src/views/FormationPage.vue` (lines 12-20, 41)
|
||||
- Trigger: When switching between monthly and annual billing
|
||||
- Workaround: Component probably has missing reactive computed for `billingType`
|
||||
|
||||
## Security Considerations
|
||||
|
||||
**v-html Usage in FAQ Component:**
|
||||
- Risk: XSS vulnerability if FAQ answers contain user-generated content or external data
|
||||
- Files: `src/components/ServiceFAQ.vue` (line 22: `<p v-html="faq.answer"></p>`)
|
||||
- Current mitigation: FAQ content is hardcoded in component props (trusted source), but pattern is risky if content source changes
|
||||
- Recommendations: Replace with v-text or plain text content. If HTML is needed, use a sanitization library like `DOMPurify`.
|
||||
|
||||
**Personal Information Exposed in Configuration:**
|
||||
- Risk: Email, phone number, and social profile IDs hardcoded in public config
|
||||
- Files: `src/config/site.ts` (lines 71-100), `index.html` (lines 88, 239-240)
|
||||
- Current mitigation: This is intentional (portfolio/contact site), but increases spam/scraping risk
|
||||
- Recommendations: Consider using form submission instead of direct email/phone links on sensitive pages. Monitor contact form for abuse.
|
||||
|
||||
**Hardcoded Analytics and AdSense IDs:**
|
||||
- Risk: Analytics and AdSense IDs in HTML source reveal account information
|
||||
- Files: `index.html` (lines 9, 19)
|
||||
- Current mitigation: None - IDs are public by design (Google Analytics is meant to be public)
|
||||
- Recommendations: Ensure AdSense account is properly secured with password/2FA. Monitor for unauthorized modifications.
|
||||
|
||||
**Discord User ID Exposed:**
|
||||
- Risk: Discord user ID `370940770225618954` is hardcoded and publicly visible
|
||||
- Files: `src/config/site.ts` (line 92)
|
||||
- Current mitigation: Discord doesn't allow impersonation via ID alone, but enables targeted attacks
|
||||
- Recommendations: Keep Discord contact via link only, without exposing raw user ID. Use Discord username instead.
|
||||
|
||||
## Performance Bottlenecks
|
||||
|
||||
**Eager Image Loading with import.meta.glob:**
|
||||
- Problem: All images under `src/assets/images/**` are eagerly loaded into memory at startup
|
||||
- Files: `src/composables/useAssets.ts` (line 6: `eager: true`)
|
||||
- Cause: `eager: true` loads all matching modules immediately instead of lazy-loading on-demand
|
||||
- Improvement path: Change to lazy loading and implement on-demand imports, or at minimum separate critical images from lazy ones.
|
||||
|
||||
**External Script Dependencies Block Rendering:**
|
||||
- Problem: Google Analytics, Google AdSense, and Umami scripts are loaded synchronously
|
||||
- Files: `index.html` (lines 9, 19, 239-240)
|
||||
- Cause: Multiple external scripts without proper `async` loading strategy
|
||||
- Improvement path: Ensure all external scripts use `async` or `defer` attributes. Currently Umami and GTM use `defer` (good), but ensure they don't block critical rendering path.
|
||||
|
||||
**No Lazy Loading on Images:**
|
||||
- Problem: No lazy-loading attributes on images, causing initial page load to fetch all images
|
||||
- Files: Multiple components (`src/components/layout/AppFooter.vue` line 35, `src/components/layout/AppHeader.vue` line 33)
|
||||
- Cause: `loading="eager"` and `loading="lazy"` not used strategically
|
||||
- Improvement path: Set `loading="lazy"` on all below-fold images. Keep only above-fold images with `loading="eager"`.
|
||||
|
||||
## Fragile Areas
|
||||
|
||||
**GalleryModal Event Listener Management:**
|
||||
- Files: `src/components/GalleryModal.vue` (lines 44-50)
|
||||
- Why fragile: Global document keydown listener added/removed on mount/unmount. If component unmounts unexpectedly, listener could remain attached or fail to attach.
|
||||
- Safe modification: Add try-catch around removeEventListener. Consider using a ref-based approach or delegated events.
|
||||
- Test coverage: No test coverage visible for keyboard navigation. Recommend adding unit tests for keyboard shortcuts.
|
||||
|
||||
**Image URL Resolution Fallback Chain:**
|
||||
- Files: `src/composables/useAssets.ts` (lines 13-44)
|
||||
- Why fragile: Multiple fallback layers (module lookup → URL construction → placeholder) make debugging hard. If one fallback path fails, error is silently logged.
|
||||
- Safe modification: Add explicit logging for each fallback step. Document expected path formats clearly.
|
||||
- Test coverage: Recommend unit tests for edge cases (empty path, missing extensions, malformed paths).
|
||||
|
||||
**SEO Composable DOM Manipulation:**
|
||||
- Files: `src/composables/useSeo.ts` (lines 35-70)
|
||||
- Why fragile: Directly manipulates DOM with `document.querySelector`, `createElement`, `appendChild`. No error handling if DOM structure changes.
|
||||
- Safe modification: Use Vue's ref system or a dedicated SEO library (e.g., `@unhead/vue`). Add error boundaries.
|
||||
- Test coverage: No test coverage for SSR compatibility or DOM cleanup on route changes.
|
||||
|
||||
**Route-based SEO Title Dependency:**
|
||||
- Files: `src/composables/useSeo.ts` (lines 75-76)
|
||||
- Why fragile: Relies on route being available in useRoute() hook. If used in wrong context (non-routed component), will fail silently.
|
||||
- Safe modification: Add null checks. Consider creating a composable specifically for page-level SEO that enforces route dependency.
|
||||
- Test coverage: Recommend tests for components used in and outside routing context.
|
||||
|
||||
## Scaling Limits
|
||||
|
||||
**Single-Page History State:**
|
||||
- Current capacity: Router handles typical portfolio page count (6-8 pages)
|
||||
- Limit: If projects list grows beyond 50-100 items, ProjectsPage.vue performance degrades (all projects loaded at once)
|
||||
- Scaling path: Implement pagination or virtual scrolling in ProjectsPage. Use server-side filtering if projects become dynamic.
|
||||
|
||||
**Inline Image Modules:**
|
||||
- Current capacity: ~15-20 images loaded eagerly in memory
|
||||
- Limit: If image count exceeds 100+, startup time and memory usage increase significantly
|
||||
- Scaling path: Migrate to lazy-loading strategy. Consider CDN for image serving in production.
|
||||
|
||||
**Localization Key Lookups:**
|
||||
- Current capacity: 500+ localization keys across en.ts and fr.ts
|
||||
- Limit: If keys exceed 1000+, lookup performance and bundle size become concerns
|
||||
- Scaling path: Implement lazy-loaded locale files (load only active language). Consider JSON-based locale format for better optimization.
|
||||
|
||||
## Dependencies at Risk
|
||||
|
||||
**No Testing Framework:**
|
||||
- Risk: Zero test coverage visible in codebase. Refactoring breaks are undetectable.
|
||||
- Impact: Security fixes, performance optimizations, and feature additions are risky.
|
||||
- Migration plan: Add Jest + Vue Test Utils. Start with critical paths (router guards, composables, SEO).
|
||||
|
||||
**Hardcoded Translation Keys:**
|
||||
- Risk: If translation key structure changes, UI silently breaks (missing translations show key names)
|
||||
- Impact: Refactoring translations is error-prone and breaks are not caught in CI
|
||||
- Migration plan: Add TypeScript strict typing for i18n keys using type-safe i18n library.
|
||||
|
||||
**External Analytics Dependency:**
|
||||
- Risk: If Google Analytics changes API or service, tracking breaks
|
||||
- Impact: Loss of analytics data, no visibility into user behavior
|
||||
- Migration plan: Already using Umami (self-hosted alternative). Consider making analytics provider pluggable.
|
||||
|
||||
## Missing Critical Features
|
||||
|
||||
**No Error Boundary:**
|
||||
- Problem: No Vue error boundary or fallback component for runtime errors
|
||||
- Blocks: Cannot gracefully handle component errors or show error UI
|
||||
- Fix approach: Create an error boundary component using Vue 3 error handling hooks (errorCaptured), wrap main app with it.
|
||||
|
||||
**No Offline Support:**
|
||||
- Problem: No service worker or offline fallback
|
||||
- Blocks: Portfolio becomes completely unavailable if user loses connection
|
||||
- Fix approach: Implement service worker with offline fallback. Cache critical assets (HTML, CSS, JS).
|
||||
|
||||
**No Loading States:**
|
||||
- Problem: No skeleton loaders or loading indicators for async operations
|
||||
- Blocks: Users don't know if page is loading or broken. Especially impacts image loading.
|
||||
- Fix approach: Add skeleton screens for ProjectDetailPage. Add loading indicators for gallery modal.
|
||||
|
||||
**No Proper 404 Page:**
|
||||
- Problem: 404 redirects to homepage (mentioned in Tech Debt)
|
||||
- Blocks: Users cannot identify when they've hit an invalid URL
|
||||
- Fix approach: Create NotFoundPage.vue with suggestions for navigation.
|
||||
|
||||
**No Analytics Event Tracking:**
|
||||
- Problem: Only page views tracked, no event analytics (clicks, form submissions, etc.)
|
||||
- Blocks: Cannot understand user behavior beyond page traffic
|
||||
- Fix approach: Add event tracking for CTA clicks, social link clicks, gallery interactions.
|
||||
|
||||
## Test Coverage Gaps
|
||||
|
||||
**No Unit Tests:**
|
||||
- What's not tested: Composables (useSeo, useAssets, useProjects, useI18n), utility functions
|
||||
- Files: All of `src/composables/` and `src/data/`
|
||||
- Risk: Refactoring introduces subtle bugs. Type safety is partial (TypeScript, but no runtime checks).
|
||||
- Priority: High - composables are core to the app and impact SEO/styling
|
||||
|
||||
**No Component Tests:**
|
||||
- What's not tested: Interactive components (GalleryModal, ServiceFAQ, language switcher, theme toggle)
|
||||
- Files: `src/components/GalleryModal.vue`, `src/components/ServiceFAQ.vue`, `src/components/ThemeToggle.vue`, `src/components/LanguageSwitcher.vue`
|
||||
- Risk: UI behavior breaks silently. Accessibility features (keyboard nav, ARIA) may regress.
|
||||
- Priority: High - GalleryModal keyboard navigation and language switching are user-facing
|
||||
|
||||
**No Integration Tests:**
|
||||
- What's not tested: Router navigation, SEO meta tag updates, i18n language switching across pages
|
||||
- Files: `src/router/index.ts`, cross-file composable interactions
|
||||
- Risk: Multi-step user flows break. SEO meta tags may not update correctly on navigation.
|
||||
- Priority: Medium - can catch cross-cutting issues
|
||||
|
||||
**No E2E Tests:**
|
||||
- What's not tested: Full user journeys (landing → project detail → gallery → contact)
|
||||
- Framework: None (not using Cypress, Playwright, etc.)
|
||||
- Risk: Visual regressions, layout issues, navigation bugs in real browser contexts
|
||||
- Priority: Medium - would catch integration issues and performance regressions
|
||||
|
||||
**No Accessibility Tests:**
|
||||
- What's not tested: Keyboard navigation, screen reader compatibility, color contrast, focus management
|
||||
- Files: All components with interactive elements
|
||||
- Risk: Accessibility fails silently. Users with disabilities cannot navigate.
|
||||
- Priority: High - portfolio should be accessible to all users
|
||||
|
||||
---
|
||||
|
||||
*Concerns audit: 2026-04-07*
|
||||
Reference in New Issue
Block a user