AshameTheDestroyer commited on
Commit
d27060c
·
0 Parent(s):

Initial commit from create-react-router

Browse files
.dockerignore ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ .react-router
2
+ build
3
+ node_modules
4
+ README.md
.gitignore ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ .DS_Store
2
+ .env
3
+ /node_modules/
4
+
5
+ # React Router
6
+ /.react-router/
7
+ /build/
Dockerfile ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ FROM node:20-alpine AS development-dependencies-env
2
+ COPY . /app
3
+ WORKDIR /app
4
+ RUN npm ci
5
+
6
+ FROM node:20-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:20-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:20-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"]
README.md ADDED
@@ -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.
app/app.css ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import "tailwindcss";
2
+
3
+ @theme {
4
+ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
5
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
6
+ }
7
+
8
+ html,
9
+ body {
10
+ @apply bg-white dark:bg-gray-950;
11
+
12
+ @media (prefers-color-scheme: dark) {
13
+ color-scheme: dark;
14
+ }
15
+ }
app/root.tsx ADDED
@@ -0,0 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ isRouteErrorResponse,
3
+ Links,
4
+ Meta,
5
+ Outlet,
6
+ Scripts,
7
+ ScrollRestoration,
8
+ } from "react-router";
9
+
10
+ import type { Route } from "./+types/root";
11
+ import "./app.css";
12
+
13
+ export const links: Route.LinksFunction = () => [
14
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
15
+ {
16
+ rel: "preconnect",
17
+ href: "https://fonts.gstatic.com",
18
+ crossOrigin: "anonymous",
19
+ },
20
+ {
21
+ rel: "stylesheet",
22
+ href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
23
+ },
24
+ ];
25
+
26
+ export function Layout({ children }: { children: React.ReactNode }) {
27
+ return (
28
+ <html lang="en">
29
+ <head>
30
+ <meta charSet="utf-8" />
31
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
32
+ <Meta />
33
+ <Links />
34
+ </head>
35
+ <body>
36
+ {children}
37
+ <ScrollRestoration />
38
+ <Scripts />
39
+ </body>
40
+ </html>
41
+ );
42
+ }
43
+
44
+ export default function App() {
45
+ return <Outlet />;
46
+ }
47
+
48
+ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
49
+ let message = "Oops!";
50
+ let details = "An unexpected error occurred.";
51
+ let stack: string | undefined;
52
+
53
+ if (isRouteErrorResponse(error)) {
54
+ message = error.status === 404 ? "404" : "Error";
55
+ details =
56
+ error.status === 404
57
+ ? "The requested page could not be found."
58
+ : error.statusText || details;
59
+ } else if (import.meta.env.DEV && error && error instanceof Error) {
60
+ details = error.message;
61
+ stack = error.stack;
62
+ }
63
+
64
+ return (
65
+ <main className="pt-16 p-4 container mx-auto">
66
+ <h1>{message}</h1>
67
+ <p>{details}</p>
68
+ {stack && (
69
+ <pre className="w-full p-4 overflow-x-auto">
70
+ <code>{stack}</code>
71
+ </pre>
72
+ )}
73
+ </main>
74
+ );
75
+ }
app/routes.ts ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ import { type RouteConfig, index } from "@react-router/dev/routes";
2
+
3
+ export default [index("routes/home.tsx")] satisfies RouteConfig;
app/routes/home.tsx ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import type { Route } from "./+types/home";
2
+ import { Welcome } from "../welcome/welcome";
3
+
4
+ export function meta({}: Route.MetaArgs) {
5
+ return [
6
+ { title: "New React Router App" },
7
+ { name: "description", content: "Welcome to React Router!" },
8
+ ];
9
+ }
10
+
11
+ export default function Home() {
12
+ return <Welcome />;
13
+ }
app/welcome/logo-dark.svg ADDED
app/welcome/logo-light.svg ADDED
app/welcome/welcome.tsx ADDED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import logoDark from "./logo-dark.svg";
2
+ import logoLight from "./logo-light.svg";
3
+
4
+ export function Welcome() {
5
+ return (
6
+ <main className="flex items-center justify-center pt-16 pb-4">
7
+ <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
8
+ <header className="flex flex-col items-center gap-9">
9
+ <div className="w-[500px] max-w-[100vw] p-4">
10
+ <img
11
+ src={logoLight}
12
+ alt="React Router"
13
+ className="block w-full dark:hidden"
14
+ />
15
+ <img
16
+ src={logoDark}
17
+ alt="React Router"
18
+ className="hidden w-full dark:block"
19
+ />
20
+ </div>
21
+ </header>
22
+ <div className="max-w-[300px] w-full space-y-6 px-4">
23
+ <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
24
+ <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
25
+ What&apos;s next?
26
+ </p>
27
+ <ul>
28
+ {resources.map(({ href, text, icon }) => (
29
+ <li key={href}>
30
+ <a
31
+ className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
32
+ href={href}
33
+ target="_blank"
34
+ rel="noreferrer"
35
+ >
36
+ {icon}
37
+ {text}
38
+ </a>
39
+ </li>
40
+ ))}
41
+ </ul>
42
+ </nav>
43
+ </div>
44
+ </div>
45
+ </main>
46
+ );
47
+ }
48
+
49
+ const resources = [
50
+ {
51
+ href: "https://reactrouter.com/docs",
52
+ text: "React Router Docs",
53
+ icon: (
54
+ <svg
55
+ xmlns="http://www.w3.org/2000/svg"
56
+ width="24"
57
+ height="20"
58
+ viewBox="0 0 20 20"
59
+ fill="none"
60
+ className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
61
+ >
62
+ <path
63
+ d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.951405 4.11091 2.53116 2.53116C4.11091 0.951405 8.73546 3.01467 12.8604 7.13958C16.9853 11.2645 19.0485 15.889 17.4688 17.4688ZM2.53132 17.4688C0.951566 15.8891 3.01483 11.2645 7.13974 7.13963C11.2647 3.01471 15.8892 0.951453 17.469 2.53121C19.0487 4.11096 16.9854 8.73551 12.8605 12.8604C8.73562 16.9853 4.11107 19.0486 2.53132 17.4688Z"
64
+ strokeWidth="1.5"
65
+ strokeLinecap="round"
66
+ />
67
+ </svg>
68
+ ),
69
+ },
70
+ {
71
+ href: "https://rmx.as/discord",
72
+ text: "Join Discord",
73
+ icon: (
74
+ <svg
75
+ xmlns="http://www.w3.org/2000/svg"
76
+ width="24"
77
+ height="20"
78
+ viewBox="0 0 24 20"
79
+ fill="none"
80
+ className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
81
+ >
82
+ <path
83
+ d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z"
84
+ strokeWidth="1.5"
85
+ />
86
+ </svg>
87
+ ),
88
+ },
89
+ ];
package-lock.json ADDED
The diff for this file is too large to render. See raw diff
 
