Fluxo sagrado da vida. Doe energia, receba prosperidade.

Aplicação web para gerenciamento de rituais criativos, metas e atividades quânticas. Desenvolvida com Angular 20, PrimeNG e Tailwind CSS.

• Sobre o Projeto
• Funcionalidades
• Tecnologias
• Instalação
• Uso
• Deploy
• Estrutura do Projeto
• Contribuindo

Mana Vitae é uma aplicação de produtividade espiritual que combina gestão de tarefas com rituais criativos. Inspirada em conceitos de energia criativa (mana) e ciclos naturais, a aplicação ajuda artistas e criadores a manterem foco, celebrarem conquistas e cultivarem práticas conscientes.

• Mana: Energia criativa vital que flui através das ações
• Rituais Quânticos: Práticas diárias, semanais e mensais de reflexão
• Prosperidade Consciente: Transformar energia em resultados tangíveis

• Atividades Quânticas: Visualização de rituais pendentes (diário, semanal, mensal)
• Cartão de Boas-vindas: Mensagem personalizada com data e hora
• Foco do Dia: Definição e acompanhamento do objetivo principal
• Tarefas Diárias: Lista de tarefas com progresso visual
• Gráfico de Progresso: Visualização de atividades completadas
• Motivação Diária: Mensagens inspiradoras
• Missão, Visão e Valores: Exibição dos pilares do ateliê

• Ressonância Interna (Diário): Reflexão e alinhamento diário
• Portal da Prosperidade (Semanal): Revisão semanal de conquistas
• Celebração Lunar (Mensal): Ritual mensal de fechamento e abertura de ciclos

• Visualização de Todas as Atividades: Acesso rápido a todos os rituais
• Histórico: Consulta de rituais anteriores

• Edição de Missão: Defina o propósito do seu ateliê
• Edição de Visão: Estabeleça onde quer chegar
• Gerenciamento de Valores: Adicione, remova e organize seus valores
• Validações: Mínimo de 3 valores obrigatórios para salvar
• Persistência: Dados salvos no localStorage

• Angular 20.3 - Framework principal (standalone components, signals)
• TypeScript 5.9 - Linguagem de programação
• RxJS 7.8 - Programação reativa

• PrimeNG 20.2 - Biblioteca de componentes UI
• Tailwind CSS 4.1 - Framework CSS utilitário
• ECharts 6.0 - Biblioteca de gráficos interativos
• ngx-echarts 20.0 - Integração ECharts com Angular

• Zoneless Change Detection - Performance otimizada
• Standalone Components - Arquitetura moderna
• Signals - Gerenciamento de estado reativo
• Lazy Loading - Carregamento sob demanda de rotas

• Node.js 20+
• npm 10+

1. Clone o repositório

git clone https://github.com/skatesham/tabs-angular-20-prime-echarts.git
cd tabs-angular-20-prime-echarts

2. Instale as dependências

npm install

3. Inicie o servidor de desenvolvimento

npm start

4. Acesse a aplicação

http://localhost:4200

# Iniciar servidor de desenvolvimento
npm start

# Build de desenvolvimento com watch
npm run watch

# Executar testes
npm test

# Build de produção
npm run build

# Deploy para GitHub Pages
npm run deploy

A aplicação está configurada para deploy automático no GitHub Pages.

npm run deploy

Este comando irá:

1. Fazer build de produção
2. Configurar base-href correto
3. Fazer push para branch gh-pages
4. Publicar automaticamente

1. Vá para Settings > Pages no GitHub
2. Configure:
   • Branch: gh-pages
   • Folder: / (root)
3. Salve e aguarde 2-5 minutos

https://skatesham.github.io/tabs-angular-20-prime-echarts/

npm install -g vercel
vercel

npm run build
# Faça upload da pasta dist/mana-vitae/browser

src/app/
├── features/           # Módulos de funcionalidades
│   └── tabs/
│       ├── components/ # Componentes específicos (layout, tabs)
│       └── pages/      # Páginas da aplicação
│           ├── home/           # Dashboard principal
│           ├── ideas/          # Visualização de todas atividades
│           ├── config/         # Configurações
│           ├── ritual-daily/   # Ritual diário
│           ├── ritual-weekly/  # Ritual semanal
│           └── ritual-monthly/ # Ritual mensal
├── shared/             # Componentes compartilhados
│   └── ui/
│       ├── app-loader/              # Tela de carregamento
│       ├── daily-motivation/        # Mensagens motivacionais
│       ├── daily-progress-chart/    # Gráfico de progresso
│       ├── daily-tasks/             # Lista de tarefas
│       ├── goal-focus/              # Foco do dia
│       ├── mission-vision-values/   # Missão, visão e valores
│       ├── page-header/             # Cabeçalho de páginas
│       ├── quantum-activities/      # Cards de atividades
│       └── welcome-card/            # Cartão de boas-vindas
├── data/               # Modelos de dados
│   └── models/
├── app.ts              # Componente raiz
├── app.config.ts       # Configuração da aplicação
└── app.routes.ts       # Rotas da aplicação

• Standalone: Todos os componentes são standalone
• Signals: Estado reativo com signals
• OnPush: Change detection otimizada
• Getters: Valores derivados simples

• UI Compartilhada: p-<nome> (ex: p-text-input)
• Feature: f-<feature>-<nome> (ex: f-tabs-layout)
• Páginas: <nome>.page.ts (ex: home.page.ts)

• Control Flow: @if, @for (sintaxe moderna)
• Track: Sempre usar track em @for
• Limite: Máximo 60 linhas por template

• Missão, Visão e Valores: missionVisionValues
• Rituais Completados: rituals
• Tarefas Diárias: dailyTasks
• Foco do Dia: dailyGoal

A aplicação suporta dark mode automático baseado nas preferências do sistema.

Contribuições são bem-vindas! Siga estas diretrizes:

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

feat: adiciona nova funcionalidade
fix: corrige bug
docs: atualiza documentação
style: formatação de código
refactor: refatoração sem mudança de comportamento
test: adiciona ou atualiza testes
chore: tarefas de manutenção

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Skatesham

• GitHub: @skatesham

• Windsurf e Família - Pelo suporte, inspiração e energia criativa que tornou este projeto possível
• Angular Team - Framework incrível
• PrimeNG - Componentes UI de qualidade
• Tailwind CSS - Utilitários CSS poderosos
• ECharts - Gráficos interativos

Feito com 💜 e ☕ por Skatesham