"A feature-rich social memory platform built on the MERN stack — where every scroll is a trip down memory lane."
- 📸 What is Rewind?
- 🖼️ UI Showcase
- 📊 Project at a Glance
- ✨ Key Features
- 🏗️ System Architecture
- 🗄️ Data Model
- 🛠️ Tech Stack
- 📂 Project Structure
- 📦 Getting Started
- 9.1 🔧 Prerequisites
- 9.2 ⬇️ Clone & Install
- 9.3 🔑 Environment Setup
- 9.4 🖥️ Run Locally
- ☁️ Cloud Deployment
- 10.1 🔵 Backend — Render
- 10.2 ⚫ Frontend — Vercel
- ⚡ Performance & Optimisation
- 🗺️ Roadmap
- 🤝 Contributing
- ❓ FAQ
- 📄 Changelog
- 👤 Author
- ⭐ Show Your Support
Rewind is a full-stack social memory platform built on the MERN stack. Users can create richly-tagged memory cards — complete with images, stories, and likes — and share them with the world. It demonstrates a modern decoupled architecture: the React+Redux frontend lives on Vercel's global edge network while the Express+MongoDB backend scales independently on Render.
🎯 Built to showcase: Full-stack MERN mastery, Redux state management, RESTful API design, cloud deployment strategy, and optimistic UI patterns.
| 🔖 | Version | 📦 Highlight |
|---|---|---|
| 🆕 | v2.0 |
Decoupled multi-cloud deploy · Optimistic Redux likes · Base64 image processing |
| 🔄 | v1.5 |
Material-UI design system · Tag-based filtering · Mongoose schema validation |
| 🎉 | v1.0 |
Initial MERN CRUD — create, read, update, delete memories |
📱 Responsive grid layout — Material-UI cards auto-reflow from 4-column desktop to single-column mobile · Like counter updates instantly via optimistic Redux state
🖼️ Real-time Base64 image preview before submission · Tag chip input for categorisation · Form validates all required fields inline
❤️ Optimistic Like — state updates instantly before server confirmation · 🕒 Relative timestamps (e.g. "2 hours ago") · Edit / Delete controls visible to the creator
| 🖥️ Feature | 📱 Mobile | 💻 Tablet | 🖥️ Desktop |
|---|---|---|---|
| 📸 Memory Feed Grid | ✅ 1-col | ✅ 2-col | ✅ 4-col |
| ✍️ Create / Edit Form | ✅ | ✅ | ✅ |
| ❤️ Optimistic Like | ✅ | ✅ | ✅ |
| 🔍 Tag Filter | ✅ | ✅ | ✅ |
| 🌙 Dark Mode (roadmap) | 🔄 | 🔄 | 🔄 |
| 🔌 Layer | 📡 Status | ⏱️ Latency | 🔐 Security |
|---|---|---|---|
| 🌐 Frontend |  |
~40ms |
SSL · Edge CDN |
| 🔌 Backend API |  |
~120ms |
CORS · HTTPS |
| 🗄️ Database |  |
99.9% uptime |
AES-256 at rest |
🔗 Live Website: https://rewind-pied.vercel.app 🔗 API Base URL: https://rewind-api-alwp.onrender.com
| 📱 | Fully Responsive UI | Material-UI grid adapts flawlessly across mobile, tablet, and ultra-wide desktop |
| 🔄 | Optimistic UI Updates | Redux state updates instantly on Like — UI reflects changes before the server confirms, eliminating perceived lag |
| 🖼️ | Real-Time Image Preview | Base64 encoding renders image previews inline as soon as a file is selected — no upload round-trip needed |
| 🏷️ | Tag-Based Discovery | Multi-tag support on every memory — filter and surface related posts instantly |
| ☁️ | Decoupled Multi-Cloud | Frontend on Vercel's global edge, backend on Render — each scales and deploys independently |
| 🔐 | CORS Protection | Server-side CORS middleware restricts access to verified frontend origins only |
| 🗄️ | Mongoose ODM | Type-safe, schema-validated document storage with auto-timestamps and default values |
| 📦 | 30 MB Payload Support | Custom body-parser limits handle high-resolution Base64 image uploads without request failure |
| 🎨 | Material Design System | Consistent, accessible UI built entirely on Material-UI components with CSS-in-JS theming |
| ⚡ | Single-Trip Data Fetching | One GET request retrieves all metadata and images, minimising TCP handshake overhead |
The application follows a Decoupled Monorepo Architecture — client and server live in the same repo but deploy to separate cloud providers and scale independently.
graph TD
U[👤 User Browser] -->|React + Redux| VF[🌐 Vercel Frontend]
VF -->|Axios REST — HTTPS| RB[🔌 Render Backend]
RB -->|Mongoose ODM| DB[(🗄️ MongoDB Atlas)]
DB -->|Data Response| RB
RB -->|JSON Response| VF
VF -->|Redux State Update| U
subgraph Frontend ["🌐 VERCEL — Edge CDN"]
VF
RC[⚛️ React Components]
RX[🔄 Redux Store]
AX[📡 Axios Service]
VF --> RC --> RX --> AX
end
subgraph Backend ["🔌 RENDER — Web Service"]
RB
RT[🛣️ Express Routes]
CT[🎛️ Controllers]
MD[📋 Mongoose Models]
RB --> RT --> CT --> MD
end
classDef fe fill:#0a1a2e,stroke:#61DAFB,stroke-width:2px,color:#fff;
classDef be fill:#0a2e0a,stroke:#339933,stroke-width:2px,color:#fff;
classDef db fill:#0a0a2e,stroke:#47A048,stroke-width:2px,color:#fff;
classDef user fill:#000,stroke:#61DAFB,stroke-width:2px,color:#fff;
class U user;
class VF,RC,RX,AX fe;
class RB,RT,CT,MD be;
class DB db;
graph LR
subgraph Client_Side ["⚛️ CLIENT — React / Redux"]
U((👤 User)) -- "1. Form Input" --> UI[🖼️ UI Components]
UI -- "2. Action Dispatch" --> RD[🔄 Redux Store]
RD -- "3. API Request" --> AX[📡 Axios Service]
end
subgraph Server_Side ["🔌 SERVER — Node / Express"]
AX -- "4. REST HTTPS (JSON + Base64)" --> RT[🛣️ Express Routes]
RT -- "5. Controller Logic" --> CT[🎛️ Mongoose Controllers]
end
subgraph Storage ["🗄️ CLOUD STORAGE"]
CT -- "6. Persist document" --> DB[(MongoDB Atlas)]
DB -- "7. Return document" --> CT
end
CT -- "8. Success JSON" --> RD
RD -- "9. Re-render Feed" --> UI
DFD Level Guide:
| Level | Actor | Action |
|---|---|---|
| 0 | 👤 User | Inputs Title, Message, Tags, Image via form |
| 1 | ⚛️ Redux | Dispatches async action to Axios service layer |
| 2 | 📡 Axios | Transmits JSON + Base64 payload over HTTPS to Render |
| 3 | 🎛️ Express | Validates payload, writes to MongoDB via Mongoose |
| 4 | 🔄 Redux | Receives success response, updates global state, triggers re-render |
sequenceDiagram
autonumber
participant U as 👤 User
participant RX as 🔄 Redux
participant AX as 📡 Axios
participant EX as 🔌 Express
participant DB as 🗄️ MongoDB
Note over U,RX: ❤️ Like a Memory Post
U->>RX: dispatch(likePost(id))
RX->>RX: Optimistic update — increment likeCount in local state
RX-->>U: UI reflects +1 instantly (zero lag)
RX->>AX: PATCH /posts/:id/likePost
AX->>EX: HTTPS PATCH request
EX->>DB: findByIdAndUpdate — $inc likeCount
DB-->>EX: Updated document
EX-->>AX: 200 OK + updated post
AX-->>RX: Confirmed server state
RX-->>U: State synced ✅
Note over U,EX: ✍️ Create a Memory
U->>RX: dispatch(createPost(formData))
RX->>AX: POST /posts (JSON + Base64 image)
AX->>EX: HTTPS POST
EX->>DB: new PostMessage(data).save()
DB-->>EX: Saved document
EX-->>AX: 201 Created
AX-->>RX: Dispatch getPosts()
RX-->>U: Feed refreshed with new memory ✅
| 📌 Field | 🔷 Type | ⚙️ Required | 🏷️ Default | 📝 Description |
|---|---|---|---|---|
_id |
ObjectId |
Auto | — | Unique document identifier (MongoDB) |
title |
String |
✅ Yes | — | Headline or subject of the memory |
message |
String |
✅ Yes | — | Detailed story or description |
creator |
String |
✅ Yes | — | Name or ID of the authoring user |
tags |
[String] |
❌ No | [] |
Array for categorisation and tag-based search |
selectedFile |
String |
❌ No | "" |
Image stored as Base64-encoded string |
likeCount |
Number |
❌ No | 0 |
Like counter — incremented via PATCH /likePost |
createdAt |
Date |
System | Date.now |
Auto-timestamp for chronological feed sorting |
💡 Base64 Note: The
selectedFilefield stores images as Base64 strings directly in MongoDB. This is ideal for demo-scale projects. For production at scale, migrate to a CDN (Cloudinary, AWS S3) — see Roadmap.
classDiagram
class PostMessage {
+ObjectId _id
+String title
+String message
+String creator
+String[] tags
+String selectedFile
+Number likeCount
+Date createdAt
+save() Promise
+findById() PostMessage
+findByIdAndUpdate() PostMessage
+findByIdAndRemove() void
}
note for PostMessage "selectedFile: Base64 encoded image string\nlikeCount default: 0\ncreatedAt default: Date.now"
// server/models/postMessage.js
import mongoose from 'mongoose';
const postSchema = mongoose.Schema({
title: String,
message: String,
creator: String,
tags: [String],
selectedFile: String,
likeCount: {
type: Number,
default: 0,
},
createdAt: {
type: Date,
default: new Date(),
},
});
const PostMessage = mongoose.model('PostMessage', postSchema);
export default PostMessage;
| ⚙️ Capability | 🔬 Implementation | 🏆 Result |
|---|---|---|
| 🔄 State Management | Redux + async thunks | Optimistic UI, zero lag likes |
| 🖼️ Image Handling | Base64 encode/decode | Instant preview, no upload roundtrip |
| 🔐 API Security | CORS middleware + HTTPS | Cross-origin requests locked to allowed origins |
| 📦 Payload Size | bodyParser 30 MB limit |
High-res images handled without 413 errors |
| ☁️ Scalability | Decoupled Vercel + Render | Frontend & backend scale and deploy independently |
📸 Rewind/
│
├── 💻 client/ # React Frontend
│ ├── 📁 public/ # Static assets & index.html
│ └── 🧩 src/
│ ├── 📡 api/
│ │ └── index.js # Axios service — base URL + all API calls
│ ├── ⚡ actions/
│ │ └── posts.js # Redux async action creators (thunks)
│ ├── 🔄 reducers/
│ │ └── posts.js # Redux state reducer — handles all post actions
│ ├── 🎨 components/
│ │ ├── 🏠 Home/ # Memory feed + layout
│ │ ├── 🃏 Posts/ # Post grid container
│ │ │ └── Post/ # Individual memory card
│ │ └── ✍️ Form/ # Create & Edit memory form
│ ├── 🎨 styles/ # CSS-in-JS (MUI makeStyles)
│ └── 🏠 App.js # Root component + routes
│ └── 📦 package.json
│
├── 🔌 server/ # Node.js / Express Backend
│ ├── 🎛️ controllers/
│ │ └── posts.js # CRUD logic — getPosts, createPost, updatePost, deletePost, likePost
│ ├── 📋 models/
│ │ └── postMessage.js # Mongoose schema & model
│ ├── 🛣️ routes/
│ │ └── posts.js # Express route definitions → controller bindings
│ ├── 🔒 .env # Environment secrets (git-ignored)
│ └── 🏠 index.js # Express app entry — middleware, CORS, DB connect
│
├── 📸 screenshots/ # UI screenshots for README
│ ├── 🏠 home.png
│ ├── ✍️ create.png
│ └── 🃏 card.png
│
└── 📄 README.md
Get your own Rewind instance running locally in under 5 minutes.
| 🛠️ Tool | 📌 Version | 🔗 Link |
|---|---|---|
 |
