https://github.com/shayisso/appsus
React SPA with misterMail (email client), Keep & Books apps
https://github.com/shayisso/appsus
email-app git-project localstorage note-app react single-page-app
Last synced: 2 months ago
JSON representation
React SPA with misterMail (email client), Keep & Books apps
- Host: GitHub
- URL: https://github.com/shayisso/appsus
- Owner: ShayIsso
- Created: 2025-02-22T07:09:11.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-03-22T12:20:49.000Z (9 months ago)
- Last Synced: 2025-10-14T12:58:13.822Z (2 months ago)
- Topics: email-app, git-project, localstorage, note-app, react, single-page-app
- Language: JavaScript
- Homepage: https://shayisso.github.io/Appsus/
- Size: 2.94 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📦 Appsus
**Appsus** is a multi-app single-page application (SPA) built with **React**.
It integrates several mini productivity apps — all in one place — with clean routing and shared components.
> 🧠 This project was built collaboratively during a React development course.
> 🧑💻 I was responsible for building the **misterMail** app.
---
## 🚀 Featured Apps
### ✉️ MisterMail (built by me)
A mock Gmail-like app built for local use.
**Features:**
- View inbox, sent, trash, starred, and drafts
- Compose and auto-save emails (drafts every 5s)
- Filter by read/unread, text, or folders
- Sort by date or title
- Star emails or mark as read/unread
- Delete to trash, permanently delete from trash
- ✏️ Integration with **missKeep**: save an email as a note via query-params
---
### 🗒️ MissKeep
Inspired by Google Keep. A versatile note-taking app.
- Support for text, image, video, to-do, audio, canvas & map notes
- Pin notes to top
- Change background color
- Filter/search notes
- Duplicate notes
- Integration with **misterMail**
---
### 📚 MissBooks (optional)
A book search and review app using Google Books API.
---
## 🛠️ Tech Stack
- **Framework**: React + React Router
- **State**: useState, useEffect, useRef
- **Data Storage**: localStorage (no backend)
- **Routing**: SPA with query-params
- **Collaboration**: GitHub, Git, live syncing
---
## 🗂️ Project Structure
```
Appsus/
├── apps/
│ ├── misterMail/ # Email app (my work)
│ ├── missKeep/ # Note-taking app
│ └── missBooks/ # (Optional) Book app
├── cmps/ # Reusable components (e.g. LongTxt, UserMsg)
├── services/ # app-wide utils and localStorage service
├── assets/ # Icons, styles
└── App.jsx
```
---
## 📎 Demo & Setup
1. Clone the project:
```bash
git clone https://github.com/ShayIsso/Appsus.git
cd Appsus
npm install
npm run dev
```
2. Open in browser:
`http://localhost:5173`
---
## 🔄 Git Workflow & Collaboration
This project followed a real-world Git workflow:
- Created feature branches per app and feature
- Pushed and pulled frequently to stay in sync
- Wrote meaningful commit messages
- Used GitHub to coordinate and merge code
- Practiced resolving merge conflicts together
You can see this in the commit history on GitHub:
👉 [Commit History](https://github.com/ShayIsso/Appsus/commits/main)
---
## 🤝 Team & Collaboration
- Built as a **pair project**
- Worked via **feature ownership** – each developer led one app while integrating common components and design
- Used **query params** and shared services for inter-app communication
---
## 📄 Resources
- 📘 [Appsus Overview](./Sprint3-Appsus.pdf)
- 📨 [MisterMail Spec](./Sprint3-Appsus-misterEmail.pdf)
- 🗒️ [MissKeep Spec](./Sprint3-Appsus-missKeep.pdf)
---
## ✨ Credits
Made as part of the **Coding Academy** React Sprint
Check out my work: [ShayIsso](https://github.com/ShayIsso)