Task Manager — Dashboard 3D Cinematografico

Overview

Aplicacao full-stack de gerenciamento de tarefas com experiencia visual imersiva em 3D. O projeto demonstra dominio de conceitos modernos de UI/UX: glassmorphism, parallax, animacoes cinematicas com Framer Motion, background 3D com particulas via React Three Fiber, e design system dark mode consistente.

Preview das Features

• Dashboard Cinematico — Home com estatisticas em tempo real, grafico de produtividade (Recharts) e calendario semanal
• Kanban 3D — Quadro com drag & drop, cards com efeito de inclinacao 3D, orbitas ambientais e glassmorphism
• Command Palette — Busca global e navegacao por atalhos (Ctrl+K) via cmdk
• Background 3D — 400 particulas animadas + orbes metalicos flutuantes via @react-three/fiber
• Toasts Elegantes — Notificacoes Sonner estilizadas em todas as operacoes CRUD
• Responsivo — Layout adaptativo para mobile, tablet e desktop

Arquitetura

portfolio-01/
├── backend/          # FastAPI + SQLAlchemy + SQLite (dev) / PostgreSQL (prod)
│   ├── main.py       # Rotas REST
│   ├── models.py     # SQLAlchemy ORM
│   ├── schemas.py    # Pydantic schemas
│   ├── database.py   # Engine & Session
│   └── requirements.txt
│
├── frontend/         # Next.js 16 + React 19 + TypeScript
│   ├── src/
│   │   ├── app/
│   │   │   ├── page.tsx       # Dashboard
│   │   │   ├── board/page.tsx # Kanban 3D
│   │   │   ├── layout.tsx     # Root layout + Sonner
│   │   │   └── globals.css    # Tailwind v4 config
│   │   └── components/
│   │       ├── ParticleField.tsx    # Background 3D R3F
│   │       └── CommandPalette.tsx   # Cmdk overlay
│   ├── package.json
│   └── next.config.ts
│
├── .env.example
└── README.md

Stacks

Frontend

Tecnologia	Versao	Proposito
Next.js	16.2.9	Framework React com App Router
React	19.2.4	UI library
TypeScript	5.x	Tipagem estatica
Tailwind CSS	4.x	Utility-first CSS
Framer Motion	12.x	Animacoes declarativas
@react-three/fiber	9.x	Renderer React para Three.js
@react-three/drei	10.x	Helpers R3F
cmdk	1.x	Command palette
sonner	2.x	Toast notifications
recharts	3.x	Graficos de produtividade
lucide-react	1.x	Icones consistentes
@dnd-kit	6.x/10.x	Drag & drop no Kanban

Backend

Tecnologia	Versao	Proposito
FastAPI	latest	API REST async
SQLAlchemy	2.x	ORM
Pydantic	2.x	Validacao de dados
Uvicorn	latest	ASGI server
SQLite	built-in	Banco dev (substituivel por PostgreSQL)

Executar Localmente

1. Backend

cd backend
python -m venv venv

# Windows
venv\Scripts\activate
# macOS/Linux
source venv/bin/activate

pip install -r requirements.txt
uvicorn main:app --host 0.0.0.0 --port 8080 --reload

API disponivel em http://localhost:8080 — docs interativas em /docs.

2. Frontend

cd frontend
npm install
npm run dev

Aplicacao em http://localhost:3000.

O frontend espera a API na porta 8080. Para mudar, edite a constante API_URL em src/app/page.tsx e src/app/board/page.tsx.

Variaveis de Ambiente

Copie .env.example para .env e ajuste conforme necessario.

API Endpoints

Metodo	Endpoint	Descricao
GET	/tasks	Listar todas as tarefas
GET	/tasks/{id}	Obter tarefa por ID
POST	/tasks	Criar nova tarefa
PUT	/tasks/{id}	Atualizar tarefa
DELETE	/tasks/{id}	Excluir tarefa

Build de Producao

cd frontend
npm run build

Autor

Desenvolvido como projeto de portfolio demonstrando integracao de tecnologias modernas de frontend e backend com foco em experiencia do usuario imersiva.