App em 2h: Next.js + v0.app + shadcn UI + Codespaces

Visão geral do que você vai construir

Neste guia, você vai criar um aplicativo web funcional mesmo com pouco ou nenhum conhecimento técnico. Você vai usar ferramentas modernas como:

• Github + Codespaces (ambiente de desenvolvimento na nuvem)
• Next.js (framework web moderno)
• shadcn/ui (componentes de interface prontos)
• v0.dev + ChatGPT (para gerar a interface com inteligência artificial)

O processo completo leva cerca de 1 a 2 horas, dependendo da sua familiaridade com os passos.

Tutorial: Criando um App Web com Next.js, shadcn/ui e v0.dev (passo a passo para iniciantes)

Pré-requisitos

• Conta no Github
• Navegador atualizado (Chrome, Firefox ou Edge)
• Nada precisa ser instalado no seu computador — você vai usar tudo na nuvem

1. Criar um Repositório no Github

1. Acesse github.com
2. Clique em New repository
3. Nomeie o repositório
4. Marque a opção Add a README file
5. Clique em Create repository

2. Abrir o Github Codespaces

1. No repositório criado, clique no botão verde Code
2. Vá até a aba Codespaces
3. Clique em Create codespace on main
4. Espere o ambiente carregar (pode levar alguns segundos)

Você já estará com um ambiente de desenvolvimento 100% online, com terminal pronto.

3. Abrir o terminal Git Bash (pré-instalado)

1. Na parte inferior da tela do Codespaces, clique em Terminal
2. Se o terminal não estiver visível, abra com `Ctrl + `` (crase)

4. Instalar o Next.js (usando npx)

No terminal, digite o seguinte comando para criar o projeto Next.js:

npx create-next-app@latest

Durante a configuração, selecione as seguintes opções:

• Nome do projeto: [nome-do-seu-app]
• TypeScript: Yes
• App Router: Yes
• Tailwind CSS: Yes
• ESLint: Yes
• src/ directory: Yes
• Experimental features: No

5. Instalar o shadcn/ui

Depois que o Next.js estiver instalado, entre na pasta do projeto:

cd nome-do-seu-app

Inicie o shadcn com o comando:

npx shadcn-ui@latest init

6. Gerar o Prompt do App com ChatGPT (GPT especializado)

1. Acesse o ChatGPT.
2. Selecione o GPT chamado "v0.dev Prompt Generator".
3. Envie uma descrição detalhada do seu app. Exemplo:

Quero criar um app web chamado Mercado. O app deve ter um campo para adicionar item, quantidade e preço. Também deve permitir editar e remover itens da lista. Preciso de um resumo com o total da compra. Os dados devem ser salvos no LocalStorage. Estilo visual limpo, moderno, com layout centralizado.

O GPT retornará um prompt específico para usar no v0.dev.

7. Gerar a Interface com o v0.dev

1. Acesse V0.app.
2. Cole o prompt fornecido pelo GPT.
3. O v0 gerará a interface completa com React + Tailwind + componentes prontos.
4. Clique em Get Code.
5. Copie o comando npx gerado pelo site.

8. Integrar a Interface ao Projeto

Cole o comando copiado do v0.dev no terminal, dentro da pasta do projeto:

npx shadcn@latest add "https://v0.app/chat/link-do-seu-projeto-no-v0"

9. Verificar se tudo está funcionando

Antes de rodar, instale as dependências:

npm install

Para compilar o projeto:

npm run build

Se aparecer algum erro, leia o terminal com atenção e corrija (geralmente são pacotes faltando).

Depois, rode o projeto localmente:

npm run dev

Acesse o link que aparecer (geralmente http://localhost:3000) e verifique se a interface está funcionando corretamente.

10. Salvar e enviar seu projeto pro Github

No terminal, execute os seguintes comandos:

git add .

git commit -m "initial app"

git push origin main

O que você construiu:

• Front-end moderno
• Componentes prontos e responsivos
• Salvamento de dados com LocalStorage
• 100% construído na nuvem
• App totalmente funcional

Implatação Vercel (seu projeto no ar)

Faça o deploy gratuito com Vercel conectando ao repositório existente no seu Github. Pronto. Você criou um app totalmente na Nuvem :)

Você não precisa aprender todas as tecnologias e ferramentas antes de começar. Apenas comece, erre, corrija, vasculhe e pesquise.

Use ferramentas que reduzem o atrito e te deixam focar no que importa: resolver problemas reais com software e tecnologia.