feat: ✨ include seo, ico, manifest and finish project

Author: esbnet

README.md

@@ -3,60 +3,133 @@
 ![Capa](/src/assets/capa.jpeg)
 </center>
 
-# 🚀 SaaS Template - Full Stack Boilerplate
-
-Este projeto é um **template SaaS completo**, desenvolvido com foco em escalabilidade, modularidade e facilidade de personalização. Ele fornece uma estrutura robusta para aplicações SaaS que exigem autenticação, cobrança recorrente, entrega de produtos digitais e funcionalidades essenciais como rotas protegidas, WebHooks, APIs RESTful e muito mais.
-
----
+## 🧩 Template MicroSaaS
+Este projeto foi desenvolvido durante um minicurso da Rocketseat com o objetivo de me aprofundar no modelo de aplicações SaaS (Software as a Service). A proposta foi criar um template funcional com os principais recursos que caracterizam esse tipo de sistema — incluindo autenticação, integração com gateways de pagamento, tratamento de webhooks e armazenamento de dados.
 
 <center> 
 
 ![Gateway de pagamento Stripe](/src/assets/arch.jpeg)
+Diagrama de pagamento
 </center>
 
----
+### 🚀 Tecnologias Utilizadas
+* Next.js
+* TypeScript
+* Tailwind CSS
+* Auth.js (Google OAuth2)
+* Stripe & Mercado Pago
+* Firebase Firestore
+* Vercel (deploy)
+* Resend (e-mail)
+
+### 🔧 Instalação e Execução
+Para rodar o projeto localmente, siga os passos abaixo:
+
+1. Clone o repositório
+``` 
+git clone https://github.com/esbnet/template-saas.git
+```
 
-## 🧱 Stack Tecnológica
+2. Instale as dependências
+```
+npm install
+# ou
+yarn install
+```
 
-- **Next.js** (App Router) — SSR/SSG híbrido com excelente performance.
-- **TypeScript** — Tipagem estática para maior confiabilidade.
-- **Auth.js** — Autenticação segura e flexível (OAuth, credentials, etc).
-- **Stripe & Mercado Pago** — Integração completa com gateways de pagamento.
-- **Firebase - Cloud Firestore** — Armazenamento de dados em tempo real.
-- **Tailwind CSS + ShadCN/UI** — UI moderna, responsiva e baseada em componentes.
-- **Zod** — Validação de dados robusta e typesafe.
-- **React Query/TanStack Query** — Gerenciamento de cache e requisições assíncronas.
+3. Configure as variáveis de ambiente
+Para cada recurso, configure as variáveis de ambiente correspondentes no arquivo .env.local. Altamente recomendado a consulta [documentação oficial](https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser) do Next e dos demais frameworks e APIs.
+Crie um arquivo .env.local na raiz do projeto com as seguintes variáveis (exemplo):
+``` 
+# Auth.js
+AUTH_SECRET=
+
+# Google
+AUTH_GOOGLE_ID=
+AUTH_GOOGLE_SECRET=
+
+# Firebase
+FIREBASE_PROJECT_ID=
+FIREBASE_PRIVATE_KEY=
+FIREBASE_CLIENT_EMAIL=
+
+# meio de pagamento - stripe
+STRIPE_SECRET_KEY=
+NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
+STRIPE_PRODUCT_PRICE_ID=
+STRIPE_SUBSCRIPTION_PRICE_ID=
+STRIPE_WEBHOOK_SECRET=
+
+# Mercado Pago
+MERCADO_PAGO_PUBLIC_KEY=
+MERCADO_PAGO_ACCESS_TOKEN=
+MERCADO_PAGO_WEBHOOK_SECRET=
+MERCADO_PAGO_WEB_HOOK_SECRET_PROD=
+
+# Resend
+RESEND_API_KEY=
+```
+4. Execute o projeto em modo de desenvolvimento
+```
+npm run dev
+# ou
+yarn dev
+```
+A aplicação estará disponível em: http://localhost:3000
 
----
+### 🔐 Autenticação
+A autenticação foi implementada com Auth.js, utilizando login via Google (OAuth2). As credenciais são armazenadas com segurança e utilizadas para proteger rotas específicas da aplicação.
 
-## 🔐 Autenticação com Auth.js
+### 💳 Integração com Gateways de Pagamento
+#### Stripe
+A integração com o Stripe foi realizada da seguinte forma:
 
-Implementação com suporte a:
+* Instalação da biblioteca oficial do Stripe;
+* Configuração de produtos e preços na plataforma;
+* Ajuste de variáveis no .env.local;
+* Criação de um hook para facilitar chamadas de funções do Stripe;
+* Desenvolvimento de uma API para execução das ações e disparo de eventos;
+* Implementação dos webhooks, que tratam respostas do Stripe e atualizam o Firestore com informações como confirmação ou cancelamento de assinaturas.
 
