YesMail is a feel-good Gmail simulation built for job seekers tired of rejection emails. It reimagines the modern inbox as a high-conviction "offer machine" where every notification is a win.
The app seeds your inbox with hyper-personalized offer templates based on your name and dream role, then delivers a new “you’re the one” message every 8 seconds.
This repo is set up as a frontend-only demo: no database required. Mail is stored in-memory in the browser via a local-mode API.
Live Application: https://yesmail-demo.onrender.com
YesMail.mov
- Features
- Technology Stack
- Getting Started
- Project Structure
- Core Components
- Experience & UI
- Logic & Flow
- Next Steps
- Contributing
- Contact
- Personalized Offer Library: Handcrafted templates that adapt to your name and desired role.
- Auto-Incrementing Flow: A new “win” arrives every 8 seconds.
- Inbox Tabs: Primary, Promotions, Social, Updates (with seeded emails per tab).
- Interactive Status Tracking: Accept/Reject offers to update status-aware UI with colored backgrounds and chips.
- Celebration Animations: Confetti bursts on acceptance.
- Real-time Counters: Header counters for Accepted/Rejected totals.
- Search: Search across sender, subject, and body.
- React (Context API for global state)
- Material UI (MUI) (layout/components/icons)
- React Router (routing for login/inbox/detail views)
- Axios (optional HTTP client; demo runs in local mode)
- Local-mode API (in-browser memory store) (no backend required)
- Local Storage (prevents repeating offer templates per session)
- Render Static Site (free hosting for the demo)
- Node.js (v16+)
- Git
-
Clone the repository:
git clone https://github.com/yourusername/YesMail.git cd YesMail -
Run the frontend:
cd client npm install npm start
Open http://localhost:3000.
yesmail/
├── client/ # React app
│ ├── public/ # Static assets
│ └── src/
│ ├── assets/ # Branding and images
│ ├── components/ # UI components (Header, Email list, ViewEmail, etc.)
│ ├── context/ # DataProvider (global state)
│ ├── data/ # Offer templates library
│ ├── services/ # API layer (local-mode store + optional HTTP)
│ └── pages/ # Login, Main
│
├── render.yaml # Render blueprint (static site)
└── README.md
| Component | What It Covers |
|---|---|
| Inbox List | Real-time stream of offers with read/unread styling, preview snippets, and status indicators |
| Offer Viewer | Full letter view with accept/reject actions (offers only) |
| Momentum Tracker | Header counters for accepted/rejected totals |
| Celebration Layer | Confetti overlay for acceptances |
| SideBar Navigation | Gmail-style navigation and labels |
- Gmail Simulation: Familiar layout to make it instantly usable.
- High-Conviction Copy: Messaging designed to combat “rejection fatigue.”
- Clear Visual Feedback: Accepted/rejected states stay visible in the inbox and labels.
- Initial Seed: On first login, the app seeds a starter set of emails (including Promotions/Social seeds).
- 8-Second Loop: A timer adds a new offer into the inbox every 8 seconds.
- Template Personalization: Templates inject your name and desired role dynamically.
- Local Demo Mode: When
REACT_APP_LOCAL_MODE=true, all mail actions are handled in-browser.
- Persist accepted/rejected counters across refresh (Local Storage).
- Add more seeded tabs (Updates) and more “fun” system-style emails.
- Add an “Export wins” button (download accepted offers as a PDF or shareable image).
- Accessibility pass (keyboard navigation + ARIA for mailbox actions).
Contributions are welcome to help spread the positivity!
- Fork the repository.
- Create your feature branch (
git checkout -b feat/new-template). - Commit your changes (
git commit -m 'Add new template'). - Push to the branch (
git push origin feat/new-template). - Open a Pull Request.
If you have any questions or just want to share a win, reach out at mrodr.contact@gmail.com