package.json ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "talent-technical-evaluation",
3
+ "private": true,
4
+ "type": "module",
5
+ "scripts": {
6
+ "build": "react-router build",
7
+ "dev": "react-router dev",
8
+ "start": "react-router-serve ./build/server/index.js",
9
+ "typecheck": "react-router typegen && tsc"
10
+ },
11
+ "dependencies": {
12
+ "@react-router/node": "7.12.0",
13
+ "@react-router/serve": "7.12.0",
14
+ "isbot": "^5.1.31",
15
+ "react": "^19.2.4",
16
+ "react-dom": "^19.2.4",
17
+ "react-router": "7.12.0"
18
+ },
19
+ "devDependencies": {
20
+ "@react-router/dev": "7.12.0",
21
+ "@tailwindcss/vite": "^4.1.13",
22
+ "@types/node": "^22",
23
+ "@types/react": "^19.2.7",
24
+ "@types/react-dom": "^19.2.3",
25
+ "tailwindcss": "^4.1.13",
26
+ "typescript": "^5.9.2",
27
+ "vite": "^7.1.7",
28
+ "vite-tsconfig-paths": "^5.1.4"
29
+ }
30
+ }
react-router.config.ts ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ import type { Config } from "@react-router/dev/config";
2
+
3
+ export default {
4
+ // Config options...
5
+ // Server-side render by default, to enable SPA mode set this to `false`
6
+ ssr: true,
7
+ } satisfies Config;
tsconfig.json ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "include": [
3
+ "**/*",
4
+ "**/.server/**/*",
5
+ "**/.client/**/*",
6
+ ".react-router/types/**/*"
7
+ ],
8
+ "compilerOptions": {
9
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
10
+ "types": ["node", "vite/client"],
11
+ "target": "ES2022",
12
+ "module": "ES2022",
13
+ "moduleResolution": "bundler",
14
+ "jsx": "react-jsx",
15
+ "rootDirs": [".", "./.react-router/types"],
16
+ "baseUrl": ".",
17
+ "paths": {
18
+ "~/*": ["./app/*"]
19
+ },
20
+ "esModuleInterop": true,
21
+ "verbatimModuleSyntax": true,
22
+ "noEmit": true,
23
+ "resolveJsonModule": true,
24
+ "skipLibCheck": true,
25
+ "strict": true
26
+ }
27
+ }
vite.config.ts ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ import { reactRouter } from "@react-router/dev/vite";
2
+ import tailwindcss from "@tailwindcss/vite";
3
+ import { defineConfig } from "vite";
4
+ import tsconfigPaths from "vite-tsconfig-paths";
5
+
6
+ export default defineConfig({
7
+ plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
8
+ });