Loading repository data…
vitorpaiv4 / repository
UNIREAL
Plataforma de marketplace para bolsas de estudo desenvolvida em Next.js 15 (App Router), React 19 e TypeScript. Interface moderna com Tailwind CSS, Radix UI e Framer Motion.
#framer-motion#frontend#marketplace#nextjs#radix-ui#react
Live repository statistics
★ 4Stars
⑂ 0Forks
◯ 0Open issues
◉ 4Watchers
README preview
🎓 UniReal - Plataforma de Bolsas de Estudo
Plataforma web moderna para busca e contratação de bolsas de estudo em instituições de ensino superior. Desenvolvido com Next.js 15, React 19, TypeScript e Tailwind CSS.
Desenvolvido por: Vitor Paiva
🌟 Sobre o Projeto
O UniReal é uma plataforma que conecta estudantes a oportunidades de bolsas de estudo em cursos de graduação, oferecendo descontos de até 70% em mensalidades. O projeto simula uma plataforma real de marketplace educacional, permitindo:
- 🔍 Busca inteligente de cursos por nome, instituição ou cidade
- 🏫 Múltiplas instituições (Unireal Polo1, Polo2, Polo3 e UnirealEAD)
- 💰 Comparação de preços com economia calculada por semestre
- 📍 Visualização geográfica das instituições com mapas interativos
- 🎨 Interface moderna com animações e tema claro/escuro
- 📱 Totalmente responsivo para mobile, tablet e desktop
🚀 Funcionalidades Principais
🏠 Página Inicial
- Hero section com imagem de fundo e animação de texto
- Busca com autocomplete inteligente
- Exibição de cursos em destaque organizados por instituição
- Cards de cursos com informações de desconto e economia
- Seção "Por que escolher o UniReal?"
🎯 Sistema de Bolsas
- Listagem completa de todos os cursos disponíveis
- Filtros avançados por:
- Instituição (Unireal Polo1/2/3 ou UnirealEAD)
- Modalidade (Presencial/EAD)
- Desconto (até 70%)
- Faixa de preço
- Busca em tempo real com autocomplete
- Ordenação por preço, desconto ou nome
- Detalhes do curso com informações completas sobre:
- Mensalidade original e com desconto
- Percentual de economia
- Economia total no semestre
- Avaliação da instituição
- Modalidade do curso
📝 Processo de Inscrição
- Seleção de curso com visualização de detalhes
- Formulário de cadastro com validação usando:
- React Hook Form para gerenciamento de formulários
- Zod para validação de schemas
- Campos validados: nome, email, telefone, CPF, data de nascimento
- Interface intuitiva em etapas
🏛️ Instituições
- Listagem das instituições parceiras
- Mapas interativos com Google Maps API
- Informações de localização (cidade, estado)
- Cards animados com hover effects
📞 Contato
- Formulário de contato funcional
- Validação de campos em tempo real
- Informações de contato da instituição
- Mapa de localização
👤 Autenticação
- Páginas de login e cadastro (UI pronta)
- Interface preparada para integração com backend
🛠️ Tecnologias Utilizadas
Core
- Next.js 15.2.4 - Framework React com App Router, SSR e SSG
- React 19.1.0 - Biblioteca para interfaces de usuário
- TypeScript 5 - Tipagem estática para JavaScript
Styling & UI
- Tailwind CSS 3.4.17 - Framework CSS utility-first
- Radix UI - Componentes acessíveis e customizáveis
- Framer Motion - Animações fluidas e interativas
- Lucide React - Biblioteca de ícones moderna
- class-variance-authority - Gerenciamento de variantes de componentes
- tailwind-merge - Merge inteligente de classes Tailwind
- tailwindcss-animate - Animações CSS prontas
Componentes & Features
- React Hook Form - Gerenciamento de formulários performático
- Zod - Validação e parsing de schemas TypeScript-first
- React Google Maps API - Integração com Google Maps
- date-fns - Manipulação de datas moderna
- Recharts - Biblioteca de gráficos (preparada para dashboards)
- Sonner - Notificações toast elegantes
- Embla Carousel - Carrossel performático
- cmdk - Command menu (busca com ⌘K)
- next-themes - Gerenciamento de tema claro/escuro
- vaul - Drawer components para mobile
📁 Estrutura do Projeto
UNIREAL/
├── app/ # App Router do Next.js
│ ├── bolsas/ # Listagem de bolsas
│ │ ├── [id]/ # Detalhes do curso
│ │ │ └── escolher/ # Formulário de inscrição
│ │ ├── page.tsx
│ │ └── loading.tsx
│ ├── cadastro/ # Página de cadastro
│ │ └── page.tsx
│ ├── contato/ # Página de contato
│ │ ├── page.tsx
│ │ ├── layout.tsx
│ │ └── metadata.ts
│ ├── instituicoes/ # Listagem de instituições
│ │ └── page.tsx
│ ├── login/ # Página de login
│ │ └── page.tsx
│ ├── sobre/ # Sobre a plataforma
│ │ └── page.tsx
│ ├── layout.tsx # Layout raiz
│ ├── page.tsx # Página inicial
│ ├── loading.tsx # Loading global
│ └── globals.css # Estilos globais
│
├── components/ # Componentes reutilizáveis
│ ├── ui/ # Componentes base (Radix UI + shadcn)
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── dialog.tsx
│ │ ├── form.tsx
│ │ ├── input.tsx
│ │ ├── select.tsx
│ │ ├── tabs.tsx
│ │ └── ... (50+ componentes)
│ ├── animated-section.tsx # Seções com animação de entrada
│ ├── animated-card.tsx # Cards animados
│ ├── course-card.tsx # Card de curso
│ ├── footer.tsx # Rodapé
│ ├── header.tsx # Cabeçalho com navegação
│ ├── search-autocomplete.tsx # Busca com autocomplete
│ ├── google-map.tsx # Componente de mapa
│ ├── institution-map.tsx # Mapa de instituições
│ ├── mode-toggle.tsx # Toggle de tema
│ ├── page-transition.tsx # Transições entre páginas
│ └── theme-provider.tsx # Provider de tema
│
├── data/ # Dados estáticos
│ └── cursos.ts # Lista de cursos e instituições
│
├── hooks/ # Custom hooks
│
├── lib/ # Utilitários
│ └── utils.ts # Funções helper
│
├── public/ # Arquivos estáticos
│ └── images/ # Imagens do projeto
│
├── styles/ # Estilos adicionais
│
├── next.config.mjs # Configuração Next.js
├── tailwind.config.ts # Configuração Tailwind
├── tsconfig.json # Configuração TypeScript
├── components.json # Configuração shadcn/ui
└── package.json # Dependências
🎨 Design & UX
Temas
- ☀️ Modo Claro - Interface limpa e moderna
- 🌙 Modo Escuro - Confortável para os olhos
- 🔄 Alternância automática baseada na preferência do sistema
Animações
- Scroll animations com Framer Motion
- Transições suaves entre páginas
- Hover effects em cards e botões
- Animações de loading skeleton
- Texto animado no hero da página inicial
Responsividade
- 📱 Mobile First - Otimizado para dispositivos móveis
- 💻 Desktop - Layout expandido para telas grandes
- 📊 Breakpoints - sm, md, lg, xl, 2xl
🚦 Como Executar
Pré-requisitos
- Node.js 18+ instalado
- npm, yarn ou pnpm (recomendado)
Instalação
- Clone o repositório
git clone https://github.com/vitorpaiv4/UNIREAL.git
cd UNIREAL
- Instale as dependências
# Com npm
npm install
# Com yarn
yarn install
# Com pnpm (recomendado)
pnpm install
- Configure variáveis de ambiente (opcional)
# Crie um arquivo .env.local
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=sua_chave_aqui
- Inicie o servidor de desenvolvimento
# Com npm
npm run dev
# Com yarn
yarn dev
# Com pnpm
pnpm dev
- Acesse no navegador
http://localhost:3000
📜 Scripts Disponíveis
| Comando | Descrição |
|---|---|
pnpm dev | Inicia o servidor de desenvolvimento na porta 3000 |
pnpm build | Gera a build otimizada para produção |
pnpm start | Inicia o servidor em modo produção (requer build) |
pnpm lint | Executa o ESLint para verificar problemas no código |
📊 Dados do Projeto
Cursos Disponíveis
O projeto conta com 17 cursos distribuídos em 4 instituições:
Áreas:
- Saúde (Medicina Veterinária, Biomedicina, Enfermagem, Farmácia, Odontologia)
- Humanas (Direito, Psicologia, Educação Física)
- Gestão (Administração)
- Exatas (Arquitetura e Urbanismo)
- Gastronomia
Instituições:
- Unireal Polo1 (Porto Velho, RO)
- Unireal Polo2 (Polo2, RO)
- Unireal Polo3 (Polo3, RO)
- UnirealEAD (EAD)
🎯 Próximas Features (Roadmap)
- Integração com backend (API REST)
- Sistema de autenticação completo (JWT)
- Painel do estudante (dashboard)
- Sistema de favoritos
- Filtros avançados adicionais
- Comparação de cursos lado a lado
- Reviews e avaliações de estudantes
- Sistema de notificações
- Chat de atendimento
- Blog educacional
- Aplicativo mobile (React Native)
🤝 Contribuindo
Contribuições são muito bem-vindas! Para contribuir:
- Faça um fork do projeto
- Crie uma branch para sua feature (
git checkout -b feature/nova-feature) - Commit suas mudanças (
git commit -m 'Adiciona nova feature') - Push para a branch (
git push origin feature/nova-feature) - Abra um Pull Request
Diretrizes
- Mantenha o código limpo e organizado
- Siga os padrões de código TypeScript
- Teste suas alterações antes de enviar
- Documente novas funcionalidades
📄 Licença
Este projeto está licenciado sob a MIT License - veja o arquivo LICENSE para detalhes.
📧 Contato
Vitor Paiva
🔗 GitHub: @vitorpaiv4
📧 Email: Entre em contato
🙏 Agradecimentos
- shadcn/ui - Componentes UI reutilizáveis
- Radix UI - Primitivos acessíveis
- Vercel - Plataforma de deploy
- Comunidade Next.js e React
Feito com 💙 por Vitor Paiva
⭐ Se este projeto foi útil, considere dar uma estrela!