O QR Studio é uma plataforma SaaS (Software as a Service) completa para a criação, gestão e análise de QR Codes dinâmicos. Este projeto vai além de um simples gerador, incorporando funcionalidades como edição de URLs de destino, personalização visual avançada, estatísticas de scan em tempo real e uma futura integração com IA para sugestões inteligentes.

Este projeto é mais do que um simples item de portfóflio; é a minha jornada documentada no desenvolvimento full-stack moderno. O meu objetivo com o QR Studio é demonstrar proficiência técnica e criativa, construindo uma aplicação real do zero, desde a arquitetura do banco de dados até uma interface de utilizador profissional.

Através deste desafio, estou a aprofundar os meus conhecimentos em:

• Arquitetura de Software: Construção de uma aplicação SaaS robusta e escalável.
• Backend: Domínio do ecossistema Laravel, incluindo Eloquent, Middlewares, Policies e a criação de APIs RESTful.
• Frontend: Desenvolvimento de uma Single Page Application (SPA) reativa e moderna com Vue.js, Inertia.js e Tailwind CSS.
• Experiência do Utilizador (UX/UI): Foco em criar uma interface intuitiva, responsiva e esteticamente agradável, que resolve um problema real.

• ✅ Autenticação de Utilizadores: Sistema completo de registo, login e gestão de perfil.
• ✅ CRUD de QR Codes Dinâmicos: Criação, listagem, edição e eliminação de QR Codes.
• ✅ Redirecionamento e Contagem de Scans: Links curtos (/r/{uuid}) que redirecionam e registam cada scan.
• ✅ Pré-visualização em Tempo Real: Interface que mostra as alterações de cor e estilo instantaneamente.
• ✅ Download em Múltiplos Formatos: Opções para descarregar o QR Code como SVG, PNG e PDF.
• ✅ Dashboard de Estatísticas: Página dedicada para visualizar o total de scans e os scans por dispositivo e por dia, com gráficos.

• Backend: Laravel 12, PHP 8.3+
• Frontend: Vue.js 3, Inertia.js, Tailwind CSS
• Banco de Dados: MySQL
• Ferramentas: Composer, NPM, Vite

Antes de começar, garanta que tem as seguintes ferramentas instaladas:

• PHP (versão 8.2 ou superior)
• Composer (gestor de pacotes do PHP)
• Node.js e NPM (para as dependências do frontend)
• Um gestor de banco de dados MySQL (como XAMPP, Laragon, MySQL Workbench, DBeaver, etc.)

Abra o seu terminal e navegue até à pasta onde guarda os seus projetos. Em seguida, execute o comando:

git clone [https://github.com/SEU-USUARIO/qr-studio.git](https://github.com/SEU-USUARIO/qr-studio.git)
cd qr-studio

(Substitua SEU-USUARIO pelo seu nome de utilizador no GitHub.)

O ficheiro .env é ignorado pelo Git por segurança. Precisamos de o criar a partir do ficheiro de exemplo.

1. Crie o ficheiro de ambiente. No terminal, dentro da pasta qr-studio, execute:

   • No Windows (PowerShell): copy .env.example .env
   • No macOS/Linux: cp .env.example .env

2. Crie a base de dados. Abra o seu gestor de MySQL e crie uma nova base de dados vazia chamada qr_studio.

3. Edite o ficheiro .env. Abra o projeto no seu editor de código (como o VS Code) e edite o ficheiro .env com as informações da sua base de dados. Geralmente, só precisa de alterar a linha DB_PASSWORD.

   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=qr_studio
   DB_USERNAME=root
   DB_PASSWORD=SUA_SENHA_AQUI

   (Se o seu MySQL não tiver senha para o utilizador root, deixe a linha DB_PASSWORD= em branco.)

Vamos instalar todos os pacotes necessários para o backend (PHP) e o frontend (JavaScript).

1. Instalar dependências do PHP (Composer):

   composer install

2. Instalar dependências do JavaScript (NPM):

   npm install --legacy-peer-deps

   (Usamos --legacy-peer-deps para evitar conflitos de versão comuns no ecossistema JavaScript.)

Com as dependências instaladas, só faltam alguns comandos do Laravel.

1. Gerar a chave da aplicação:

   php artisan key:generate

2. Criar as tabelas no banco de dados:

   php artisan migrate

Precisamos de dois servidores a rodar em simultâneo. Abra dois terminais separados dentro da pasta qr-studio.

1. No primeiro terminal (Backend):

   php artisan serve

2. No segundo terminal (Frontend):

   npm run dev

Abra o seu navegador e aceda a http://localhost:8000.

Agora pode registar uma nova conta, fazer login e começar a testar as funcionalidades.

O projeto continua em desenvolvimento. As próximas etapas incluem a integração de IA para sugestões, personalizações mais avançadas e a criação de uma API pública.