├── public
    ├── robots.txt
    └── favicon.ico
├── .prettierrc
├── server
    ├── tsconfig.json
    ├── database
    │   ├── migrations
    │   │   ├── 0000_sad_alice.sql
    │   │   └── meta
    │   │   │   ├── _journal.json
    │   │   │   └── 0000_snapshot.json
    │   └── schema.ts
    ├── utils
    │   ├── useDatabase.ts
    │   └── useStreamToBlob.ts
    └── api
    │   ├── audios
    │       └── [id].get.ts
    │   └── generations
    │       ├── index.get.ts
    │       └── index.post.ts
├── app.vue
├── tsconfig.json
├── entities
    └── Generation.ts
├── assets
    └── css
    │   ├── tailwind.css
    │   └── preset.ts
├── pages
    ├── sign-in.vue
    ├── sign-up.vue
    ├── index.vue
    └── generations
    │   ├── index.vue
    │   └── new.vue
├── .gitignore
├── layouts
    ├── admin.vue
    ├── default.vue
    └── auth.vue
├── drizzle.config.ts
├── components
    ├── Onboarding.vue
    ├── Hero.vue
    ├── Header.vue
    └── Generation.vue
├── eslint.config.mjs
├── .env.example
├── tailwind.config.js
├── composables
    ├── useGenerations.ts
    ├── useAudioSignedUrl.ts
    └── useGenerationCreate.ts
├── nuxt.config.ts
├── README.md
└── package.json


/public/robots.txt:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "semi": true
4 | }
5 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <NuxtLayout>
3 |     <NuxtPage />
4 |   </NuxtLayout>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckyhackersacademy/extreme-week2/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/entities/Generation.ts:
--------------------------------------------------------------------------------
1 | export interface Generation {
2 |   id: string;
3 |   userId: string;
4 |   title: string;
5 |   content: string;
6 |   audioId: string;
7 |   createdAt: string;
8 | }


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | @layer tailwind-base, primevue, tailwind-utilities;
 2 | 
 3 | @layer tailwind-base {
 4 |   @tailwind base;
 5 | }
 6 | 
 7 | @layer tailwind-utilities {
 8 |   @tailwind components;
 9 |   @tailwind utilities;
10 | }
11 | 


--------------------------------------------------------------------------------
/pages/sign-in.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SignIn } from 'vue-clerk';
 3 | 
 4 | definePageMeta({
 5 |   layout: 'auth',
 6 | });
 7 | </script>
 8 | 
 9 | <template>
10 |   <SignIn sign-up-url="/sign-up" />
11 | </template>
12 | 


--------------------------------------------------------------------------------
/pages/sign-up.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SignUp } from 'vue-clerk';
 3 | 
 4 | definePageMeta({
 5 |   layout: 'auth',
 6 | });
 7 | </script>
 8 | 
 9 | <template>
10 |   <SignUp sign-in-url="/sign-in" />
11 | </template>
12 | 


--------------------------------------------------------------------------------
/server/database/migrations/0000_sad_alice.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE `generations` (
2 | 	`id` text PRIMARY KEY NOT NULL,
3 | 	`user_id` text NOT NULL,
4 | 	`title` text NOT NULL,
5 | 	`content` text NOT NULL,
6 | 	`audio_id` text NOT NULL,
7 | 	`created_at` integer DEFAULT (CURRENT_DATE) NOT NULL
8 | );
9 | 


--------------------------------------------------------------------------------
/server/database/migrations/meta/_journal.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "7",
 3 |   "dialect": "sqlite",
 4 |   "entries": [
 5 |     {
 6 |       "idx": 0,
 7 |       "version": "6",
 8 |       "when": 1728226081048,
 9 |       "tag": "0000_sad_alice",
10 |       "breakpoints": true
11 |     }
12 |   ]
13 | }


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const router = useRouter();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="w-full h-full">
 7 |     <Hero
 8 |       @register="() => router.push('/sign-up')"
 9 |       @new="() => router.push('/generations/new')"
10 |     />
11 |   </div>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/layouts/admin.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const router = useRouter();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="w-full h-full">
 7 |     <Header
 8 |       @my-generations="() => router.push('/generations')"
 9 |       @new="() => router.push('/generations/new')"
