Merge pull request #1 from risv1/rv/refactor/app-layout

Rv/refactor/app layout

.env.example

@@ -1,2 +1 @@
-DB_URL="YOUR_DB_URL"
-JWT_SECRET="YOUR_JWT_SECRET"
+DB_URL="YOUR_DB_URL"

.gitignore

@@ -5,6 +5,8 @@
 .nitro
 .cache
 dist
+*.db
+.drizzle
 
 # Node dependencies
 node_modules

Dockerfile

@@ -0,0 +1,27 @@
+FROM oven/bun:1.0-slim as builder
+
+WORKDIR /app
+
+COPY package.json bun.lockb ./
+
+RUN bun install --frozen-lockfile
+
+COPY . .
+
+RUN bun run build
+
+FROM oven/bun:1.0-slim
+
+WORKDIR /app
+
+COPY --from=builder /app/.output /app/.output
+COPY --from=builder /app/.nuxt /app/.nuxt
+COPY --from=builder /app/package.json /app/package.json
+
+EXPOSE 3000
+
+ENV NODE_ENV=production
+
+CMD ["bun", "run", ".output/server/index.mjs"]
+
+

Makefile

@@ -0,0 +1,20 @@
+run:
+	@bun run dev
+
+build-client:
+	@bun run generate
+	@bunx serve .output/public
+
+build:
+	@bun run build
+	@bun .output/server/index.mjs 
+
+format:
+	@bunx biome format --write ./app ./server
+
+lint:
+	@bunx biome lint --write ./app ./server 
+
+upgrade-deps:
+	@ncu -u
+	@bun i

README.md

@@ -1,20 +1,19 @@
-# Nuxt-Shadcn-Drizzle Starter
+# Nuxt 3 Starter Template
 
-This is a starter project for bootstrapping a Nuxt app with Shadcn-vue and Drizzle ORM, with Pinia for state 
-management.
+A modern Nuxt 3 starter template with Drizzle ORM, Biome, Pinia, Docker, UnoCSS and Bun. This template provides a robust foundation for building full-stack applications with best practices and powerful tools.
 
-## Stack
+## 🚀 Stack
 
