mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-27 10:24:48 +10:00
use vite+
This commit is contained in:
Amruth Pillai
@@ -12,14 +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>
|
||||
|
||||
---
|
||||
@@ -183,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
|
||||
});
|
||||
```
|
||||
|
||||
@@ -206,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>;
|
||||
};
|
||||
```
|
||||
|
||||
@@ -226,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>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -246,9 +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}!` };
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
@@ -313,10 +313,10 @@ const title = t`Welcome`;
|
||||
## 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,8 +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.
|
||||
@@ -265,9 +265,9 @@ pnpm run typecheck
|
||||
```
|
||||
|
||||
<Tip>
|
||||
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`.
|
||||
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>
|
||||
|
||||
---
|
||||
@@ -303,10 +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,8 +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.
|
||||
@@ -94,8 +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:
|
||||
@@ -115,8 +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>
|
||||
|
||||
---
|
||||
@@ -124,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>
|
||||
|
||||
---
|
||||
@@ -143,12 +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