10 |     />
11 |     <slot />
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/drizzle.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'drizzle-kit';
 2 | 
 3 | export default {
 4 |   schema: './server/database/schema.ts',
 5 |   out: './server/database/migrations',
 6 |   driver: 'turso',
 7 |   dialect: 'sqlite',
 8 |   dbCredentials: {
 9 |     url: process.env.TURSO_DB_URL!,
10 |     authToken: process.env.TURSO_DB_TOKEN!,
11 |   },
12 | } satisfies Config;
13 | 


--------------------------------------------------------------------------------
/components/Onboarding.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps<{
 3 |   title: string;
 4 |   guide: string;
 5 | }>();
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div class="flex flex-col gap-2 px-5 py-10 bg-gray-50 rounded-lg">
10 |     <p class="text-2xl font-[700] text-gray-700">{{ props.title }}</p>
11 |     <p class="text-xl text-gray-700">
12 |       {{ props.guide }}
13 |     </p>
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const router = useRouter();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="w-full h-full">
 7 |     <Header
 8 |       @login="() => router.push('/sign-in')"
 9 |       @register="() => router.push('/sign-up')"
10 |       @my-generations="() => router.push('/generations')"
11 |       @new="() => router.push('/generations/new')"
12 |     />
13 |     <slot />
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { createConfigForNuxt } from '@nuxt/eslint-config/flat';
 2 | 
 3 | export default createConfigForNuxt({
 4 |   root: true,
 5 |   env: {
 6 |     browser: true,
 7 |     node: true,
 8 |   },
 9 |   extends: [
10 |     '@nuxtjs/eslint-config-typescript',
11 |     'eslint:recommended',
12 |     'plugin:vue/recommended',
13 |     'plugin:prettier/recommended',
14 |     'plugin:import/typescript',
15 |   ],
16 |   plugins: ['vue']
17 | });
18 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | TURSO_DB_URL=<turso-db-url>
 2 | TURSO_DB_TOKEN=<turso-db-token>
 3 | 
 4 | PINATA_JWT=<pinata-jwt>
 5 | PINATA_GATEWAY_URL=<pinata-gateway-url>
 6 | 
 7 | ELEVENLABS_API_KEY=<elevenlabs-api-key>
 8 | 
 9 | NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<clerk-publishable-key>
10 | NUXT_CLERK_SECRET_KEY=<clerk-secret-key>
11 | 
12 | CLERK_SIGN_IN_FORCE_REDIRECT_URL=http://localhost:3000/generations
13 | CLERK_SIGN_UP_FORCE_REDIRECT_URL=http://localhost:3000/generations
14 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./components/**/*.{js,vue,ts}",
 5 |     "./layouts/**/*.vue",
 6 |     "./pages/**/*.vue",
 7 |     "./plugins/**/*.{js,ts}",
 8 |     "./app.vue",
 9 |     "./error.vue",
10 |   ],
11 |   theme: {
12 |     extend: {
13 |       fontFamily: {
14 |         sans: ['Inter']
15 |       }
16 |     },
17 |   },
18 |   plugins: [require('tailwindcss-primeui')]
19 | }
20 | 
21 | 


--------------------------------------------------------------------------------
/server/database/schema.ts:
--------------------------------------------------------------------------------
 1 | import { sql } from 'drizzle-orm';
 2 | import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
 3 | 
 4 | export const generations = sqliteTable('generations', {
 5 |   id: text('id').primaryKey(),
 6 |   userId: text('user_id').notNull(),
 7 |   title: text('title').notNull(),
 8 |   content: text('content').notNull(),
 9 |   audioId: text('audio_id').notNull(),
10 |   createdAt: integer('created_at', { mode: 'timestamp' })
11 |     .notNull()
12 |     .default(sql`(CURRENT_DATE)`),
13 | });
14 | 


--------------------------------------------------------------------------------
/layouts/auth.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const router = useRouter();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="w-full h-screen flex flex-col gap-4 justify-center items-center">
 7 |     <div class="flex items-center max-w-xl">
 8 |       <Button
 9 |         icon="pi pi-arrow-left"
10 |         severity="secondary"
11 |         size="small"
12 |         label="Voltar"
13 |         aria-label="Voltar"
14 |         @click="() => router.push('/')"
15 |       />
16 |     </div>
17 | 
18 |     <slot />
19 |   </div>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/server/utils/useDatabase.ts:
--------------------------------------------------------------------------------
 1 | import { createClient } from '@libsql/client/http';
 2 | import { drizzle, type LibSQLDatabase } from 'drizzle-orm/libsql';
 3 | 
 4 | export * as tables from '~/server/database/schema';
 5 | 
 6 | let database: LibSQLDatabase | null = null;
 7 | 
 8 | export const useDatabase = () => {
 9 |   const { tursoDBURL, tursoDBToken } = useRuntimeConfig();
10 | 
11 |   if (tursoDBToken && tursoDBURL) {
12 |     database = drizzle(
13 |       createClient({
14 |         url: tursoDBURL,
15 |         authToken: tursoDBToken,
16 |       }),
17 |     );
18 |   }
19 | 
20 |   return database;
21 | };
22 | 


