63 lines
1.2 KiB
Markdown
63 lines
1.2 KiB
Markdown
# Quickstart: Frontend Development
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js 18+
|
|
- npm
|
|
|
|
## Setup
|
|
|
|
1. Navigate to the frontend directory:
|
|
```bash
|
|
cd frontend
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Running the Development Server
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
The application will be available at `http://localhost:5173`.
|
|
|
|
## Using Standard UI Components
|
|
|
|
Import components from `$lib/ui`:
|
|
|
|
```svelte
|
|
<script>
|
|
import { Button, Input } from '$lib/ui';
|
|
</script>
|
|
|
|
<Input label="Username" bind:value={username} />
|
|
<Button variant="primary" onclick={submit}>Submit</Button>
|
|
```
|
|
|
|
## Using Internationalization
|
|
|
|
Import the `t` store from `$lib/i18n`:
|
|
|
|
```svelte
|
|
<script>
|
|
import { t } from '$lib/i18n';
|
|
</script>
|
|
|
|
<h1>{$t.dashboard.title}</h1>
|
|
<button>{$t.common.save}</button>
|
|
```
|
|
|
|
## Adding New Translations
|
|
|
|
1. Open `frontend/src/lib/i18n/locales/ru.json` and add the new key-value pair.
|
|
2. Open `frontend/src/lib/i18n/locales/en.json` and add the corresponding English translation.
|
|
|
|
## Adding New Components
|
|
|
|
1. Create a new `.svelte` file in `frontend/src/lib/ui/`.
|
|
2. Define props and styles using Tailwind CSS.
|
|
3. Export the component in `frontend/src/lib/ui/index.ts`. |