mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-24 00:43:29 +10:00
Migrate from Biome to Oxlint/Oxfmt (#2822)
* Migrate from Biome to Oxlint/Oxfmt * pin version of autofix * set version of autofix * pin version of autofix * [autofix.ci] apply automated fixes * better comments, test formatter * [autofix.ci] apply automated fixes * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Amruth Pillai
GitHub
+118
-176
@@ -12,18 +12,14 @@ This guide provides a comprehensive overview of Reactive Resume's architecture a
|
||||
Reactive Resume is built with a modern, type-safe stack:
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Frontend" icon="browser">
|
||||
- **React 19** with TanStack Start
|
||||
- **TypeScript** for type safety
|
||||
- **Tailwind CSS** for styling
|
||||
- **Radix UI** for accessible components
|
||||
</Card>
|
||||
<Card title="Backend" icon="server">
|
||||
- **ORPC** for type-safe RPC
|
||||
- **Drizzle ORM** with PostgreSQL
|
||||
- **Better Auth** for authentication
|
||||
- **Sharp** for image processing
|
||||
</Card>
|
||||
<Card title="Frontend" icon="browser">
|
||||
- **React 19** with TanStack Start - **TypeScript** for type safety - **Tailwind CSS** for styling - **Radix UI**
|
||||
for accessible components
|
||||
</Card>
|
||||
<Card title="Backend" icon="server">
|
||||
- **ORPC** for type-safe RPC - **Drizzle ORM** with PostgreSQL - **Better Auth** for authentication - **Sharp** for
|
||||
image processing
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
---
|
||||
@@ -70,89 +66,61 @@ flowchart TD
|
||||
|
||||
### Root Level
|
||||
|
||||
| Directory | Purpose |
|
||||
|-----------|---------|
|
||||
| `src/` | Main application source code |
|
||||
| `public/` | Static assets served directly |
|
||||
| `locales/` | Translation files (.po format) |
|
||||
| `migrations/` | Database migration files |
|
||||
| `docs/` | Mintlify documentation |
|
||||
| `data/` | Local data storage (fonts, uploads) |
|
||||
| `scripts/` | Utility scripts |
|
||||
| Directory | Purpose |
|
||||
| ------------- | ----------------------------------- |
|
||||
| `src/` | Main application source code |
|
||||
| `public/` | Static assets served directly |
|
||||
| `locales/` | Translation files (.po format) |
|
||||
| `migrations/` | Database migration files |
|
||||
| `docs/` | Mintlify documentation |
|
||||
| `data/` | Local data storage (fonts, uploads) |
|
||||
| `scripts/` | Utility scripts |
|
||||
|
||||
### Source Code (`src/`)
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="components/" icon="cube">
|
||||
Reusable React components organized by category:
|
||||
|
||||
- **`ui/`** — Base UI components (Button, Card, Dialog, etc.)
|
||||
- **`resume/`** — Resume-specific components (sections, templates)
|
||||
- **`input/`** — Form input components (ColorPicker, RichInput)
|
||||
- **`layout/`** — Layout components (Sidebar, LoadingScreen)
|
||||
- **`animation/`** — Animation components (Spotlight, TextMask)
|
||||
- **`theme/`** — Theme management components
|
||||
- **`typography/`** — Font management components
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="routes/" icon="route">
|
||||
File-based routing using TanStack Router:
|
||||
|
||||
- **`__root.tsx`** — Root layout with providers
|
||||
- **`_home/`** — Public home page routes
|
||||
- **`auth/`** — Authentication routes (login, register, etc.)
|
||||
- **`dashboard/`** — User dashboard routes
|
||||
- **`builder/`** — Resume builder routes (the main editor)
|
||||
- **`printer/`** — PDF printing route
|
||||
- **`api/`** — API routes
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="integrations/" icon="plug">
|
||||
Third-party service integrations:
|
||||
|
||||
- **`auth/`** — Better Auth client configuration
|
||||
- **`drizzle/`** — Database schema and utilities
|
||||
- **`orpc/`** — API router, client, and services
|
||||
- **`ai/`** — AI service integrations
|
||||
- **`import/`** — Resume import utilities
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="dialogs/" icon="window-maximize">
|
||||
Modal dialog components:
|
||||
|
||||
- **`auth/`** — Authentication dialogs
|
||||
- **`resume/`** — Resume management dialogs
|
||||
- **`api-key/`** — API key management dialogs
|
||||
- **`manager.tsx`** — Dialog manager component
|
||||
- **`store.ts`** — Dialog state management (Zustand)
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="schema/" icon="file-code">
|
||||
Zod schemas for validation:
|
||||
|
||||
- **`resume/`** — Resume data schemas
|
||||
- **`icons.ts`** — Icon definitions
|
||||
- **`templates.ts`** — Template definitions
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="hooks/" icon="hook">
|
||||
Custom React hooks:
|
||||
|
||||
- `use-confirm.tsx` — Confirmation dialog hook
|
||||
- `use-prompt.tsx` — Prompt dialog hook
|
||||
- `use-mobile.tsx` — Mobile detection hook
|
||||
- `use-safe-context.tsx` — Safe context consumption
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="utils/" icon="wrench">
|
||||
Utility functions:
|
||||
|
||||
- `env.ts` — Environment variable validation
|
||||
- `locale.ts` — Locale utilities
|
||||
- `theme.ts` — Theme utilities
|
||||
- `string.ts` — String manipulation
|
||||
- `file.ts` — File handling utilities
|
||||
</Accordion>
|
||||
<Accordion title="components/" icon="cube">
|
||||
Reusable React components organized by category: - **`ui/`** — Base UI components (Button, Card, Dialog, etc.) -
|
||||
**`resume/`** — Resume-specific components (sections, templates) - **`input/`** — Form input components
|
||||
(ColorPicker, RichInput) - **`layout/`** — Layout components (Sidebar, LoadingScreen) - **`animation/`** — Animation
|
||||
components (Spotlight, TextMask) - **`theme/`** — Theme management components - **`typography/`** — Font management
|
||||
components
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="routes/" icon="route">
|
||||
File-based routing using TanStack Router: - **`__root.tsx`** — Root layout with providers - **`_home/`** — Public
|
||||
home page routes - **`auth/`** — Authentication routes (login, register, etc.) - **`dashboard/`** — User dashboard
|
||||
routes - **`builder/`** — Resume builder routes (the main editor) - **`printer/`** — PDF printing route - **`api/`**
|
||||
— API routes
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="integrations/" icon="plug">
|
||||
Third-party service integrations: - **`auth/`** — Better Auth client configuration - **`drizzle/`** — Database
|
||||
schema and utilities - **`orpc/`** — API router, client, and services - **`ai/`** — AI service integrations -
|
||||
**`import/`** — Resume import utilities
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="dialogs/" icon="window-maximize">
|
||||
Modal dialog components: - **`auth/`** — Authentication dialogs - **`resume/`** — Resume management dialogs -
|
||||
**`api-key/`** — API key management dialogs - **`manager.tsx`** — Dialog manager component - **`store.ts`** — Dialog
|
||||
state management (Zustand)
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="schema/" icon="file-code">
|
||||
Zod schemas for validation: - **`resume/`** — Resume data schemas - **`icons.ts`** — Icon definitions -
|
||||
**`templates.ts`** — Template definitions
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="hooks/" icon="hook">
|
||||
Custom React hooks: - `use-confirm.tsx` — Confirmation dialog hook - `use-prompt.tsx` — Prompt dialog hook -
|
||||
`use-mobile.tsx` — Mobile detection hook - `use-safe-context.tsx` — Safe context consumption
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="utils/" icon="wrench">
|
||||
Utility functions: - `env.ts` — Environment variable validation - `locale.ts` — Locale utilities - `theme.ts` —
|
||||
Theme utilities - `string.ts` — String manipulation - `file.ts` — File handling utilities
|
||||
</Accordion>
|
||||
|
||||
</AccordionGroup>
|
||||
|
||||
---
|
||||
@@ -163,16 +131,14 @@ flowchart TD
|
||||
|
||||
Routes are automatically generated from the file structure in `src/routes/`. TanStack Router conventions:
|
||||
|
||||
| Pattern | Description | Example |
|
||||
|---------|-------------|---------|
|
||||
| `index.tsx` | Index route | `/dashboard` |
|
||||
| `$param.tsx` | Dynamic parameter | `/builder/$resumeId` |
|
||||
| `_layout/` | Layout group (prefix) | `_home/` |
|
||||
| `__root.tsx` | Root layout | Wraps all routes |
|
||||
| Pattern | Description | Example |
|
||||
| ------------ | --------------------- | -------------------- |
|
||||
| `index.tsx` | Index route | `/dashboard` |
|
||||
| `$param.tsx` | Dynamic parameter | `/builder/$resumeId` |
|
||||
| `_layout/` | Layout group (prefix) | `_home/` |
|
||||
| `__root.tsx` | Root layout | Wraps all routes |
|
||||
|
||||
<Warning>
|
||||
Never edit `src/routeTree.gen.ts` manually — it's auto-generated when you run the dev server.
|
||||
</Warning>
|
||||
<Warning>Never edit `src/routeTree.gen.ts` manually — it's auto-generated when you run the dev server.</Warning>
|
||||
|
||||
### API Layer (ORPC)
|
||||
|
||||
@@ -203,11 +169,11 @@ const { data } = useQuery(orpc.resume.findMany.queryOptions());
|
||||
|
||||
Reactive Resume uses a hybrid approach:
|
||||
|
||||
| Type | Tool | Use Case |
|
||||
|------|------|----------|
|
||||
| Server State | TanStack Query | API data, caching, sync |
|
||||
| Client State | Zustand | UI state, dialogs, preferences |
|
||||
| Form State | React Hook Form | Form inputs and validation |
|
||||
| Type | Tool | Use Case |
|
||||
| ------------ | --------------- | ------------------------------ |
|
||||
| Server State | TanStack Query | API data, caching, sync |
|
||||
| Client State | Zustand | UI state, dialogs, preferences |
|
||||
| Form State | React Hook Form | Form inputs and validation |
|
||||
|
||||
### Database Schema
|
||||
|
||||
@@ -217,10 +183,10 @@ The database schema is defined using Drizzle ORM in `src/integrations/drizzle/sc
|
||||
import { pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
|
||||
|
||||
export const resume = pgTable("resume", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
title: text("title").notNull(),
|
||||
slug: text("slug").notNull(),
|
||||
// ... more fields
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
title: text("title").notNull(),
|
||||
slug: text("slug").notNull(),
|
||||
// ... more fields
|
||||
});
|
||||
```
|
||||
|
||||
@@ -240,12 +206,12 @@ export const resume = pgTable("resume", {
|
||||
import { cn } from "@/utils/style";
|
||||
|
||||
interface MyComponentProps {
|
||||
title: string;
|
||||
className?: string;
|
||||
title: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const MyComponent = ({ title, className }: MyComponentProps) => {
|
||||
return <div className={cn("p-4", className)}>{title}</div>;
|
||||
return <div className={cn("p-4", className)}>{title}</div>;
|
||||
};
|
||||
```
|
||||
|
||||
@@ -260,11 +226,11 @@ export const MyComponent = ({ title, className }: MyComponentProps) => {
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/my-page")({
|
||||
component: MyPage,
|
||||
component: MyPage,
|
||||
});
|
||||
|
||||
function MyPage() {
|
||||
return <div>My Page Content</div>;
|
||||
return <div>My Page Content</div>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -280,11 +246,9 @@ import { z } from "zod";
|
||||
import { publicProcedure, router } from "../server";
|
||||
|
||||
export const myRouter = router({
|
||||
hello: publicProcedure
|
||||
.input(z.object({ name: z.string() }))
|
||||
.handler(async ({ input }) => {
|
||||
return { message: `Hello, ${input.name}!` };
|
||||
}),
|
||||
hello: publicProcedure.input(z.object({ name: z.string() })).handler(async ({ input }) => {
|
||||
return { message: `Hello, ${input.name}!` };
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
@@ -300,81 +264,59 @@ import { Trans } from "@lingui/react/macro";
|
||||
|
||||
// In component
|
||||
const title = t`Welcome`;
|
||||
<Trans>Click here to continue</Trans>
|
||||
<Trans>Click here to continue</Trans>;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Configuration Files
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `vite.config.ts` | Vite bundler configuration |
|
||||
| `tsconfig.json` | TypeScript configuration |
|
||||
| `biome.json` | Linter and formatter settings |
|
||||
| `drizzle.config.ts` | Drizzle ORM configuration |
|
||||
| `lingui.config.ts` | Lingui i18n configuration |
|
||||
| `components.json` | shadcn/ui component configuration |
|
||||
| File | Purpose |
|
||||
| ------------------- | --------------------------------- |
|
||||
| `vite.config.ts` | Vite bundler configuration |
|
||||
| `tsconfig.json` | TypeScript configuration |
|
||||
| `.oxfmtrc.json` | Formatter settings |
|
||||
| `.oxlintrc.json` | Linter settings |
|
||||
| `drizzle.config.ts` | Drizzle ORM configuration |
|
||||
| `lingui.config.ts` | Lingui i18n configuration |
|
||||
| `components.json` | shadcn/ui component configuration |
|
||||
|
||||
---
|
||||
|
||||
## Contributing Guidelines
|
||||
|
||||
<Steps>
|
||||
<Step title="Fork & Clone">
|
||||
Fork the repository on GitHub and clone your fork locally.
|
||||
</Step>
|
||||
|
||||
<Step title="Create a Branch">
|
||||
Create a feature branch from `main`:
|
||||
```bash
|
||||
git checkout -b feature/my-feature
|
||||
```
|
||||
</Step>
|
||||
|
||||
<Step title="Make Changes">
|
||||
Implement your changes following the patterns described above.
|
||||
</Step>
|
||||
|
||||
<Step title="Test Locally">
|
||||
Ensure the app works correctly with your changes:
|
||||
```bash
|
||||
pnpm run dev
|
||||
pnpm run lint
|
||||
pnpm run typecheck
|
||||
```
|
||||
</Step>
|
||||
|
||||
<Step title="Commit & Push">
|
||||
Write clear commit messages and push to your fork.
|
||||
</Step>
|
||||
|
||||
<Step title="Open a Pull Request">
|
||||
Open a PR against the main repository with a clear description of your changes.
|
||||
</Step>
|
||||
<Step title="Fork & Clone">Fork the repository on GitHub and clone your fork locally.</Step>
|
||||
|
||||
<Step title="Create a Branch">
|
||||
Create a feature branch from `main`: ```bash git checkout -b feature/my-feature ```
|
||||
</Step>
|
||||
|
||||
<Step title="Make Changes">Implement your changes following the patterns described above.</Step>
|
||||
|
||||
<Step title="Test Locally">
|
||||
Ensure the app works correctly with your changes: ```bash pnpm run dev pnpm run lint pnpm run typecheck ```
|
||||
</Step>
|
||||
|
||||
<Step title="Commit & Push">Write clear commit messages and push to your fork.</Step>
|
||||
|
||||
<Step title="Open a Pull Request">
|
||||
Open a PR against the main repository with a clear description of your changes.
|
||||
</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
<Note>
|
||||
Make sure to read any `CONTRIBUTING.md` file in the repository for additional guidelines.
|
||||
</Note>
|
||||
<Note>Make sure to read any `CONTRIBUTING.md` file in the repository for additional guidelines.</Note>
|
||||
|
||||
---
|
||||
|
||||
## Need Help?
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card
|
||||
title="GitHub Discussions"
|
||||
icon="comments"
|
||||
href="https://github.com/amruthpillai/reactive-resume/discussions"
|
||||
>
|
||||
Ask questions and discuss ideas with the community.
|
||||
</Card>
|
||||
<Card
|
||||
title="GitHub Issues"
|
||||
icon="bug"
|
||||
href="https://github.com/amruthpillai/reactive-resume/issues"
|
||||
>
|
||||
Report bugs or request features.
|
||||
</Card>
|
||||
<Card title="GitHub Discussions" icon="comments" href="https://github.com/amruthpillai/reactive-resume/discussions">
|
||||
Ask questions and discuss ideas with the community.
|
||||
</Card>
|
||||
<Card title="GitHub Issues" icon="bug" href="https://github.com/amruthpillai/reactive-resume/issues">
|
||||
Report bugs or request features.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -4,11 +4,8 @@ description: "Set up a local development environment for Reactive Resume"
|
||||
---
|
||||
|
||||
<Info>
|
||||
**Prerequisites**:
|
||||
- [Node.js](https://nodejs.org/) v20 or higher
|
||||
- [pnpm](https://pnpm.io/) v10.28.0 or higher (package manager)
|
||||
- [Docker](https://docs.docker.com/get-docker/) and Docker Compose
|
||||
- [Git](https://git-scm.com/)
|
||||
**Prerequisites**: - [Node.js](https://nodejs.org/) v20 or higher - [pnpm](https://pnpm.io/) v10.28.0 or higher
|
||||
(package manager) - [Docker](https://docs.docker.com/get-docker/) and Docker Compose - [Git](https://git-scm.com/)
|
||||
</Info>
|
||||
|
||||
This guide walks you through setting up Reactive Resume for local development. Whether you're contributing to the project or customizing it for your needs, these steps will get you up and running.
|
||||
@@ -87,14 +84,15 @@ This guide walks you through setting up Reactive Resume for local development. W
|
||||
SMTP_HOST=localhost
|
||||
SMTP_PORT=1025
|
||||
```
|
||||
|
||||
|
||||
<Note>
|
||||
**PDF Generation Note**: The `PRINTER_APP_URL` variable is required when running Reactive Resume outside of Docker while the printer service is running inside Docker (which is the case when using `compose.dev.yml`). The printer needs to reach your local app to render resumes for PDF generation. Since Docker containers cannot access `localhost` on your host machine directly, you must set `PRINTER_APP_URL` to `http://host.docker.internal:3000`. This special hostname allows Docker containers to communicate with services running on your host machine.
|
||||
</Note>
|
||||
|
||||
|
||||
<Tip>
|
||||
**Email Testing**: The development stack includes [Mailpit](https://mailpit.axllent.org/), an email testing tool. All emails sent by the application will be captured and viewable at [http://localhost:8025](http://localhost:8025). No emails will actually be sent to real addresses during development.
|
||||
</Tip>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step title="Run Database Migrations">
|
||||
@@ -122,32 +120,33 @@ Here are the most commonly used scripts during development:
|
||||
|
||||
### Development
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `pnpm run dev` | Start the development server with hot reload |
|
||||
| `pnpm run build` | Build the application for production |
|
||||
| `pnpm run start` | Start the production server |
|
||||
| `pnpm run lint` | Run Biome linter and formatter |
|
||||
| `pnpm run typecheck` | Run TypeScript type checking |
|
||||
| Command | Description |
|
||||
| -------------------- | -------------------------------------------- |
|
||||
| `pnpm run dev` | Start the development server with hot reload |
|
||||
| `pnpm run build` | Build the application for production |
|
||||
| `pnpm run start` | Start the production server |
|
||||
| `pnpm run lint` | Run Oxlint linter and formatter |
|
||||
| `pnpm run fmt` | Run Oxfmt formatter |
|
||||
| `pnpm run typecheck` | Run TypeScript type checking |
|
||||
|
||||
### Database
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| Command | Description |
|
||||
| ---------------------- | -------------------------------------------- |
|
||||
| `pnpm run db:generate` | Generate migration files from schema changes |
|
||||
| `pnpm run db:migrate` | Apply pending migrations |
|
||||
| `pnpm run db:studio` | Open Drizzle Studio (database GUI) |
|
||||
| `pnpm run db:migrate` | Apply pending migrations |
|
||||
| `pnpm run db:studio` | Open Drizzle Studio (database GUI) |
|
||||
|
||||
### Internationalization
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| Command | Description |
|
||||
| ------------------------- | -------------------------------------- |
|
||||
| `pnpm run lingui:extract` | Extract translatable strings from code |
|
||||
|
||||
### Documentation
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| Command | Description |
|
||||
| ------------------- | ------------------------------------------ |
|
||||
| `pnpm run docs:dev` | Start the Mintlify docs development server |
|
||||
|
||||
---
|
||||
@@ -210,9 +209,7 @@ This opens a web-based GUI at [https://local.drizzle.studio](https://local.drizz
|
||||
pnpm run db:migrate
|
||||
```
|
||||
|
||||
<Warning>
|
||||
Always review generated migrations before applying them, especially when working with existing data.
|
||||
</Warning>
|
||||
<Warning>Always review generated migrations before applying them, especially when working with existing data.</Warning>
|
||||
|
||||
---
|
||||
|
||||
@@ -232,7 +229,7 @@ import { Trans } from "@lingui/react/macro";
|
||||
const message = t`Hello, World!`;
|
||||
|
||||
// For JSX content
|
||||
<Trans>Welcome to Reactive Resume</Trans>
|
||||
<Trans>Welcome to Reactive Resume</Trans>;
|
||||
```
|
||||
|
||||
### Extracting Translations
|
||||
@@ -251,11 +248,12 @@ Translation files are located in the `locales/` directory in `.po` format.
|
||||
|
||||
### Linting & Formatting
|
||||
|
||||
Uses [Biome](https://biomejs.dev/) for linting and formatting:
|
||||
Uses [Oxlint](https://oxlint.dev/) for linting and [Oxfmt](https://oxfmt.dev/) for formatting:
|
||||
|
||||
```bash
|
||||
# Check and auto-fix issues
|
||||
pnpm run lint
|
||||
pnpm run fmt
|
||||
```
|
||||
|
||||
### Type Checking
|
||||
@@ -267,7 +265,9 @@ pnpm run typecheck
|
||||
```
|
||||
|
||||
<Tip>
|
||||
Configure your IDE to use Biome for automatic formatting on save. For VS Code, install the [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome).
|
||||
Configure your IDE to use Oxlint for automatic linting and Oxfmt for automatic formatting on save. For VS Code,
|
||||
install the [Oxlint extension](https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode) and configure the
|
||||
settings in `.vscode/settings.json`.
|
||||
</Tip>
|
||||
|
||||
---
|
||||
@@ -275,53 +275,27 @@ pnpm run typecheck
|
||||
## Troubleshooting
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Port 3000 is already in use">
|
||||
Another process is using port 3000. Either stop that process or start the dev server on a different port:
|
||||
|
||||
```bash
|
||||
PORT=3001 pnpm run dev
|
||||
```
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Database connection refused">
|
||||
Ensure Docker containers are running:
|
||||
|
||||
```bash
|
||||
docker compose -f compose.dev.yml ps
|
||||
docker compose -f compose.dev.yml up -d
|
||||
```
|
||||
|
||||
Check that PostgreSQL is healthy and accessible on port 5432.
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="S3/Storage errors">
|
||||
Verify SeaweedFS is running and the bucket exists:
|
||||
|
||||
```bash
|
||||
docker compose -f compose.dev.yml logs seaweedfs
|
||||
docker compose -f compose.dev.yml logs seaweedfs_create_bucket
|
||||
```
|
||||
|
||||
If the bucket wasn't created, restart the bucket creation service:
|
||||
|
||||
```bash
|
||||
docker compose -f compose.dev.yml restart seaweedfs_create_bucket
|
||||
```
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Type errors after pulling changes">
|
||||
The route tree may need regeneration. Run the dev server which auto-generates routes:
|
||||
|
||||
```bash
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
Or run type checking to see specific errors:
|
||||
|
||||
```bash
|
||||
pnpm run typecheck
|
||||
```
|
||||
</Accordion>
|
||||
<Accordion title="Port 3000 is already in use">
|
||||
Another process is using port 3000. Either stop that process or start the dev server on a different port: ```bash
|
||||
PORT=3001 pnpm run dev ```
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Database connection refused">
|
||||
Ensure Docker containers are running: ```bash docker compose -f compose.dev.yml ps docker compose -f compose.dev.yml
|
||||
up -d ``` Check that PostgreSQL is healthy and accessible on port 5432.
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="S3/Storage errors">
|
||||
Verify SeaweedFS is running and the bucket exists: ```bash docker compose -f compose.dev.yml logs seaweedfs docker
|
||||
compose -f compose.dev.yml logs seaweedfs_create_bucket ``` If the bucket wasn't created, restart the bucket
|
||||
creation service: ```bash docker compose -f compose.dev.yml restart seaweedfs_create_bucket ```
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Type errors after pulling changes">
|
||||
The route tree may need regeneration. Run the dev server which auto-generates routes: ```bash pnpm run dev ``` Or
|
||||
run type checking to see specific errors: ```bash pnpm run typecheck ```
|
||||
</Accordion>
|
||||
|
||||
</AccordionGroup>
|
||||
|
||||
---
|
||||
@@ -329,18 +303,10 @@ pnpm run typecheck
|
||||
## Next Steps
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card
|
||||
title="Project Architecture"
|
||||
icon="folder-open"
|
||||
href="/contributing/architecture"
|
||||
>
|
||||
Deep dive into the project architecture and codebase structure.
|
||||
</Card>
|
||||
<Card
|
||||
title="GitHub Repository"
|
||||
icon="github"
|
||||
href="https://github.com/amruthpillai/reactive-resume"
|
||||
>
|
||||
View the source code and contribute to the project.
|
||||
</Card>
|
||||
<Card title="Project Architecture" icon="folder-open" href="/contributing/architecture">
|
||||
Deep dive into the project architecture and codebase structure.
|
||||
</Card>
|
||||
<Card title="GitHub Repository" icon="github" href="https://github.com/amruthpillai/reactive-resume">
|
||||
View the source code and contribute to the project.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -12,7 +12,8 @@ Reactive Resume is used by people all around the world, and translations help ma
|
||||
Reactive Resume uses [Crowdin](https://crowdin.com/) as its localization management platform. Crowdin provides a user-friendly interface where translators can contribute translations without needing to write code or work with files directly.
|
||||
|
||||
<Info>
|
||||
The Reactive Resume Crowdin project is available at [https://crowdin.com/project/reactive-resume](https://crowdin.com/project/reactive-resume).
|
||||
The Reactive Resume Crowdin project is available at
|
||||
[https://crowdin.com/project/reactive-resume](https://crowdin.com/project/reactive-resume).
|
||||
</Info>
|
||||
|
||||
Once translations are submitted and approved on Crowdin, they are automatically synced to the codebase and will be available in the next release of the app.
|
||||
@@ -22,33 +23,36 @@ Once translations are submitted and approved on Crowdin, they are automatically
|
||||
## Getting Started
|
||||
|
||||
<Steps>
|
||||
<Step title="Create a Crowdin Account">
|
||||
If you don't already have an account, sign up at [crowdin.com](https://crowdin.com/). You can register using your email or sign up with Google, Facebook, Twitter, GitHub, or GitLab.
|
||||
|
||||
<Tip>
|
||||
For detailed instructions on creating an account and getting started, see Crowdin's official [For Translators](https://support.crowdin.com/for-translators/) documentation.
|
||||
</Tip>
|
||||
</Step>
|
||||
|
||||
<Step title="Join the Reactive Resume Project">
|
||||
Navigate to the [Reactive Resume project on Crowdin](https://crowdin.com/project/reactive-resume) and click **Join** to become a contributor.
|
||||
</Step>
|
||||
|
||||
<Step title="Select Your Language">
|
||||
From the project dashboard, click on the language you want to translate. You'll see a list of files that need translation along with the progress for each.
|
||||
</Step>
|
||||
|
||||
<Step title="Start Translating">
|
||||
Click on a file to open the Crowdin Editor. You'll see the source text (English) on the left and a text field for your translation on the right.
|
||||
|
||||
- Translate the text accurately while preserving any placeholders or formatting
|
||||
- Use the suggestions from Translation Memory and Machine Translation as a starting point
|
||||
- Vote on existing translations if you agree with them
|
||||
</Step>
|
||||
|
||||
<Step title="Save Your Translations">
|
||||
Your translations are saved automatically as you work. Once reviewed, they'll be included in the next app release.
|
||||
</Step>
|
||||
<Step title="Create a Crowdin Account">
|
||||
If you don't already have an account, sign up at [crowdin.com](https://crowdin.com/). You can register using your
|
||||
email or sign up with Google, Facebook, Twitter, GitHub, or GitLab.
|
||||
<Tip>
|
||||
For detailed instructions on creating an account and getting started, see Crowdin's official [For
|
||||
Translators](https://support.crowdin.com/for-translators/) documentation.
|
||||
</Tip>
|
||||
</Step>
|
||||
|
||||
<Step title="Join the Reactive Resume Project">
|
||||
Navigate to the [Reactive Resume project on Crowdin](https://crowdin.com/project/reactive-resume) and click **Join**
|
||||
to become a contributor.
|
||||
</Step>
|
||||
|
||||
<Step title="Select Your Language">
|
||||
From the project dashboard, click on the language you want to translate. You'll see a list of files that need
|
||||
translation along with the progress for each.
|
||||
</Step>
|
||||
|
||||
<Step title="Start Translating">
|
||||
Click on a file to open the Crowdin Editor. You'll see the source text (English) on the left and a text field for
|
||||
your translation on the right. - Translate the text accurately while preserving any placeholders or formatting - Use
|
||||
the suggestions from Translation Memory and Machine Translation as a starting point - Vote on existing translations
|
||||
if you agree with them
|
||||
</Step>
|
||||
|
||||
<Step title="Save Your Translations">
|
||||
Your translations are saved automatically as you work. Once reviewed, they'll be included in the next app release.
|
||||
</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
---
|
||||
@@ -90,7 +94,8 @@ Some technical terms (like "PDF", "URL", "JSON") are often kept in English acros
|
||||
If your language is not listed in the Crowdin project, you can request it to be added.
|
||||
|
||||
<Warning>
|
||||
Before requesting a new language, please check if it's already available in the [Crowdin project](https://crowdin.com/project/reactive-resume).
|
||||
Before requesting a new language, please check if it's already available in the [Crowdin
|
||||
project](https://crowdin.com/project/reactive-resume).
|
||||
</Warning>
|
||||
|
||||
To request a new language:
|
||||
@@ -110,7 +115,8 @@ Once approved, the language will be added to Crowdin and you can begin translati
|
||||
Translations submitted on Crowdin are synced to the codebase periodically. Once merged, they will be included in the next release of Reactive Resume.
|
||||
|
||||
<Info>
|
||||
There may be a delay between submitting translations and seeing them live in the app. This is normal and depends on the release cycle.
|
||||
There may be a delay between submitting translations and seeing them live in the app. This is normal and depends on
|
||||
the release cycle.
|
||||
</Info>
|
||||
|
||||
---
|
||||
@@ -118,18 +124,18 @@ Translations submitted on Crowdin are synced to the codebase periodically. Once
|
||||
## Tips for Effective Translation
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Use Context" icon="eye">
|
||||
Crowdin often shows context, screenshots, or comments to help you understand where the text appears in the app.
|
||||
</Card>
|
||||
<Card title="Check Existing Translations" icon="check">
|
||||
Review translations by other contributors and vote for accurate ones to help maintain quality.
|
||||
</Card>
|
||||
<Card title="Ask Questions" icon="comment">
|
||||
Use Crowdin's comment feature to ask about unclear strings or discuss translations with other contributors.
|
||||
</Card>
|
||||
<Card title="Stay Consistent" icon="book">
|
||||
Check the project glossary (if available) to ensure terminology is used consistently across the app.
|
||||
</Card>
|
||||
<Card title="Use Context" icon="eye">
|
||||
Crowdin often shows context, screenshots, or comments to help you understand where the text appears in the app.
|
||||
</Card>
|
||||
<Card title="Check Existing Translations" icon="check">
|
||||
Review translations by other contributors and vote for accurate ones to help maintain quality.
|
||||
</Card>
|
||||
<Card title="Ask Questions" icon="comment">
|
||||
Use Crowdin's comment feature to ask about unclear strings or discuss translations with other contributors.
|
||||
</Card>
|
||||
<Card title="Stay Consistent" icon="book">
|
||||
Check the project glossary (if available) to ensure terminology is used consistently across the app.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
---
|
||||
@@ -137,20 +143,12 @@ Translations submitted on Crowdin are synced to the codebase periodically. Once
|
||||
## Need Help?
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card
|
||||
icon="book-open"
|
||||
title="Crowdin Translator Docs"
|
||||
href="https://support.crowdin.com/for-translators/"
|
||||
>
|
||||
Official Crowdin documentation for translators.
|
||||
</Card>
|
||||
<Card
|
||||
icon="github"
|
||||
title="GitHub Issues"
|
||||
href="https://github.com/amruthpillai/reactive-resume/issues"
|
||||
>
|
||||
Report issues or request new languages.
|
||||
</Card>
|
||||
<Card icon="book-open" title="Crowdin Translator Docs" href="https://support.crowdin.com/for-translators/">
|
||||
Official Crowdin documentation for translators.
|
||||
</Card>
|
||||
<Card icon="github" title="GitHub Issues" href="https://github.com/amruthpillai/reactive-resume/issues">
|
||||
Report issues or request new languages.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user