radionica3d/docs/frontend.md

Frontend Development Guide

The frontend is a Vue 3 Single Page Application (SPA) built with Vite. It features a modern, responsive design with support for multiple languages and 3D visualization.

Key Technologies

• Vue 3: Using the <script setup> syntax and Composition API.
• Tailwind CSS: Utility-first styling. Note that the project uses a custom color palette defined in tailwind.config.ts.
• Three.js: Used in StlViewer.vue to render 3D models directly in the browser.
• Pinia: Manages user authentication state (stores/auth.ts).

Pages vs Components

• Pages (src/pages/): Components mapped to routes. Each page should represent a full view (e.g., Index.vue, Orders.vue).
• Components (src/components/): Reusable UI elements.
  • ui/: Small, primitive components like buttons or inputs.
  • admin/: Specialized components used only in the Admin Dashboard.

Localization (i18n)

To add or modify text:

1. Locate the relevant fragment in src/locales/master_user/ (for public site) or master_admin/ (for admin panel).
2. Edit the JSON file (ensure all supported languages: en, me, ru, ua are present).

3. Run the generation script:

   # On Windows:
   backend\.venv\Scripts\python.exe scripts\manage_locales.py split
   

4. The changes will be reflected in the generated src/locales/*.json files and picked up by Vite.

3D Preview (STL)

The StlViewer.vue component handles the rendering of .stl files. It supports:

• Auto-scaling to fit the view.
• Color customization based on the selected material.
• Progress indication during large file loads.

Routing and Auth Guards

Defined in src/router/index.ts.

• Paths starting with /:lang/admin require admin role.
• Paths starting with /:lang/orders require the user to be logged in.
• The router automatically handles language prefixes (redirecting /about to /en/about based on local storage or defaults).

Adding a New Page

1. Create a new .vue file in src/pages/.
2. Add the route to src/router/index.ts.
3. Add translations for the page title in src/locales/master_user/seo.json.
4. Run manage_locales.py split.