-Built using <img src="public/icon-green.png" alt="Nuxt Logo" width="30" height="30"> [Nuxt](https://nuxt.com/), <img src="public/icon-shadcn.png" alt="Shadcn Logo" width="30" height="30"> [Shadcn-vue](https://www.shadcn-vue.com/), <img src="public/icon-drizzle.png" alt="Drizzle Logo" width="30" height="30"> [Drizzle ORM](https://orm.drizzle.team/), <img src="public/icon-tailwind.png" alt="TailwindCSS Logo" width="30" height="30"> [TailwindCSS](https://tailwindcss.com/)
+![Nuxt 3 Starter Template](app/public/images/image.png)
 
-## Setup
+- **[Nuxt 3](https://nuxt.com/)** - The Intuitive Vue Framework
+- **[Bun](https://bun.sh/)** - Fast JavaScript runtime & package manager
+- **[UnoCSS](https://unocss.dev/)** - Instant On-demand Atomic CSS Engine
+- **[Drizzle ORM](https://orm.drizzle.team/)** - TypeScript ORM with powerful migrations
+- **[Biome](https://biomejs.dev/)** - Fast linter and formatter
+- **[Pinia](https://pinia.vuejs.org/)** - Intuitive state management
+- **[Docker](https://www.docker.com/)** - Containerization support
 
-1. Run `pnpm install` to install all dependencies.
-2. Create a .env file, and add `DB_URL`, `JWT_SECRET` respectively.
-3. Setup your preferred SQL database in `database/`, this example uses Postgres
-4. Run `docker compose up -d` if an instance is preferred.
-5. Run `pnpm dev` to start the application
+## 📄 License
 
-## License
-
-Nuxt-Shadcn-Drizzle Starter is licensed under the [MIT License](https://github.com/risv1/nuxt-shadcn-drizzle-starter/blob/main/LICENSE).
+MIT License - feel free to use this template for any project!

app/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="font-satoshi">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

app/components/Counter.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useCount } from "~/store/count";
+const counter = useCount();
+
+const buttons = [
+	{ icon: "ic:baseline-plus", fn: counter.increment },
+	{ icon: "ic:baseline-minus", fn: counter.decrement },
+];
+</script>
+
+<template>
+  <div class="mt-8">
+    <div class="flex flex-col items-center gap-4 dark:text-gray-100 text-gray-900">
+      <p class="text-3xl font-medium">Counter: {{ counter.count }}</p>
+      <div class="flex items-center gap-4">
+        <button v-for="button in buttons" @click="button.fn"
+          class="bg-neutral-800 border-none hover:bg-neutral-700 text-gray-100 px-4 py-2 rounded-lg transition-colors duration-200 flex items-center justify-center group">
+          <Icon :name="button.icon" class="w-6 h-6" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

app/components/Hero.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const icons = [
+	{
+		name: "pinia",
+		iconName: "logos:pinia",
+		label: "Pinia",
+	},
+	{
+		name: "drizzle",
+		iconName: "simple-icons:drizzle",
+		label: "Drizzle ORM",
+	},
+	{
+		name: "biome",
+		iconName: "devicon:biome",
+		label: "Biome",
+	},
+	{
+		name: "docker",
+		iconName: "logos:docker-icon",
+		label: "Docker",
+	},
+	{
+		name: "bun",
+		iconName: "devicon:bun",
+		label: "Bun",
+	},
+	{
+		name: "unocss",
+		iconName: "logos:unocss",
+		label: "UnoCSS",
+	},
+];
+</script>
+
+<template>
+    <section class="bg-inherit w-full h-full justify-center overflow-auto items-center flex flex-col">
+        <div class="max-w-6xl mx-auto flex flex-col items-center">
+            <div class="flex flex-col items-center gap-4 ">
+                <Icon name="mdi:nuxt" class="text-green-500 w-16 h-16" />
+                <h1 class="dark:text-gray-100 text-gray-900 text-4xl font-bold">Nuxt Starter</h1>
+            </div>
+            <div class="grid grid-cols-1 text-gray-900 dark:text-gray-100 md:grid-cols-3 gap-4 w-full max-w-4xl">
+                <div v-for="icon in icons"
+                    class="dark:bg-neutral-800/50 bg-gray-100 p-6 rounded-xl border-2 border-neutral-700/50 hover:border-green-500">
+                    <div class="flex flex-col items-center gap-3">
+                        <Icon :name="icon.iconName" :class="icon.name == 'drizzle' ? 'text-yellow-400' : ''"
+                            class="w-12 h-12 group-hover:scale-110" />
+                        <span class="font-medium">{{ icon.label }}</span>
+                    </div>
+                </div>
+                <div
+                    class="md:col-span-3 dark:bg-neutral-800/50 bg-gray-100 p-6 rounded-xl border-2 border-neutral-700/50 hover:border-green-500">
+                    <div class="flex flex-col items-center gap-3">
+                        <Icon name="mdi:nuxt"
+                            class="w-12 h-12 text-green-500 group-hover:scale-110 transition-transform" />
+                        <span class="font-medium">Nuxt 3</span>
+                    </div>
+                </div>
+            </div>
+            <Counter />
+        </div>
+    </section>
+</template>

app/components/Theme.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const colorMode = useColorMode({
+	modes: {
+		light: "light",
+		dark: "dark",
+	},
+});
+const isDark = useState("isDark", () => true);
+
+const toggleColorMode = () => {
+	colorMode.value = colorMode.value === "light" ? "dark" : "light";
+	isDark.value = !isDark.value;
+};
+
+onMounted(() => {
+	isDark.value = colorMode.value === "dark";
+});
+</script>
+
+<template>
+    <button @click="toggleColorMode" class="p-2 bg-inherit border-none">
+        <Icon name="solar:moon-bold" v-if="isDark" class="p-1 text-white" />
+        <Icon name="solar:sun-bold" v-else  class="p-1 text-black" />
+    </button>
+</template>

app/pages/auth.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const isLogin = ref(true);
+
+const toggleType = () => {
+	isLogin.value = !isLogin.value;
+};
+
+const toggleText = computed(() =>
+	isLogin.value
+		? "Already have an account? Login here!"
+		: "Don't have an account? Sign up here!",
+);
+</script>
+
+<template>
+    <main class="w-screen h-screen flex justify-center items-center">
+        <AuthForm :text="toggleText" toggle="toggleType" :isLogin="isLogin" />
+    </main>
+</template>

app/pages/index.vue

@@ -0,0 +1,8 @@
+<template>
+    <main class="w-screen h-screen dark:bg-neutral-900 bg-white">
+        <div class="fixed top-5 right-5">
+            <Theme />
+        </div>
+        <Hero />
+    </main>
+</template>

app/store/count.ts

@@ -0,0 +1,13 @@
+export const useCount = defineStore({
+	id: "count",
+	state: () => ({ count: 0 }),
+	actions: {
+		increment() {
+			this.count++;
+		},
+		decrement() {
+			this.count--;
+		},
+	},
+	persist: true,
+});

biome.json

@@ -0,0 +1,30 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": []
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	}
+}