≥ 16.x |
nodejs.org |
 |
≥ 8.x |
Bundled with Node |
 |
any | git-scm.com |
| 🗄️ MongoDB Atlas | free tier | mongodb.com/atlas |
📥 Step 1 — Clone the repo
git clone https://github.com/salonyranjan/rewind-memories-app.git
cd rewind-memories-app📦 Step 2 — Install backend dependencies
cd server
npm install📦 Step 3 — Install frontend dependencies
cd ../client
npm install --legacy-peer-deps
# --legacy-peer-deps resolves peer dependency conflicts from Material-UI v4🔐 Step 4 — Configure backend secrets
Create server/.env:
PORT=5000
CONNECTION_URL=mongodb+srv://<username>:<password>@cluster.mongodb.net/rewindDB
⚠️ Security note:.envis in.gitignore— never commit it. Use Render's Environment Variables tab for production secrets.
🔗 Step 5 — Point frontend to local API
In client/src/api/index.js, set:
const API = axios.create({ baseURL: 'http://localhost:5000' });Remember to revert this to your Render URL before deploying.
🔌 Step 6 — Start the backend
# Inside /server
npm start
# → API running at http://localhost:5000⚛️ Step 7 — Start the frontend (new terminal)
# Inside /client
npm start
# → App running at http://localhost:3000This project implements a Hybrid Multi-Cloud Strategy — Vercel's edge network for the frontend, Render's persistent Node.js environment for the backend.
1. Create a new Web Service on Render
2. Root Directory: server
3. Build Command: npm install
4. Start Command: node index.js
5. Environment Variables:
└── CONNECTION_URL = your MongoDB Atlas URI
⚠️ CORS: Ensure your Render URL is whitelisted inserver/index.js:
app.use(cors({ origin: 'https://your-app.vercel.app' }));1. Import repo on vercel.com → Set Root Directory to client
2. Environment Variables:
└── CI = false (suppresses build warnings as errors)
3. Ensure client/src/api/index.js points to your live Render URL
4. Click Deploy ✅
🔄 Vercel auto-redeploys on every
git pushto main.
| 📊 Metric | 🎯 Value | 🔬 Implementation |
|---|---|---|
| 🌐 Frontend Latency | ~40ms |
Vercel global edge CDN |
| 🔌 API Response | ~120ms |
Render persistent Node.js |
| 🗄️ DB Uptime | 99.9% |
MongoDB Atlas free tier SLA |
| 📦 Payload Limit | 30 MB |
Custom bodyParser config |
| 🔄 Like UX | 0ms perceived |
Optimistic Redux state update |
| ⚡ Bundle Size | Minimised | Lazy-loaded React components |
| 🔁 Re-render Control | Selective | Redux prevents unnecessary feed re-renders |
| 🌐 API Calls | Single-trip GET | All metadata + images in one request |
| Status | 🚀 Feature | 🎯 Priority |
|---|---|---|
| ✅ | CRUD — Create, Read, Update, Delete memories | 🔴 Core |
| ✅ | Optimistic Redux like system | 🔴 Core |
| ✅ | Base64 image handling with preview | 🔴 Core |
| ✅ | Decoupled Vercel + Render deployment | 🔴 Core |
| 🔄 | Google OAuth 2.0 — secure user authentication | 🟡 High |
| 🔄 | Search & Pagination — discover large memory collections | 🟡 High |
| 🔄 | Cloudinary CDN — replace Base64 with dedicated image hosting | 🟡 High |
| 📅 | Dark Mode Toggle — accessibility & user preference | 🟢 Planned |
| 📅 | Comment System — threaded replies per memory | 🟢 Planned |
| 📅 | Memory Detail Page — full-screen single memory view | 🟢 Planned |
| 💡 | Stories Mode — auto-play slideshow of memories | 🔵 Idea |
| 💡 | Private Collections — visibility controls per post | 🔵 Idea |
All contributions are warmly welcome! 📸
# 1. Fork the repository on GitHub
# 2. Create your feature branch
git checkout -b feature/your-feature
# 3. Commit with conventional format
git commit -m "feat: add your feature"
# Prefixes: fix: | docs: | style: | refactor: | test: | chore:
# 4. Push & open a PR
git push origin feature/your-featurePriority areas:
| 🔥 Area | 📝 What's Needed |
|---|---|
| 🔐 Auth | Google OAuth 2.0 via Passport.js or Firebase |
| 🖼️ Images | Cloudinary SDK replacing Base64 storage |
| 🔍 Search | Server-side tag & text search with pagination |
| 🧪 Tests | Jest + React Testing Library for components |
| 🌙 UI | Dark mode with MUI ThemeProvider |
🔌 Why does the API take a few seconds to respond on first load?
The backend is hosted on Render's free tier, which spins down after 15 minutes of inactivity. The first request "cold-starts" the service — this takes 30–60 seconds. Subsequent requests are fast. Upgrade to Render's paid plan to eliminate cold starts in production.
🖼️ Why are images stored as Base64 and not uploaded to a CDN?
Base64 storage in MongoDB keeps the architecture simple for a portfolio project — no third-party image service setup required. The trade-off is document size and query performance at scale. Cloudinary integration is on the Roadmap as the recommended migration path.
⚠️ Why do I need --legacy-peer-deps for the frontend install?
The project uses Material-UI v4 which has peer dependency conflicts with newer versions of React. The --legacy-peer-deps flag tells npm to use the older dependency resolution algorithm that ignores these conflicts. Everything works correctly at runtime.
🔐 How does CORS work between Vercel and Render?
The Express server uses the cors npm package as middleware. It's configured to whitelist the Vercel frontend origin (*.vercel.app), blocking any other cross-origin requests. This prevents unauthorised clients from hitting the API directly.
| Version | Highlights |
|---|---|
🆕 v2.0.0 |
Decoupled multi-cloud · Optimistic Redux likes · Base64 image preview · CORS middleware |
v1.5.0 |
Material-UI design system · Tag chips · Mongoose schema validation · Render deploy |
v1.0.0 |
🎉 Initial MERN CRUD — create, read, update, delete memories on MongoDB Atlas |
|
🧑💻 Full-Stack MERN Developer · 🤖 AI Engineer · 🎨 UI/UX Specialist "Building full-stack experiences that feel instant, look beautiful, and scale cleanly." 
|
If Rewind helped you learn MERN, inspired your own project, or just made you smile — show it some love! 📸
💡 Pro Tip: Go to GitHub repo Settings → Social Preview and upload the home screenshot. When you share on LinkedIn, your Memory Feed UI shows instead of a generic GitHub card.
Made with 📸 by Salony Ranjan · © 2026 Rewind · MIT