Aplicação Full-Stack para compartilhar e guardar memórias especiais com comentários e fotos
Memories Project é uma aplicação full-stack moderna que permite aos usuários criar um acervo digital de seus momentos mais preciosos. Funciona como uma galeria de fotos interativa onde você pode:
- 📷 Fazer upload e guardar fotos de momentos especiais
- 💬 Adicionar comentários detalhados sobre cada memória
- 🏷️ Organizear com tags e categorias
- 👥 Compartilhar memórias com amigos
- 📅 Revisar memórias por data
- ✅ Upload de Fotos - Compartilhe suas melhores fotos
- ✅ Sistema de Comentários - Anote detalhes das memórias
- ✅ Galeria Responsiva - Visualize em qualquer dispositivo
- ✅ Categorização - Organize por eventos, lugares, pessoas
- ✅ Busca e Filtros - Encontre memórias rapidamente
- ✅ Timeline - Visualize cronologia de memórias
- ✅ Edição - Altere descrições e comentários
- ✅ Deleção - Remova memórias se necessário
- ✅ Autenticação - Login seguro (opcional)
- ✅ Persistência - Dados salvos no banco de dados
- ✅ UI Intuitiva - Fácil de usar para todos
- React 18 - Library UI moderna
- React Router - Navegação entre páginas
- Axios - HTTP client para requisições
- CSS3 - Estilização com Grid e Flexbox
- Vite - Build tool rápido
- Node.js - Runtime JavaScript server-side
- Express.js - Framework web minimalista
- MongoDB - Banco de dados NoSQL (ou JSON file)
- Multer - Upload de arquivos
- Cors - Cross-Origin Resource Sharing
- Git & GitHub - Versionamento
- npm/yarn - Gerenciador de pacotes
memories-project/
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ ├── Header.jsx
│ │ │ ├── Gallery.jsx
│ │ │ ├── MemoryCard.jsx
│ │ │ ├── MemoryDetail.jsx
│ │ │ ├── CommentSection.jsx
│ │ │ ├── UploadForm.jsx
│ │ │ └── SearchBar.jsx
│ │ ├── pages/
│ │ │ ├── Home.jsx
│ │ │ ├── CreateMemory.jsx
│ │ │ ├── MemoryDetail.jsx
│ │ │ └── NotFound.jsx
│ │ ├── services/
│ │ │ ├── api.js
│ │ │ └── memoryService.js
│ │ ├── styles/
│ │ │ ├── App.css
│ │ │ ├── gallery.css
│ │ │ └── responsive.css
│ │ ├── App.jsx
│ │ └── main.jsx
│ └── package.json
│
├── backend/
│ ├── src/
│ │ ├── routes/
│ │ │ ├── memories.js
│ │ │ └── comments.js
│ │ ├── controllers/
│ │ │ ├── memoryController.js
│ │ │ └── commentController.js
│ │ ├── models/
│ │ │ ├── Memory.js
│ │ │ └── Comment.js
│ │ ├── middleware/
│ │ │ ├── auth.js
│ │ │ └── upload.js
│ │ ├── config/
│ │ │ └── database.js
│ │ └── server.js
│ ├── uploads/
│ └── package.json
│
└── README.md
- Node.js v16+
- npm ou yarn
- (Opcional) MongoDB rodando localmente
git clone https://github.com/ParreirasJuniorWeb/MemoriesProject.git
cd MemoriesProject/backendnpm installCrie .env:
PORT=5000
MONGO_URI=mongodb://localhost:27017/memories
JWT_SECRET=sua_chave_secreta
NODE_ENV=developmentnpm run devServidor em: http://localhost:5000
cd MemoriesProject/frontendnpm installEdite src/services/api.js:
const API_URL = 'http://localhost:5000';npm run devAcesse em: http://localhost:5173
npm run dev # Desenvolvimento com nodemon
npm run build # Build para produção
npm start # Iniciar em produçãonpm run dev # Desenvolvimento com hot reload
npm run build # Build para produção
npm run preview # Visualiza buildGET /api/memories # Listar todas
GET /api/memories/:id # Detalhe de uma
POST /api/memories # Criar nova
PUT /api/memories/:id # Atualizar
DELETE /api/memories/:id # DeletarGET /api/memories/:id/comments # Listar comentários
POST /api/memories/:id/comments # Adicionar comentário
DELETE /api/comments/:commentId # Deletar comentário{
_id: ObjectId,
title: "Viagem Rio de Janeiro",
description: "Fim de semana perfeito com a família",
imageUrl: "https://...",
category: "Viagens",
date: "2024-01-15",
location: "Rio de Janeiro, RJ",
tags: ["praia", "família", "2024"],
comments: [ObjectId],
createdAt: "2024-01-15T10:30:00Z",
updatedAt: "2024-01-15T10:30:00Z"
}{
_id: ObjectId,
memoryId: ObjectId,
author: "João Victor",
text: "Que dia lindo foi esse!",
rating: 5,
createdAt: "2024-01-15T10:35:00Z"
}- ☀️ Modo Claro - Fundo branco, cores vibrantes
- 🌙 Modo Escuro - Fundo escuro, cores suaves
- 📱 Mobile - Coluna única otimizada
- 💻 Desktop - Grid responsivo 3-4 colunas
- 🖥️ Ultra Wide - Grid expandido
POST /api/memories
Content-Type: multipart/form-data
{
title: "Festa de aniversário",
description: "Celebrando 25 anos!",
date: "2024-01-20",
file: <imagem.jpg>
}POST /api/memories/6123abc456def/comments
{
author: "João",
text: "Que festa incrível!",
rating: 5
}GET /api/memories?category=Viagens&year=2024- ✅ Full-Stack Development - Frontend + Backend integrados
- ✅ REST API - Criação e consumo de endpoints
- ✅ Upload de Arquivos - Multer para gerenciar fotos
- ✅ Database - Modelagem e queries NoSQL
- ✅ Autenticação - JWT tokens
- ✅ CORS - Comunicação entre domínios
- ✅ React Routing - Navegação multi-página
- ✅ HTTP Requests - Axios para chamadas API
- ✅ Tratamento de Erros - Try-catch, error handling
- ✅ Responsividade - CSS Grid e Flexbox
Solução: Verifique CORS no backend server.js:
app.use(cors({
origin: 'http://localhost:5173',
credentials: true
}));Solução: Inicie MongoDB localmente:
mongodSolução: Aumente limite no backend:
app.use(express.json({ limit: '50mb' }));Contribuições são bem-vindas!
- Faça fork
- Crie branch (
git checkout -b feature/nova-funcao) - Commit (
git commit -m 'Adicionar nova funcão') - Push (
git push origin feature/nova-funcao) - Abra PR
npm install -g vercel
vercelheroku create meu-app
git push heroku main- Crie conta em mongodb.com/cloud
- Copie connection string
- Configure em
.env
MIT License - veja LICENSE
João Victor (Parreira Junior)
- GitHub: @ParreirasJuniorWeb
- Email: seu.email@example.com
- Autenticação com Google OAuth
- Compartilhamento de álbuns
- Edição de fotos online
- Impressão de álbuns
- Sincronização com Google Photos
- Inteligência Artificial para tags automáticas
- Versão mobile (React Native)
- Integração com redes sociais
- Organize por categorias - Viagens, Família, Eventos
- Use tags descritivas - Facilita busca futura
- Adicione comentários - Registre contexto das memórias
- Faça backup - Exporte seus dados regularmente
- Compartilhe - Reviva memórias com amigos
⭐ Guarde suas memórias para sempre! ⭐