Curso Cult UI›Módulo 1: Fundamentos›Aula 1

🚀

Módulo 1 - Aula 1: Setup do Ambiente

Preparando o ambiente de desenvolvimento para trabalhar com Cult UI

Duração

15 minutos

Dificuldade

Iniciante

Progresso

1/35 aulas

✅ O que você vai aprender:

• Configurar Node.js e npm/yarn
• Criar projeto Next.js com TypeScript
• Instalar e configurar Tailwind CSS
• Configurar Framer Motion para animações
• Preparar utilitários essenciais

📋 Pré-requisitos

⚠️ Conhecimentos necessários

React Básico:

• Componentes funcionais
• Props e State
• Hooks (useState, useEffect)
• Event handlers

TypeScript Básico:

• Tipagem de props
• Interfaces básicas
• Tipos primitivos
• Optional types (?)

🛠️ Ferramentas necessárias

Node.js:

Versão 18.0+ recomendada

Editor:

VS Code (recomendado)

Terminal:

Bash/PowerShell/cmd

🎯 Extensões VS Code recomendadas

• Tailwind CSS IntelliSense - Autocomplete CSS
• TypeScript Importer - Auto imports
• ES7+ React/Redux - Snippets

• Prettier - Code formatting
• Auto Rename Tag - HTML/JSX tags
• Bracket Pair Colorizer - Visual help

💡 Dicas para iniciantes

Não sabe React?Recomendo fazer o tutorial oficial do React primeiro:react.dev/learn

Nunca usou TypeScript?Não se preocupe! Vou explicar cada tipo usado durante o curso.

Tailwind CSS é novo?Você aprenderá na prática. É mais fácil do que parece!

🔧 Configuração do Ambiente

🎯 Por que esse setup específico?

Cult UI funciona melhor com React + TypeScript + Tailwind CSS. Framer Motion é essencial para animações suaves, e Next.js oferece a melhor developer experience para projetos React modernos.

📋 Passo 1: Criar projeto Next.js

⚠️ Importante

Certifique-se de ter Node.js 18+ instalado. Verifique com node --version

terminal

🎨 Passo 2: Instalar dependências

🔧 Dependências essenciais

Estas são as únicas dependências que você precisa para usar Cult UI:

terminal

🛠️ Passo 3: Criar utilitários

💡 Função cn()

Esta função combina classes Tailwind de forma inteligente, removendo duplicatas e resolvendo conflitos.

lib/utils.ts

🎭 Passo 4: Configurar animações

tailwind.config.js

✅ Ambiente configurado!

Agora você tem tudo pronto para começar a usar componentes Cult UI:

• Next.js 14+ com TypeScript
• Tailwind CSS configurado
• Framer Motion para animações
• Utilitários cn() e animations
• Animações customizadas

🚀 Próximos Passos

🧪 Teste sua instalação

Vamos criar um componente simples para verificar se tudo está funcionando:

components/test-component.tsx

📁 Organização recomendada

Estrutura de pastas que usaremos no curso:

Estrutura do projeto

🎯 Próxima aula: Instalação e Configuração

Na próxima aula, você aprenderá:

• Como instalar componentes específicos do Cult UI
• Configurar o sistema de utilitários avançado
• Entender a filosofia "copy-paste" do Cult UI
• Primeira implementação prática

🏆 Checkpoint Conquistado

Você concluiu o setup do ambiente! Agora tem as bases para usar Cult UI.

Next.js ConfiguradoTypeScript ReadyTailwind CSS SetupFramer Motion Ready

←Voltar ao Curso

Aula 1 de 35

Próxima Aula→

Continuar para Aula 2: Instalação e Configuração