Uma plataforma inteligente para geração de planos de estudo personalizados utilizando Inteligência Artificial.
O AI Study Planner é uma aplicação web focada em otimizar o tempo e o aprendizado de estudantes. A plataforma utiliza Inteligência Artificial (Groq / OpenAI) para criar roteiros de estudos totalmente personalizados com base nos objetivos, nível de conhecimento e disponibilidade de tempo do usuário.
Este projeto foi desenvolvido com foco em oferecer uma experiência de usuário (UX) excepcional, interfaces limpas e responsivas, e código manutenível e escalável — características fundamentais para aplicações modernas.
Como desenvolvedor Front-end, construí este projeto para demonstrar na prática minhas habilidades técnicas e arquiteturais:
- Componentização e Reusabilidade: Uso intensivo de padrões de design do React, com componentes reutilizáveis baseados no Shadcn UI e Radix UI, garantindo consistência visual e acessibilidade.
- Ecossistema Moderno: Utilização das versões mais recentes do Next.js (App Router) e React 19, explorando renderização no servidor (SSR) e client components de forma otimizada.
- Gerenciamento de Estado e Formulários: Uso eficiente de Context API, aliado a React Hook Form e Zod para validação robusta de dados de entrada do usuário.
- Integração com IA e Backend: Comunicação com rotas de API (Next.js API Routes) para integração segura com serviços de LLM e persistência de dados no MongoDB (Mongoose).
- Design Responsivo e UI/UX: Interface fluida construída com Tailwind CSS v4, suportando temas (Dark/Light mode) e adaptando-se perfeitamente a dispositivos móveis e desktops.
- 🧠 Geração de Planos com IA: Algoritmo que consome LLMs para fragmentar grandes objetivos de estudo em tarefas diárias gerenciáveis.
- 📅 Calendário Interativo: Interface visual rica para acompanhamento do cronograma e gerenciamento de atividades.
- 📊 Dashboard de Progresso: Acompanhamento de métricas de estudo, streaks (ofensivas) e gráficos (utilizando Recharts).
- 🔐 Autenticação e Fluxo de Usuário: Telas de Login, Registro e Setup inicial (Onboarding).
- 🌗 Tema Dark/Light: Suporte nativo a temas utilizando
next-themes.
- Next.js 16 (App Router)
- React 19
- TypeScript
- Tailwind CSS v4
- Shadcn UI & Radix UI (Componentes Acessíveis)
- React Hook Form + Zod (Validação)
- Recharts (Visualização de Dados)
- Lucide React (Ícones)
- Next.js API Routes
- MongoDB com Mongoose (Banco de Dados)
- Groq SDK / OpenAI (Inteligência Artificial)
O projeto segue uma estrutura modular, visando a separação de responsabilidades:
📦 ai-study-planner
┣ 📂 app # Rotas da aplicação (Next.js App Router) e API Routes
┣ 📂 components # Componentes React (divididos em UI genérica e escopo de negócio)
┣ 📂 hooks # Custom Hooks (ex: use-mobile, use-toast)
┣ 📂 lib # Funções utilitárias, Contextos, Setup do MongoDB e Types
┣ 📂 models # Schemas do Mongoose (User, StudyPlan)
┗ 📂 styles # Arquivos de estilização global (Globals.css)Siga os passos abaixo para rodar o projeto em sua máquina:
- Clone o repositório:
git clone https://github.com/SEU_USUARIO/ai-study-planner.git- Acesse a pasta do projeto:
cd ai-study-planner- Instale as dependências:
npm install
# ou
yarn install
# ou
pnpm install- Configure as Variáveis de Ambiente:
Crie um arquivo
.env.localna raiz do projeto e adicione as chaves necessárias (exemplo):
MONGODB_URI=sua_connection_string_do_mongodb
GROQ_API_KEY=sua_chave_de_api_do_groq
# ou
OPENAI_API_KEY=sua_chave_de_api_da_openai- Inicie o servidor de desenvolvimento:
npm run dev- Acesse a aplicação: Abra http://localhost:3000 no seu navegador.
Gostou do projeto ou quer bater um papo sobre Front-end e tecnologia? Me chame no LinkedIn!
- LinkedIn: Seu Nome
- E-mail: seu-email@exemplo.com
- Portfólio: seusite.com