Uma aplicação web elegante e interativa para criar e compartilhar memórias especiais com cronômetro em tempo real, carrossel de imagens e integração musical.
- Cronômetro em Tempo Real: Conta automaticamente anos, meses, horas, minutos e segundos desde uma data especial
- Carrossel de Imagens: Suporte para até 3 imagens com navegação suave e indicadores visuais
- Integração Musical:
- Upload de arquivos de áudio locais com player customizado
- Integração completa com Spotify (tracks, álbuns e playlists)
- Animações Especiais: Emojis de corações caindo na tela para criar atmosfera romântica
- Compartilhamento: Geração de links únicos para compartilhar memórias
- Design Responsivo: Interface adaptável para desktop e mobile
- Design Moderno: Interface escura elegante com elementos glassmorphism
- Componentes Premium: Baseado em Radix UI e shadcn/ui
- Animações Fluidas: Transições suaves e micro-interações
- Feedback Visual: Estados de loading, erro e sucesso bem definidos
- Next.js 15.2.4 - Framework React com App Router
- React 19 - Biblioteca para interfaces de usuário
- TypeScript - Tipagem estática para JavaScript
- Tailwind CSS - Framework CSS utility-first
- Radix UI - Componentes acessíveis e não estilizados
- shadcn/ui - Biblioteca de componentes reutilizáveis
- Lucide React - Ícones SVG modernos
- Tailwind Animate - Animações CSS utilitárias
- React Hook Form - Gerenciamento de formulários
- Zod - Validação de schemas
- date-fns - Manipulação de datas
- UUID - Geração de identificadores únicos
- Embla Carousel - Carrossel de imagens
- Sonner - Notificações toast
memorias/
├── app/ # App Router do Next.js
│ ├── display/ # Páginas de visualização
│ ├── editor/ # Interface de edição
│ ├── globals.css # Estilos globais
│ ├── layout.tsx # Layout raiz
│ ├── loading.tsx # Componente de loading
│ └── page.tsx # Página principal
├── components/ # Componentes reutilizáveis
│ ├── ui/ # Componentes base (shadcn/ui)
│ ├── falling-emojis.tsx # Animação de emojis
│ ├── image-carousel.tsx # Carrossel de imagens
│ └── theme-provider.tsx # Provider de tema
├── hooks/ # Hooks customizados
├── lib/ # Utilitários e configurações
├── public/ # Arquivos estáticos
├── styles/ # Estilos adicionais
└── ... # Arquivos de configuração
- Node.js 18+ ou superior
- npm, yarn, ou pnpm
- Clone o repositório
git clone https://github.com/Joaoof/memorias.git
cd memorias- Instale as dependências
# Com npm
npm install
# Com yarn
yarn install
# Com pnpm (recomendado)
pnpm install- Execute o servidor de desenvolvimento
# Com npm
npm run dev
# Com yarn
yarn dev
# Com pnpm
pnpm dev- Abra o navegador Acesse http://localhost:3000 para ver a aplicação.
-
Adicione Imagens
- Cole URLs de imagens (uma por linha)
- Máximo de 3 imagens suportadas
- As imagens são validadas automaticamente
-
Configure a Data
- Selecione a data de início da memória
- O cronômetro calculará automaticamente o tempo decorrido
-
Personalize o Conteúdo
- Defina um título personalizado
- Adicione uma mensagem especial
- Escolha se deseja mostrar os corações animados
-
Adicione Música (Opcional)
- Upload de arquivo de áudio local, ou
- Cole uma URL do Spotify (track, álbum ou playlist)
-
Visualize e Compartilhe
- Clique em "Criar Memória" para gerar a visualização
- Use o botão de compartilhar para copiar o link único
- Controles Completos: Play/pause, busca, indicador de progresso
- Formatos Suportados: MP3, WAV, OGG e outros formatos web
- Integração Spotify: Player embedded para conteúdo do Spotify
- Feedback Visual: Estados de loading e erro claramente indicados
O projeto usa CSS Variables para fácil customização de cores:
:root {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--primary: 210 40% 98%;
/* ... outras variáveis */
}Todos os componentes são modulares e podem ser facilmente customizados:
// Exemplo de customização de componente
<Button
variant="outline"
size="lg"
className="bg-gradient-to-r from-pink-500 to-violet-500"
>
Botão Customizado
</Button>{
"dev": "next dev", // Servidor de desenvolvimento
"build": "next build", // Build de produção
"start": "next start", // Servidor de produção
"lint": "next lint" // Linter ESLint
}A aplicação está configurada para deploy automático na Vercel:
- Deploy Atual: memorias-gold.vercel.app
- Auto-deploy: Conectado ao GitHub para deploys automáticos
- Configuração: Next.js com otimizações de produção habilitadas
# Build da aplicação
npm run build
# Deploy na Vercel (com Vercel CLI)
vercel --prodContribuições são bem-vindas! Para contribuir:
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
- Siga os padrões de código existentes
- Escreva commits descritivos
- Teste suas mudanças localmente
- Mantenha a documentação atualizada
- TypeScript: Configurado para ignorar erros de build em desenvolvimento
- ESLint: Configurado para ignorar durante builds
- Images: Otimização desabilitada para flexibilidade com URLs externas
- Experimental: Features experimentais do Next.js habilitadas
- Webpack Build Workers: Habilitado para builds mais rápidos
- Parallel Server Traces: Melhora performance de build
- Image Optimization: Configurada para URLs externas
Este projeto é privado e pertence ao usuário Joaoof.
Se você encontrar algum problema ou tiver sugestões:
- Issues: Abra uma issue no repositório GitHub
- Discussões: Use as discussões do GitHub para perguntas gerais
- Email: Contate o desenvolvedor através do GitHub
Desenvolvido com 💖 para preservar memórias especiais