--------------------------------------------------------------------------------
/server/api/audios/[id].get.ts:
--------------------------------------------------------------------------------
 1 | import { PinataSDK } from 'pinata';
 2 | 
 3 | export default eventHandler(async (event) => {
 4 |   const config = useRuntimeConfig();
 5 |   const cid = getRouterParam(event, 'id');
 6 | 
 7 |   if (!cid) {
 8 |     throw createError({
 9 |       statusCode: 400,
10 |       statusMessage: 'Bad Request',
11 |     });
12 |   }
13 | 
14 |   const pinata = new PinataSDK({
15 |     pinataJwt: config.pinataJwt,
16 |     pinataGateway: config.pinataGateway,
17 |   });
18 | 
19 |   const url = await pinata.gateways.createSignedURL({
20 |     cid,
21 |     expires: 3600,
22 |   });
23 | 
24 |   return {
25 |     url,
26 |   };
27 | });
28 | 


--------------------------------------------------------------------------------
/assets/css/preset.ts:
--------------------------------------------------------------------------------
 1 | import { definePreset } from '@primevue/themes';
 2 | import Aura from '@primevue/themes/aura';
 3 | 
 4 | const preset = definePreset(Aura, {
 5 |   semantic: {
 6 |     primary: {
 7 |       50: '{indigo.50}',
 8 |       100: '{indigo.100}',
 9 |       200: '{indigo.200}',
10 |       300: '{indigo.300}',
11 |       400: '{indigo.400}',
12 |       500: '{indigo.500}',
13 |       600: '{indigo.600}',
14 |       700: '{indigo.700}',
15 |       800: '{indigo.800}',
16 |       900: '{indigo.900}',
17 |       950: '{indigo.950}'
18 |     }
19 |   }
20 | });
21 | 
22 | export default {
23 |   preset,
24 |   options: {
25 |     darkModeSelector: '.p-dark'
26 |   }
27 | };
28 | 


--------------------------------------------------------------------------------
/server/utils/useStreamToBlob.ts:
--------------------------------------------------------------------------------
 1 | import { Readable } from 'stream';
 2 | 
 3 | export const useStreamToBlob = () => {
 4 |   const toBlob = async (readableStream: Readable): Promise<Blob> => {
 5 |     const chunks: Buffer[] = [];
 6 | 
 7 |     // Read the stream chunk by chunk
 8 |     for await (const chunk of readableStream) {
 9 |       chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
10 |     }
11 | 
12 |     // Combine all chunks into one Buffer
13 |     const buffer = Buffer.concat(chunks);
14 | 
15 |     // Create a Blob from the Buffer
16 |     const blob = new Blob([buffer], { type: 'audio/mpeg' });
17 | 
18 |     return blob;
19 |   };
20 | 
21 |   return {
22 |     toBlob,
23 |   };
24 | };
25 | 


--------------------------------------------------------------------------------
/server/api/generations/index.get.ts:
--------------------------------------------------------------------------------
 1 | import { getAuth } from '#clerk';
 2 | import { desc, eq } from 'drizzle-orm';
 3 | 
 4 | export default eventHandler(async (event) => {
 5 |   const { userId } = getAuth(event);
 6 |   if (!userId) {
 7 |     throw createError({
 8 |       statusCode: 401,
 9 |       statusMessage: 'Unauthorized',
10 |     });
11 |   }
12 | 
13 |   const db = useDatabase();
14 |   if (!db) {
15 |     throw createError({
16 |       statusCode: 500,
17 |       statusMessage: 'Internal Server Error',
18 |     });
19 |   }
20 | 
21 |   const generations = await db
22 |     .select()
23 |     .from(tables.generations)
24 |     .where(eq(tables.generations.userId, userId))
25 |     .orderBy(desc(tables.generations.createdAt))
26 |     .offset(0)
27 |     .limit(10000);
28 | 
29 |   return generations;
30 | });
31 | 


