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

# 🚀 Criar projeto Next.js com TypeScript
npx create-next-app@latest meu-projeto-cult-ui --typescript --tailwind --eslint --app

# 📁 Navegar para o projeto
cd meu-projeto-cult-ui

🎨 Passo 2: Instalar dependências

🔧 Dependências essenciais

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

terminal

# 📦 Instalar dependências do Cult UI
npm install -D tailwindcss@latest clsx tailwind-merge framer-motion

# 🎯 Opcional: Lucide React para ícones
npm install lucide-react

🛠️ 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

// 🎯 Utilitário para combinar classes CSS
import clsx, { ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// 🎨 Utilitário para animações
export const animations = {
  fadeInUp: 'animate-fade-in-up opacity-0 translate-y-8',
  fadeIn: 'animate-fade-in opacity-0',
  slideInLeft: 'animate-slide-in-left opacity-0 -translate-x-8',
  slideInRight: 'animate-slide-in-right opacity-0 translate-x-8',
}

🎭 Passo 4: Configurar animações

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      // 🎨 Animações customizadas para Cult UI
      animation: {
        'fade-in-up': 'fadeInUp 0.5s ease-out forwards',
        'fade-in': 'fadeIn 0.3s ease-out forwards',
        'slide-in-left': 'slideInLeft 0.5s ease-out forwards',
        'slide-in-right': 'slideInRight 0.5s ease-out forwards',
      },
      keyframes: {
        fadeInUp: {
          '0%': { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideInLeft: {
          '0%': { opacity: '0', transform: 'translateX(-20px)' },
          '100%': { opacity: '1', transform: 'translateX(0)' },
        },
        slideInRight: {
          '0%': { opacity: '0', transform: 'translateX(20px)' },
          '100%': { opacity: '1', transform: 'translateX(0)' },
        },
      },
    },
  },
  plugins: [],
}

✅ 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

'use client';

import { useState } from 'react';
import { cn } from '@/lib/utils';

export function TestComponent() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div className="p-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg">
      <button
        onClick={() => setIsVisible(!isVisible)}
        className={cn(
          'bg-white text-black px-6 py-3 rounded-lg font-semibold',
          'hover:bg-bg-2 transition-colors'
        )}
      >
        Testar Animação
      </button>
      
      {isVisible && (
        <div className="mt-4 animate-fade-in-up">
          <h3 className="text-foreground text-xl font-bold">
            🎉 Cult UI está funcionando!
          </h3>
          <p className="text-fg-muted mt-2">
            Animação, Tailwind e TypeScript estão configurados corretamente.
          </p>
        </div>
      )}
    </div>
  );
}

📁 Organização recomendada

Estrutura de pastas que usaremos no curso:

Estrutura do projeto

meu-projeto-cult-ui/
├── app/                  # Next.js 14 App Router
│   ├── layout.tsx
│   └── page.tsx
├── components/           # Componentes Cult UI
│   ├── ui/              # Componentes básicos
│   ├── cult-ui/         # Componentes do Cult UI
│   └── examples/        # Exemplos de uso
├── lib/                 # Utilitários
│   └── utils.ts
├── public/              # Assets estáticos
└── styles/              # Estilos globais
    └── globals.css

🎯 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