Skip to content

Commit 6b1c2ac

Browse files
jsbroksjsbroks
committed
init vite repo
1 parent cc1e742 commit 6b1c2ac

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+8410
-1118
lines changed

‎apps/web/.dockerignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.react-router
2+
build
3+
node_modules
4+
README.md

‎apps/web/.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.DS_Store
2+
.env
3+
/node_modules/
4+
5+
# React Router
6+
/.react-router/
7+
/build/

‎apps/web/Dockerfile‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
FROM node:22-alpine AS development-dependencies-env
2+
COPY . /app
3+
WORKDIR /app
4+
RUN npm ci
5+
6+
FROM node:22-alpine AS production-dependencies-env
7+
COPY ./package.json package-lock.json /app/
8+
WORKDIR /app
9+
RUN npm ci --omit=dev
10+
11+
FROM node:22-alpine AS build-env
12+
COPY . /app/
13+
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
14+
WORKDIR /app
15+
RUN npm run build
16+
17+
FROM node:22-alpine
18+
COPY ./package.json package-lock.json /app/
19+
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
20+
COPY --from=build-env /app/build /app/build
21+
WORKDIR /app
22+
CMD ["npm", "run", "start"]

‎apps/web/README.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# Welcome to React Router!
2+
3+
A modern, production-ready template for building full-stack React applications using React Router.
4+
5+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
6+
7+
## Features
8+
9+
- 🚀 Server-side rendering
10+
- ⚡️ Hot Module Replacement (HMR)
11+
- 📦 Asset bundling and optimization
12+
- 🔄 Data loading and mutations
13+
- 🔒 TypeScript by default
14+
- 🎉 TailwindCSS for styling
15+
- 📖 [React Router docs](https://reactrouter.com/)
16+
17+
## Getting Started
18+
19+
### Installation
20+
21+
Install the dependencies:
22+
23+
```bash
24+
npm install
25+
```
26+
27+
### Development
28+
29+
Start the development server with HMR:
30+
31+
```bash
32+
npm run dev
33+
```
34+
35+
Your application will be available at `http://localhost:5173`.
36+
37+
## Building for Production
38+
39+
Create a production build:
40+
41+
```bash
42+
npm run build
43+
```
44+
45+
## Deployment
46+
47+
### Docker Deployment
48+
49+
To build and run using Docker:
50+
51+
```bash
52+
docker build -t my-app .
53+
54+
# Run the container
55+
docker run -p 3000:3000 my-app
56+
```
57+
58+
The containerized application can be deployed to any platform that supports Docker, including:
59+
60+
- AWS ECS
61+
- Google Cloud Run
62+
- Azure Container Apps
63+
- Digital Ocean App Platform
64+
- Fly.io
65+
- Railway
66+
67+
### DIY Deployment
68+
69+
If you're familiar with deploying Node applications, the built-in app server is production-ready.
70+
71+
Make sure to deploy the output of `npm run build`
72+
73+
```
74+
├── package.json
75+
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
76+
├── build/
77+
│ ├── client/ # Static assets
78+
│ └── server/ # Server-side code
79+
```
80+
81+
## Styling
82+
83+
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
84+
85+
---
86+
87+
Built with ❤️ using React Router.

‎apps/web/app/app.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
@import "tailwindcss";
2+
@import "tw-animate-css";
3+
4+
@custom-variant dark (&:is(.dark *));
5+
6+
@theme {
7+
--font-sans:
8+
"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
9+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
10+
}
11+
12+
html,
13+
body {
14+
@apply bg-white dark:bg-gray-950;
15+
16+
@media (prefers-color-scheme: dark) {
17+
color-scheme: dark;
18+
}
19+
}
20+
21+
@theme inline {
22+
--radius-sm: calc(var(--radius) - 4px);
23+
--radius-md: calc(var(--radius) - 2px);
24+
--radius-lg: var(--radius);
25+
--radius-xl: calc(var(--radius) + 4px);
26+
--color-background: var(--background);
27+
--color-foreground: var(--foreground);
28+
--color-card: var(--card);
29+
--color-card-foreground: var(--card-foreground);
30+
--color-popover: var(--popover);
31+
--color-popover-foreground: var(--popover-foreground);
32+
--color-primary: var(--primary);
33+
--color-primary-foreground: var(--primary-foreground);
34+
--color-secondary: var(--secondary);
35+
--color-secondary-foreground: var(--secondary-foreground);
36+
--color-muted: var(--muted);
37+
--color-muted-foreground: var(--muted-foreground);
38+
--color-accent: var(--accent);
39+
--color-accent-foreground: var(--accent-foreground);
40+
--color-destructive: var(--destructive);
41+
--color-border: var(--border);
42+
--color-input: var(--input);
43+
--color-ring: var(--ring);
44+
--color-chart-1: var(--chart-1);
45+
--color-chart-2: var(--chart-2);
46+
--color-chart-3: var(--chart-3);
47+
--color-chart-4: var(--chart-4);
48+
--color-chart-5: var(--chart-5);
49+
--color-sidebar: var(--sidebar);
50+
--color-sidebar-foreground: var(--sidebar-foreground);
51+
--color-sidebar-primary: var(--sidebar-primary);
52+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
53+
--color-sidebar-accent: var(--sidebar-accent);
54+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
55+
--color-sidebar-border: var(--sidebar-border);
56+
--color-sidebar-ring: var(--sidebar-ring);
57+
}
58+
59+
:root {
60+
--radius: 0.625rem;
61+
--background: oklch(1 0 0);
62+
--foreground: oklch(0.145 0 0);
63+
--card: oklch(1 0 0);
64+
--card-foreground: oklch(0.145 0 0);
65+
--popover: oklch(1 0 0);
66+
--popover-foreground: oklch(0.145 0 0);
67+
--primary: oklch(0.205 0 0);
68+
--primary-foreground: oklch(0.985 0 0);
69+
--secondary: oklch(0.97 0 0);
70+
--secondary-foreground: oklch(0.205 0 0);
71+
--muted: oklch(0.97 0 0);
72+
--muted-foreground: oklch(0.556 0 0);
73+
--accent: oklch(0.97 0 0);
74+
--accent-foreground: oklch(0.205 0 0);
75+
--destructive: oklch(0.577 0.245 27.325);
76+
--border: oklch(0.922 0 0);
77+
--input: oklch(0.922 0 0);
78+
--ring: oklch(0.708 0 0);
79+
--chart-1: oklch(0.646 0.222 41.116);
80+
--chart-2: oklch(0.6 0.118 184.704);
81+
--chart-3: oklch(0.398 0.07 227.392);
82+
--chart-4: oklch(0.828 0.189 84.429);
83+
--chart-5: oklch(0.769 0.188 70.08);
84+
--sidebar: oklch(0.985 0 0);
85+
--sidebar-foreground: oklch(0.145 0 0);
86+
--sidebar-primary: oklch(0.205 0 0);
87+
--sidebar-primary-foreground: oklch(0.985 0 0);
88+
--sidebar-accent: oklch(0.97 0 0);
89+
--sidebar-accent-foreground: oklch(0.205 0 0);
90+
--sidebar-border: oklch(0.922 0 0);
91+
--sidebar-ring: oklch(0.708 0 0);
92+
}
93+
94+
.dark {
95+
--background: oklch(0.145 0 0);
96+
--foreground: oklch(0.985 0 0);
97+
--card: oklch(0.205 0 0);
98+
--card-foreground: oklch(0.985 0 0);
99+
--popover: oklch(0.205 0 0);
100+
--popover-foreground: oklch(0.985 0 0);
101+
--primary: oklch(0.922 0 0);
102+
--primary-foreground: oklch(0.205 0 0);
103+
--secondary: oklch(0.269 0 0);
104+
--secondary-foreground: oklch(0.985 0 0);
105+
--muted: oklch(0.269 0 0);
106+
--muted-foreground: oklch(0.708 0 0);
107+
--accent: oklch(0.269 0 0);
108+
--accent-foreground: oklch(0.985 0 0);
109+
--destructive: oklch(0.704 0.191 22.216);
110+
--border: oklch(1 0 0 / 10%);
111+
--input: oklch(1 0 0 / 15%);
112+
--ring: oklch(0.556 0 0);
113+
--chart-1: oklch(0.488 0.243 264.376);
114+
--chart-2: oklch(0.696 0.17 162.48);
115+
--chart-3: oklch(0.769 0.188 70.08);
116+
--chart-4: oklch(0.627 0.265 303.9);
117+
--chart-5: oklch(0.645 0.246 16.439);
118+
--sidebar: oklch(0.205 0 0);
119+
--sidebar-foreground: oklch(0.985 0 0);
120+
--sidebar-primary: oklch(0.488 0.243 264.376);
121+
--sidebar-primary-foreground: oklch(0.985 0 0);
122+
--sidebar-accent: oklch(0.269 0 0);
123+
--sidebar-accent-foreground: oklch(0.985 0 0);
124+
--sidebar-border: oklch(1 0 0 / 10%);
125+
--sidebar-ring: oklch(0.556 0 0);
126+
}
127+
128+
@layer base {
129+
* {
130+
@apply border-border outline-ring/50;
131+
}
132+
body {
133+
@apply bg-background text-foreground;
134+
}
135+
}

‎apps/web/app/components/ui/accordion.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import * as React from "react"
2+
import * as AccordionPrimitive from "@radix-ui/react-accordion"
3+
import { ChevronDownIcon } from "lucide-react"
4+
5+
import { cn } from "~/lib/utils"
6+
7+
function Accordion({
8+
...props
9+
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
10+
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
11+
}
12+
13+
function AccordionItem({
14+
className,
15+
...props
16+
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
17+
return (
18+
<AccordionPrimitive.Item
19+
data-slot="accordion-item"
20+
className={cn("border-b last:border-b-0", className)}
21+
{...props}
22+
/>
23+
)
24+
}
25+
26+
function AccordionTrigger({
27+
className,
28+
children,
29+
...props
30+
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
31+
return (
32+
<AccordionPrimitive.Header className="flex">
33+
<AccordionPrimitive.Trigger
34+
data-slot="accordion-trigger"
35+
className={cn(
36+
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
37+
className
38+
)}
39+
{...props}
40+
>
41+
{children}
42+
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
43+
</AccordionPrimitive.Trigger>
44+
</AccordionPrimitive.Header>
45+
)
46+
}
47+
48+
function AccordionContent({
49+
className,
50+
children,
51+
...props
52+
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
53+
return (
54+
<AccordionPrimitive.Content
55+
data-slot="accordion-content"
56+
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
57+
{...props}
58+
>
59+
<div className={cn("pt-0 pb-4", className)}>{children}</div>
60+
</AccordionPrimitive.Content>
61+
)
62+
}
63+
64+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

0 commit comments

Comments
 (0)