--------------------------------------------------------------------------------
/composables/useGenerations.ts:
--------------------------------------------------------------------------------
 1 | import type { Generation } from '@/entities/Generation';
 2 | 
 3 | export const useGenerations = () => {
 4 |   const loading = ref<boolean>(true);
 5 |   const generations = ref<Generation[]>([]);
 6 | 
 7 |   const fetchGenerations = async () => {
 8 |     try {
 9 |       const response = await $fetch<Generation[]>('/api/generations');
10 |       generations.value = response;
11 |     } catch (e) {
12 |       console.error(e);
13 |     } finally {
14 |       loading.value = false;
15 |     }
16 |   };
17 | 
18 |   const isEmpty = computed(() => {
19 |     return generations.value.length === 0;
20 |   });
21 | 
22 |   onMounted(() => {
23 |     fetchGenerations();
24 |   });
25 | 
26 |   return {
27 |     loading,
28 |     isEmpty,
29 |     generations,
30 |     refetch: fetchGenerations,
31 |   };
32 | };
33 | 


--------------------------------------------------------------------------------
/composables/useAudioSignedUrl.ts:
--------------------------------------------------------------------------------
 1 | export const useAudioSignedUrl = () => {
 2 |   const loadings = ref<Record<string, boolean>>({});
 3 |   const url = ref<string>();
 4 | 
 5 |   const fetchAudioSignedUrl = async (id: string) => {
 6 |     loadings.value[id] = true;
 7 | 
 8 |     try {
 9 |       const response = await $fetch<{ url: string }>(`/api/audios/${id}`);
10 |       url.value = response.url;
11 |     } catch (e) {
12 |       console.error(e);
13 |     } finally {
14 |       loadings.value[id] = false;
15 |     }
16 |   };
17 | 
18 |   const download = async (title: string) => {
19 |     if (!url.value) {
20 |       return;
21 |     }
22 | 
23 |     const a = document.createElement('a');
24 |     a.href = url.value;
25 |     a.download = `${title}.mp3`;
26 |     a.click();
27 |   };
28 | 
29 |   return {
30 |     loadings,
31 |     download,
32 |     fetchAudioSignedUrl,
33 |   };
34 | };
35 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   compatibilityDate: '2024-04-03',
 4 |   devtools: { enabled: true },
 5 | 
 6 |   css: ['primeicons/primeicons.css'],
 7 | 
 8 |   app: {
 9 |     head: {
10 |       title: '🔈 Lombardi.ai',
11 |     },
12 |   },
13 | 
14 |   modules: [
15 |     '@primevue/nuxt-module',
16 |     '@nuxtjs/tailwindcss',
17 |     '@nuxt/fonts',
18 |     '@vueuse/nuxt',
19 |     'vue-clerk/nuxt',
20 |     '@nuxt/eslint',
21 |   ],
22 | 
23 |   runtimeConfig: {
24 |     tursoDBURL: process.env.TURSO_DB_URL,
25 |     tursoDBToken: process.env.TURSO_DB_TOKEN,
26 | 
27 |     pinataJwt: process.env.PINATA_JWT,
28 |     pinataGateway: process.env.PINATA_GATEWAY_URL,
29 | 
30 |     elevenlabsApiKey: process.env.ELEVENLABS_API_KEY,
31 | 
32 |     nodeEnv: process.env.NODE_ENV,
33 |   },
34 | 
35 |   primevue: {
36 |     importTheme: { from: './assets/css/preset.ts' },
37 |   },
38 | });
39 | 


