diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c08251c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+.env
+.react-router
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..fae8e3d
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/README.md b/README.md
index 1524532..08a5fb4 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,40 @@
-# asdasd
\ No newline at end of file
+# Welcome to React Router!
+
+- 📖 [React Router docs](https://reactrouter.com/dev)
+
+## Development
+
+Run the dev server:
+
+```shellscript
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+- `build/server`
+- `build/client`
+
+## Styling
+
+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.
diff --git a/app/app.css b/app/app.css
new file mode 100644
index 0000000..303fe15
--- /dev/null
+++ b/app/app.css
@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+ @apply bg-white dark:bg-gray-950;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
diff --git a/app/root.tsx b/app/root.tsx
new file mode 100644
index 0000000..808d429
--- /dev/null
+++ b/app/root.tsx
@@ -0,0 +1,39 @@
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import type { LinksFunction } from "react-router";
+
+import "./app.css";
+
+export const links: LinksFunction = () => [
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
+ {
+ rel: "preconnect",
+ href: "https://fonts.gstatic.com",
+ crossOrigin: "anonymous",
+ },
+ {
+ rel: "stylesheet",
+ href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+ },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
+
+export default function App() {
+ return ;
+}
diff --git a/app/routes.ts b/app/routes.ts
new file mode 100644
index 0000000..906cf68
--- /dev/null
+++ b/app/routes.ts
@@ -0,0 +1,4 @@
+import type { RouteConfig } from "@react-router/dev/routes";
+import { index } from "@react-router/dev/routes";
+
+export const routes: RouteConfig = [index("routes/home.tsx")];
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
new file mode 100644
index 0000000..7bf87bc
--- /dev/null
+++ b/app/routes/home.tsx
@@ -0,0 +1,96 @@
+import type { MetaFunction } from "react-router";
+
+export const meta: MetaFunction = () => {
+ return [
+ { title: "New React Router App" },
+ { name: "description", content: "Welcome to React Router!" },
+ ];
+};
+
+export default function Index() {
+ return (
+
+
+
+
+ Welcome to React Router
+
+
+
+
+
+
+
+