🏰 The MagicSync Castle — Understanding Our Building Blocks!
Welcome to the secret behind MagicSync! Think of our project like a big castle with many rooms. Each room has a special job! Let's explore!
🎨 The Design Room — @local-monorepo/ui
The UI Layer is like the decoration team that makes everything look beautiful!
What It Does
- Makes all the buttons, colors, and layouts!
- Gives everyone a consistent look (like a school uniform!)
- Uses Nuxt UI v4 — the best toolkit for pretty interfaces!
- Has Tailwind CSS — like having a magic paint box!
Superpowers
- ✅ Pre-made components (like LEGO blocks!)
- ✅ Dark and light modes (for day and night!)
- ✅ Smooth animations (everything moves nicely!)
- ✅ Works on all screen sizes!
🔐 The Gatekeeper — @local-monorepo/auth
The Auth Layer is like the security guard at the castle entrance!
What It Does
- Checks who you are (are you really YOU?)
- Keeps bad guys out!
- Manages passwords and secret codes
- Uses Better Auth — a super trustworthy security system!
Superpowers
- ✅ Login and registration
- ✅ Session management (keeps you logged in!)
- ✅ Server protection (only allowed people enter!)
- ✅ Works with the Database to remember everyone!
🗃️ The Treasure Room — @local-monorepo/db
The Database Layer is like the giant treasure chest that stores everything!
What It Does
- Stores all your posts, users, and settings
- Remembers everything forever (until you delete it!)
- Uses Drizzle ORM — a super organized librarian!
- Uses Turso — a fast and reliable storage!
Superpowers
- ✅ Never forgets your data!
- ✅ Super fast (like a race car!)
- ✅ Keeps everything organized
- ✅ Can handle millions of treasures!
🤖 The Innovation Lab — @local-monorepo/ai-tools
The AI Tools Layer is like the mad scientist lab where magic happens!
What It Does
- Uses AI to help create content!
- Generates ideas and improve posts!
- Has a teleprompter for videos!
- Analyzes your growth!
Features
🧠 Growth Strategy Dashboard
- Today's/This Week/This Month to-do lists
- 5 golden rules always visible
- 7/30/90 day action plans (saved for you!)
🎬 Content Pipeline
- Idea brainstorming (20+ ideas at once!)
- Hook variations (4 proven types + custom!)
- AI Health Check (Gemini 2.0 Flash analyzes your script!)
- Teleprompter (with camera, speed control, focus mode!)
- Edit checklist (3 quick checks!)
- Upload to platforms!
📊 Data Analytics
- Input your post stats
- Get instant recommendations!
- "LOW CTR?" → Make thumbnail brighter!
- "LOW RETENTION?" → Cut the intro!
🖼️ The Art Gallery — @local-monorepo/assets
The Assets Layer is like a beautiful art gallery where images, icons, and files hang on the walls!
What It Does
- Stores all images, icons, and static files
- Makes them available to every other room!
- Keeps everything organized!
Superpowers
- ✅ One place for ALL your media!
- ✅ Shared across the whole castle!
- ✅ Fast loading (no waiting!)
⏰ The Time Tower — @local-monorepo/scheduler
The Scheduler Layer is like a magical clock that posts things at the perfect time!
What It Does
- Decides WHEN to send your posts!
- Manages a queue (like a line at the bakery!)
- Talks to social media platforms!
- Uses FullCalendar for the visual calendar!
Connected Platforms
- 🐦 Twitter/X
- 📸 Instagram (via API)
- 🎵 TikTok
- 🎬 YouTube
- And more!
📋 The Bulk Post Office — @local-monorepo/bulk-scheduler
The Bulk Scheduler Layer is like a super efficient post office that can handle thousands of letters at once!
What It Does
- Reads CSV files (magic spreadsheets!)
- Creates hundreds of posts instantly!
- Perfect for planning big campaigns!
Superpowers
- ✅ Upload a list of 500 posts in seconds!
- ✅ CSV format (easy to create in Excel!)
- ✅ Smart validation (no mistakes!)
- ✅ Works with testing (Vitest + Playwright!)
🤝 The Connector — @local-monorepo/connect
The Connect Layer is like the friendly ambassador who makes friends with other social platforms!
What It Does
- Handles OAuth (the "Login with Facebook" buttons!)
- Manages API connections to all platforms!
- Stores access tokens securely!
Superpowers
- ✅ One-click social connections!
- ✅ Secure token storage!
- ✅ Multi-platform support!
📝 The Story Room — @local-monorepo/content
The Content Layer is like the library where blog posts and stories live!
What It Does
- Uses Nuxt Content to manage static content!
- Creates beautiful documentation!
- Manages the knowledge base!
Superpowers
- ✅ Markdown support (easy writing!)
- ✅ Beautiful code highlighting!
- ✅ Fast page loads!
📧 The Message Bird — @local-monorepo/email
The Email Layer is like a postal pigeon that sends important emails!
What It Does
- Sends transactional emails!
- Uses MJML for beautiful email templates!
- Welcomes new users, resets passwords, and more!
Email Types
- ✅ Welcome emails
- ✅ Password resets
- ✅ Notifications
- ✅ New follower alerts
📦 The Template Shop — @local-monorepo/templates
The Templates Layer is like having a collection of pre-made greeting cards!
What It Does
- Stores post templates!
- Makes creating posts faster!
- Keeps your brand consistent!
Superpowers
- ✅ Reusable formats!
- ✅ Brand consistency!
- ✅ Quick content creation!
🏰 The Main Castle — @local-monorepo/site
The Site Layer is like the big castle that brings everything together!
What It Does
- Extends ALL other layers!
- This is what users actually see and use!
- The final product that makes magic happen!
What It Includes
- Everything from every layer!
- All the pages users visit!
- The main application!
📚 The Library — @local-monorepo/doc
The Documentation Layer is like the rulebook and map for adventurers!
What It Does
- Built with VitePress (super fast documentation!)
- This very documentation you're reading!
- Guides, tutorials, and references!
🎯 How They All Work Together!
User visits the Site 🏰
↓
Auth checks who you are 🔐
↓
Database shows your data 🗃️
↓
AI helps create content 🤖
↓
Scheduler posts at the right time ⏰
↓
Connect talks to social platforms 🤝
↓
Email sends confirmation 📧
↓
Stats show how it went! 📊🔧 For Developers
If you're a developer wanting to contribute:
| Layer | Tech Stack |
|---|---|
| UI | Nuxt 4, Nuxt UI v4, Tailwind CSS |
| Auth | Better Auth, better-sqlite3 |
| DB | Drizzle ORM, Turso (LibSQL) |
| AI | Google Gemini 2.0 Flash, AI SDK |
| Scheduler | FullCalendar, Twitter API, LinkedIn API |
| MJML | |
| Content | Nuxt Content |
Now you understand the MagicSync castle! Each room has a special job, and together they make the magic happen! 🏰✨
Ready to explore more? Check out our Installation Guide!