--------------------------------------------------------------------------------
/composables/useGenerationCreate.ts:
--------------------------------------------------------------------------------
 1 | import type { Generation } from "~/entities/Generation";
 2 | 
 3 | export const useGenerationCreate = () => {
 4 |   const loading = ref<boolean>(false);
 5 |   const generation = ref<Generation>()
 6 | 
 7 |   const title = ref<string>('');
 8 |   const content = ref<string>('');
 9 | 
10 |   const create = async () => {
11 |     if (!title.value || !content.value) {
12 |       return
13 |     }
14 | 
15 |     loading.value = true;
16 | 
17 |     try {
18 | 
19 |       const response = await $fetch<Generation>('/api/generations', {
20 |         method: 'POST',
21 |         body: {
22 |           title: title.value,
23 |           content: content.value,
24 |         }
25 |       })
26 | 
27 |       generation.value = response
28 |     } catch (e) {
29 |       console.error(e)
30 |     } finally {
31 |       loading.value = false;
32 |     }
33 |   }
34 | 
35 |   return {
36 |     loading,
37 |     title,
38 |     content,
39 |     generation,
40 |     create,
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/components/Hero.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const emit = defineEmits<{
 3 |   (e: 'register'): void;
 4 |   (e: 'new'): void;
 5 | }>();
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div
10 |     class="w-full h-[calc(100vh-300px)] text-center px-5 flex flex-col justify-center items-center gap-2"
11 |   >
12 |     <h1 class="text-4xl font-[700] text-gray-700">
13 |       Gere áudios para
14 |       <span class="bg-indigo-500 text-white px-2">promoções em um clique</span>.
15 |     </h1>
16 |     <p class="text-2xl text-gray-700">
17 |       Aumente o faturamento do seu mercado com áudios para promoções <br />
18 |       gerados por inteligência artificial.
19 |     </p>
20 | 
21 |     <!--
22 |       <Button
23 |         class="mt-5"
24 |         label="Nova geração"
25 |         icon="pi pi-plus"
26 |         @click="() => emit('new')"
27 |       />
28 |     -->
29 | 
30 |     <Button
31 |       class="mt-5"
32 |       label="Começar agora"
33 |       icon="pi pi-plus"
34 |       @click="() => emit('register')"
35 |     />
36 |   </div>
37 | </template>
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # `Extreme Week 2`
 2 | 
 3 | Projeto final para a Extreme Week 2!
 4 | 
 5 | ## Usando o boilerplate
 6 | 
 7 | 👉🏻 [Boilerplate nessa branch](https://github.com/luckyhackersacademy/extreme-week2/tree/boilerplate)
 8 | 
 9 | ```
10 | # clone o repo
11 | git clone https://github.com/luckyhackersacademy/extreme-week2.git
12 | 
13 | # entre na pasta
14 | cd extreme-week2
15 | 
16 | # troque para a branch do boilerplate
17 | git checkout boilerplate
18 | ```
19 | 
20 | ## Tech Stack
21 | 
22 | - Nuxt 3
23 | - Clerk
24 | - Pinata
25 | - Turso
26 | - ElevenLabs
27 | - Tailwind
28 | - PrimeVue
29 | 
30 | ## Variavéis de ambiente
31 | 
32 | ```
33 | TURSO_DB_URL=<turso-db-url>
34 | TURSO_DB_TOKEN=<turso-db-token>
35 | 
36 | PINATA_JWT=<pinata-jwt>
37 | PINATA_GATEWAY_URL=<pinata-gateway-url>
38 | 
39 | ELEVENLABS_API_KEY=<elevenlabs-api-key>
40 | 
41 | NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<clerk-publishable-key>
42 | NUXT_CLERK_SECRET_KEY=<clerk-secret-key>
43 | 
44 | CLERK_SIGN_IN_FORCE_REDIRECT_URL=http://localhost:3000/generations
45 | CLERK_SIGN_UP_FORCE_REDIRECT_URL=http://localhost:3000/generations
46 | ```
47 | 
48 | ## Rodando localmente
49 | 
50 | Para rodar o projeto localmente, execute os seguintes comandos:
51 | 
52 | ```bash
53 | pnpm install
54 | pnpm dev
55 | ```
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "dependencies": {
13 |     "@clerk/backend": "^1.13.8",
14 |     "@libsql/client": "^0.14.0",
15 |     "@nuxt/eslint": "^0.5.7",
16 |     "@nuxt/fonts": "^0.9.2",
17 |     "@nuxtjs/tailwindcss": "^6.12.1",
18 |     "@primevue/themes": "^4.0.7",
19 |     "dayjs": "^1.11.13",
20 |     "drizzle-kit": "^0.24.2",
21 |     "drizzle-orm": "^0.33.0",
22 |     "elevenlabs": "^0.16.1",
23 |     "nuxt": "^3.13.0",
24 |     "pinata": "^1.5.0",
25 |     "primeicons": "^7.0.0",
26 |     "primevue": "^4.0.7",
27 |     "tailwindcss-primeui": "^0.3.4",
28 |     "uuid": "^10.0.0",
29 |     "vue": "latest",
30 |     "vue-clerk": "^0.6.17",
31 |     "vue-router": "latest"
32 |   },
33 |   "devDependencies": {
34 |     "@primevue/nuxt-module": "^4.0.7",
35 |     "@types/uuid": "^10.0.0",
36 |     "@vueuse/core": "^11.1.0",
37 |     "@vueuse/nuxt": "^11.1.0",
38 |     "autoprefixer": "^10.4.20",
39 |     "eslint-config-prettier": "^9.1.0",
40 |     "eslint-plugin-prettier": "^5.2.1",
41 |     "postcss": "^8.4.47",
42 |     "prettier": "^3.3.3",
43 |     "tailwindcss": "^3.4.13",
44 |     "typescript": "^5.6.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SignedIn, SignedOut, UserButton } from 'vue-clerk';
 3 | import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 4 | 
 5 | const { smallerOrEqual } = useBreakpoints(breakpointsTailwind);
 6 | const isMobile = smallerOrEqual('md');
 7 | 
 8 | const emit = defineEmits<{
 9 |   (e: 'login'): void;
10 |   (e: 'new'): void;
11 |   (e: 'my-generations'): void;
12 |   (e: 'register'): void;
13 | }>();
14 | </script>
15 | 
16 | <template>
17 |   <header
18 |     class="w-full flex justify-between items-center px-5 py-3 h-20 bg-gray-50"
19 |   >
20 |     <span class="font-[800] text-xl">🔈 Lombardi.ai</span>
21 | 
22 |     <SignedOut>
23 |       <div class="flex items-center gap-2">
24 |         <Button
25 |           label="Entrar"
26 |           severity="secondary"
27 |           @click="() => emit('login')"
28 |         />
29 | 
30 |         <Button
31 |           label="Começar"
32 |           icon="pi pi-plus"
33 |           @click="() => emit('register')"
34 |         />
35 |       </div>
36 |     </SignedOut>
37 | 
38 |     <SignedIn>
39 |       <div class="flex items-center gap-2">
40 |         <Button
41 |           :label="isMobile ? '' : 'Ver gerações'"
42 |           icon="pi pi-volume-up"
43 |           severity="secondary"
44 |           @click="() => emit('my-generations')"
45 |         />
46 |         <Button
47 |           :label="isMobile ? '' : 'Gerar novo áudio'"
48 |           icon="pi pi-plus"
49 |           @click="() => emit('new')"
50 |         />
51 | 
52 |         <UserButton />
53 |       </div>
54 |     </SignedIn>
55 |   </header>
56 | </template>
57 | 


--------------------------------------------------------------------------------
/components/Generation.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Generation } from '@/entities/Generation';
 3 | import dayjs from 'dayjs';
 4 | 
 5 | const props = defineProps<{
 6 |   title: string;
 7 |   content: string;
 8 |   date: string;
 9 |   isDownloading?: boolean;
10 |   audioId: string;
11 | }>();
12 | 
13 | const emit = defineEmits<{
14 |   (e: 'download', generation: Pick<Generation, 'title' | 'audioId'>): void;
15 | }>();
16 | 
17 | const date = computed(() => {
18 |   return dayjs(props.date).format('DD/MM/YYYY');
19 | });
20 | 
21 | const source = computed(() => {
22 |   return props.content;
23 | });
24 | 
25 | const { copy, copied } = useClipboard({ source });
26 | </script>
27 | 
28 | <template>
29 |   <Card>
30 |     <template #title>
31 |       {{ props.title }}
32 |       <span class="text-sm bg-gray-100 p-2 rounded-full">{{ date }}</span>
33 |     </template>
34 |     <template #content>
35 |       <p class="m-0">
36 |         {{ props.content }}
37 |       </p>
38 |     </template>
39 | 
40 |     <template #footer>
41 |       <div class="flex gap-4 mt-1">
42 |         <Button
43 |           :label="copied ? 'Copiado!' : 'Copiar texto'"
44 |           severity="secondary"
45 |           outlined
46 |           :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
47 |           class="w-full"
48 |           @click="() => copy()"
49 |         />
50 |         <Button
51 |           label="Baixar áudio"
52 |           :loading="props.isDownloading"
53 |           icon="pi pi-download"
54 |           class="w-full"
55 |           @click="() => emit('download', props)"
56 |         />
57 |       </div>
58 |     </template>
59 |   </Card>
60 | </template>
61 | 


--------------------------------------------------------------------------------
/server/api/generations/index.post.ts:
--------------------------------------------------------------------------------
 1 | import { v4 } from 'uuid';
 2 | import { getAuth } from '#clerk';
 3 | import { PinataSDK } from 'pinata';
 4 | import { ElevenLabsClient, ElevenLabs } from 'elevenlabs';
 5 | 
 6 | interface Request {
 7 |   title: string;
 8 |   content: string;
 9 | }
10 | 
11 | export default eventHandler(async (event) => {
12 |   const { userId } = getAuth(event);
13 |   if (!userId) {
14 |     throw createError({
15 |       statusCode: 401,
16 |       statusMessage: 'Unauthorized',
17 |     });
18 |   }
19 | 
20 |   const db = useDatabase();
21 |   if (!db) {
22 |     throw createError({
23 |       statusCode: 500,
24 |       statusMessage: 'Internal Server Error',
25 |     });
26 |   }
27 | 
28 |   const { toBlob } = useStreamToBlob();
29 |   const config = useRuntimeConfig();
30 |   const payload = await readBody<Request>(event);
31 |   const id = v4();
32 | 
33 |   const pinata = new PinataSDK({
34 |     pinataJwt: config.pinataJwt,
35 |     pinataGateway: config.pinataGateway,
36 |   });
37 | 
38 |   const elevenLabs = new ElevenLabsClient({
39 |     apiKey: config.elevenlabsApiKey,
40 |   });
41 | 
42 |   const audio = await elevenLabs.generate({
43 |     voice: 'iP95p4xoKVk53GoZ742B',
44 |     text: payload.content,
45 |     output_format: ElevenLabs.OutputFormat.Mp32205032,
46 |     model_id: 'eleven_multilingual_v2',
47 |   });
48 | 
49 |   const blob = await toBlob(audio);
50 |   const file = new File([blob], `${userId}-${id}`, { type: 'audio/mpeg' });
51 |   const upload = await pinata.upload.file(file);
52 | 
53 |   const generation = {
54 |     id,
55 |     userId,
56 |     title: payload.title,
57 |     content: payload.content,
58 |     audioId: upload.cid,
59 |     createdAt: new Date(),
60 |   };
61 | 
62 |   await db.insert(tables.generations).values(generation);
63 | 
64 |   return generation;
65 | });
66 | 


--------------------------------------------------------------------------------
/server/database/migrations/meta/0000_snapshot.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "6",
 3 |   "dialect": "sqlite",
 4 |   "id": "98b48a15-79f5-4291-a28e-65cd6d2fa0ff",
 5 |   "prevId": "00000000-0000-0000-0000-000000000000",
 6 |   "tables": {
 7 |     "generations": {
 8 |       "name": "generations",
 9 |       "columns": {
10 |         "id": {
11 |           "name": "id",
12 |           "type": "text",
13 |           "primaryKey": true,
14 |           "notNull": true,
15 |           "autoincrement": false
16 |         },
17 |         "user_id": {
18 |           "name": "user_id",
19 |           "type": "text",
20 |           "primaryKey": false,
21 |           "notNull": true,
22 |           "autoincrement": false
23 |         },
24 |         "title": {
25 |           "name": "title",
26 |           "type": "text",
27 |           "primaryKey": false,
28 |           "notNull": true,
29 |           "autoincrement": false
30 |         },
31 |         "content": {
32 |           "name": "content",
33 |           "type": "text",
34 |           "primaryKey": false,
35 |           "notNull": true,
36 |           "autoincrement": false
37 |         },
38 |         "audio_id": {
39 |           "name": "audio_id",
40 |           "type": "text",
41 |           "primaryKey": false,
42 |           "notNull": true,
43 |           "autoincrement": false
44 |         },
45 |         "created_at": {
46 |           "name": "created_at",
47 |           "type": "integer",
48 |           "primaryKey": false,
49 |           "notNull": true,
50 |           "autoincrement": false,
51 |           "default": "(CURRENT_DATE)"
52 |         }
53 |       },
54 |       "indexes": {},
55 |       "foreignKeys": {},
56 |       "compositePrimaryKeys": {},
57 |       "uniqueConstraints": {}
58 |     }
59 |   },
60 |   "enums": {},
61 |   "_meta": {
62 |     "schemas": {},
63 |     "tables": {},
64 |     "columns": {}
65 |   },
66 |   "internal": {
67 |     "indexes": {}
68 |   }
69 | }


--------------------------------------------------------------------------------
/pages/generations/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | definePageMeta({
 3 |   layout: 'admin',
 4 |   middleware: ['auth'],
 5 | });
 6 | 
 7 | const { loading, generations, isEmpty } = useGenerations();
 8 | const { loadings, download, fetchAudioSignedUrl } = useAudioSignedUrl();
 9 | 
10 | const handleDownload = async ({
11 |   title,
12 |   audioId,
13 | }: Pick<Generation, 'title' | 'audioId'>) => {
14 |   await fetchAudioSignedUrl(audioId);
15 |   download(title);
16 | };
17 | </script>
18 | 
19 | <template>
20 |   <div class="w-full h-full flex flex-col items-center gap-10 p-5 pb-32">
21 |     <Onboarding
22 |       title="Olá, suas gerações aparecerão aqui!"
23 |       guide="Você pode gerar uma nova pelo botão no topo da página."
24 |       class="w-full max-w-4xl"
25 |     />
26 | 
27 |     <div v-if="loading" class="w-full max-w-4xl flex flex-col gap-2">
28 |       <Skeleton v-for="n in 5" :key="n" height="50px" />
29 |     </div>
30 | 
31 |     <div v-if="isEmpty && !loading" class="w-full max-w-4xl flex gap-2">
32 |       <Card class="w-full h-32 flex justify-center items-center">
33 |         <template #content>
34 |           <p class="text-base text-gray-700">
35 |             <i class="pi pi-exclamation-triangle" />
36 |             Nenhuma geração encontrada.
37 |           </p>
38 |         </template>
39 |       </Card>
40 |     </div>
41 | 
42 |     <div
43 |       v-if="!isEmpty && !loading"
44 |       class="w-full max-w-4xl flex flex-col gap-2"
45 |     >
46 |       <p class="text-base text-gray-700">
47 |         {{ generations.length }} áudios encontrados.
48 |       </p>
49 |       <Generation
50 |         v-for="generation in generations"
51 |         :key="generation.id"
52 |         :title="generation.title"
53 |         :content="generation.content"
54 |         :audio-id="generation.audioId"
55 |         :date="generation.createdAt"
56 |         :is-downloading="loadings[generation.audioId]"
57 |         @download="handleDownload"
58 |       />
59 |     </div>
60 |   </div>
61 | </template>
62 | 


--------------------------------------------------------------------------------
/pages/generations/new.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | definePageMeta({
 3 |   layout: 'admin',
 4 |   middleware: ['auth'],
 5 | });
 6 | 
 7 | const router = useRouter();
 8 | 
 9 | const { title, content, loading, create } = useGenerationCreate();
10 | const placeholder = `Aqui vou deixar um exemplo:
11 | 
12 | Olha a promoção minha gente! Red bull latinha apenas 7 e 99, picanha o kilo apenas 57 e 99
13 | `;
14 | 
15 | const isDisabled = computed(() => !title.value || !content.value);
16 | 
17 | const handleCreate = async () => {
18 |   await create();
19 |   router.push('/generations');
20 | };
21 | </script>
22 | 
23 | <template>
24 |   <div class="w-full h-full flex flex-col items-center gap-10 p-5 pb-32">
25 |     <Onboarding
26 |       title="Vamos criar um novo áudio? 🤩"
27 |       guide="Coloque o texto que deseja gravar e clique em gerar, o resto é com a gente!"
28 |       class="max-w-4xl w-full"
29 |     />
30 | 
31 |     <div class="max-w-4xl w-full flex flex-col gap-10">
32 |       <div class="flex flex-col gap-2">
33 |         <label for="title">Como você gostaria de chamar essa geração?</label>
34 |         <InputText
35 |           id="title"
36 |           v-model="title"
37 |           type="text"
38 |           placeholder="Promoções dos dias dos pais"
39 |         />
40 |       </div>
41 | 
42 |       <div class="flex flex-col gap-2">
43 |         <label for="title">Digite aqui o texto que deseja gravar 👇</label>
44 |         <Textarea
45 |           v-model="content"
46 |           :placeholder="placeholder"
47 |           class="flex-1"
48 |           rows="10"
49 |         />
50 |       </div>
51 | 
52 |       <div class="flex justify-end items-center gap-2">
53 |         <span class="text-gray-400 text-sm flex items-center gap-1">
54 |           😉 Clique aqui quando estiver pronto
55 |           <i class="pi pi-arrow-right size-4" />
56 |         </span>
57 |         <Button
58 |           :disabled="isDisabled"
59 |           :severity="isDisabled ? 'secondary' : 'primary'"
60 |           :loading="loading"
61 |           label="Gerar"
62 |           icon="pi pi-plus"
63 |           @click="handleCreate"
64 |         />
65 |       </div>
66 |     </div>
67 |   </div>
68 | </template>
69 | 


--------------------------------------------------------------------------------