-- **OAuth (Google, GitHub, etc)**
-- **JWT** ou **session-based auth**
-- **Proteção de rotas** no client e server (middleware `auth()` no server side e `useSession()` no client side)
-- **Roles e permissions** (admin, user, etc)
+#### Mercado Pago
+Além do Stripe, foi integrada também a solução do Mercado Pago, incluindo:
+* Criação de contas e configuração inicial;
+Implementação dos webhooks;
+* Criação de hook e rotas internas para comunicação com a API;
+* Testes de pagamento para validar a operação completa.
 
-```ts
-// Exemplo de proteção SSR
-export const getServerSideProps = withAuth(async (ctx) => {
-  const session = await getSession(ctx);
-  if (!session) return { redirect: { destination: '/login', permanent: false } };
-  return { props: { user: session.user } };
-});
-```
-##
+## ☁️ Deploy e Recursos Adicionais
+Para a finalização do projeto, foram adicionados os seguintes recursos:
+
+* Deploy na Vercel
+* Favicon e imagem OpenGraph (1200x630)
+* Arquivo de manifesto (PWA-ready)
+* Envio automático de e-mail de boas-vindas com Resend
+* Melhoria de SEO com meta tags otimizadas
+
+## 📦 Estrutura Pronta para Evoluir
+Com tudo isso implementado, o template está pronto para servir como base sólida no desenvolvimento de produtos SaaS. Ele já conta com autenticação, integrações com meios de pagamento, deploy otimizado e estrutura escalável — perfeito para acelerar o início de novos projetos.
+
+---
+
+<center>
 
 ## 📨 Contato
 📫 Email: (mailto:[email protected])
 🌐 Site [Edmilson Soares](https://esbnet-port.vercel.app/)
 
 
 
-<center>
 
 ## 🙏 Agradecimentos
+
+André Elias - https://www.linkedin.com/in/andr%C3%A9-elias/
+Rocketseat - https://rocketseat.com.br 🚀
+
+
+</br >
+</br >
+
 Sinte-se a vontade para fazer uma doação via [BuyMeACoffee](https://www.buymeacoffee.com/esbdev)
 ![Capa](/src/assets/bmc_qr.png)
 

env.example

@@ -0,0 +1,24 @@
+# Auth.js
+AUTH_SECRET=
+
+# Google
+AUTH_GOOGLE_ID=
+AUTH_GOOGLE_SECRET=
+
+# Firebase
+FIREBASE_PROJECT_ID=
+FIREBASE_PRIVATE_KEY=
+FIREBASE_CLIENT_EMAIL=
+
+# meio de pagamento - stripe
+STRIPE_SECRET_KEY=
+NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
+STRIPE_PRODUCT_PRICE_ID=
+STRIPE_SUBSCRIPTION_PRICE_ID=
+STRIPE_WEBHOOK_SECRET=
+
+# Mercado Pago
+MERCADO_PAGO_PUBLIC_KEY=
+MERCADO_PAGO_ACCESS_TOKEN=
+MERCADO_PAGO_WEBHOOK_SECRET=
+MERCADO_PAGO_WEB_HOOK_SECRET_PROD=

public/images/homescreen48.jpeg

@@ -1,8 +1,13 @@
 import { handleAuth } from '@/app/actions/handle-auth';
 import { auth } from '@/app/lib/auth';
+import type { Metadata } from 'next';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+export const metadata: Metadata = {
+	title: 'Dashboard',
+};
+
 export default async function Dashboard() {
 	const session = await auth();
 
@@ -28,8 +33,7 @@ export default async function Dashboard() {
 						href="/payment"
 						className="bg-yellow-400 hover:bg-yellow-500 shadow-md px-6 py-3 rounded-lg font-semibold text-gray-900 transition duration-300 ease-in-out"
 					>
-						{' '}
-						Pagamentos
+						Assinar Serviço
 					</Link>
 				</div>
 

src/app/(project)/dashboard/page.tsx

@@ -1,4 +1,9 @@
 import Header from '@/app/components/header';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+	title: 'Pagamentos',
+};
 
 export default function DashboardLayout({
 	children,

src/app/(project)/layout.tsx

@@ -1,9 +1,15 @@
-'use client';
-
 import { handleAuth } from '@/app/actions/handle-auth';
+import { auth } from '@/app/lib/auth';
+import { redirect } from 'next/navigation';
 import { FcGoogle } from 'react-icons/fc';
 
-export default function Login() {
+export default async function Login() {
+	const session = await auth();
+
+	if (session) {
+		return redirect('/dashboard');
+	}
+
 	return (
 		<div className="flex flex-col justify-center items-center gap-6 p-4 h-full">
 			<h1 className="font-[font-family:var(--font-geist-sans)] text-3xl">

src/app/(project)/login/page.tsx

@@ -14,6 +14,7 @@ export async function POST(req: NextRequest) {
 				external_reference: testId,
 				metadata: {
 					testId, // convertida para snake_case
+					userEmail,
 				},
 				...(userEmail && { payer: { email: userEmail } }), // importante para pontuação mp
 				items: [

src/app/_favicon.ico

@@ -16,8 +16,11 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-	title: 'Make Money',
-	description: 'Compartilhe sua vida com quem você ama',
+	title: {
+		default: 'Make Money',
+		template: '%s | MM',
+	},
+	description: 'A simply saas template.',
 };
 
 export default function RootLayout({