Holistic WebDev Challenge Submission
By Asmae
📚 Table of Contents
- What I Built
- Features
- Demo
- Screenshots & Highlights
- Journey
- Design & Architecture
- Tech Stack
- Challenges & Solutions
- Lessons Learned
- Future Improvements
- GitHub & Credits
🎯 What I Built
ASpace is a sleek, modern intranet dashboard designed for hybrid teams, remote workers, and in-office environments. It combines productivity, wellbeing, and collaboration into one centralized space — turning the traditional intranet into a daily companion that motivates and connects.
The platform blends company updates, co-editing simulation, AI assistant, and personal growth tools in a fun, gamified interface to keep users engaged and focused.
🌟 Features Overview
🧠 Hero & Contextual Info
- Dynamic clock and real-time weather (geolocation)
- Rotating motivational quote
- Minimalist greeting area
🤖 AI Assistant Zone
- Eye-blinking avatar + contextual tips
- Smart reminders (hydrate, stretch, relax)
- Dynamic messages depending on time of day
📒 Sticky Notes System
- Create, delete, edit, color-coded notes
- Stored in
localStorage - Persistent across sessions
👥 Live Co-Editing Simulation
- Floating avatars with random mouse & typing simulation
- Simulated user names + online status
- Adds a collaborative vibe even when working solo
🌱 Wellness Corner
- LoFi Player for focused work
- Breathing exercise (4-7-8 animation)
- Random inspiring quotes
🏅 Gamification Zone
- 🐾 Office Pet that grows based on streaks
- Weekly challenges with checklist progress
- Mood Tracker (emoji scale)
- Unlockable Badges:
- Early Bird 🐣
- Focused Flow ⚡
- Zen Master 🧘
📰 Company News & Team
- Internal announcements & HR messages
- Upcoming meetings + attached docs
- Project status indicators (progress bars)
- Team member birthdays
- Office location of colleagues
- Recently added docs (quick access)
🔗 Demo + GitHub
🖥️ Live Preview
📂 GitHub Repository
🏠 Home Page
- Hero with weather, time, and AI assistant greeting
- Sidebar dashboard with minimal icons and clear hierarchy
- All zones grouped using clean card layouts and separators
📋 Sticky Notes & Reminders
- User-created notes with color variants
- Hydration and pause reminders at the top of the screen
👀 Co-Editing Experience
- Real-time movements of teammates simulated
- Avatar + status + keyboard animation to simulate live presence
🎵 Wellness Section
- LoFi music player embedded with simple controls
- Animated breathing card with 4-7-8 technique
🎂 Internal Dashboard
- Birthday tracker with avatars
- Project progress (animated bars)
- Document links with tags and quick view
🛠️ Design & Architecture
ASpace follows a modular structure:
/src
/components
/Header
/Sidebar
/MainContent
/Common
/assets
/styles
/utils
Each functional zone is isolated into a component: maintainable, scalable, and reusable. The sidebar acts as the anchor of the entire app, while the MainContent dynamically changes based on the selected zone.
TailwindCSS was used for UI layout, with custom themes via CSS variables.
📐 Tech Stack
| Layer | Tools |
|---|---|
| Markup | JSX + HTML5 (semantic) |
| Styling | TailwindCSS + CSS modules |
| Logic | Vanilla JS + React Hooks |
| State | useState + useEffect |
| Storage | localStorage |
| Deployment | Vercel CI/CD from GitHub |
🚧 Challenges & Solutions
| Challenge | Solution |
|---|---|
| Simulating co-editing with animation | Used interval timers + CSS transitions |
| Making widgets persist | localStorage for notes, mood, badges, etc. |
| Non-disruptive wellness tools | Floating UI, accessible from all zones |
| Gamified elements | Emoji feedback + dynamic pet animation |
| Clean layout without overload | Card separation, iconography, and spacing |
💡 Lessons Learned
- UI cohesion matters: Consistency in card UI, spacing, and iconography improves UX dramatically.
- Gamification boosts engagement: Even simple animations or badge systems enhance interactivity.
- Modular thinking helps: Building small, focused components makes future iterations easier.
- Balance is key: Combining productivity and wellness creates a dashboard users want to return to.
🔮 Future Enhancements
- Dark mode with
prefers-color-scheme - Save user data to backend (MongoDB + Express)
- Real-time co-editing with WebSockets
- Role-based content (admin vs staff)
- Internationalization (i18n)
- Full calendar sync (Google Calendar)
🙌 Credits
Designed & built by: Asmae
Icons: Lucide.dev
Images: Pexels, Unsplash
Fonts: Google Fonts (Urbanist)
🪄 License
MIT — open for collaboration, suggestions & forks!
Feel free to remix ASpace and make it your own 🚀
💬 Thanks for checking out ASpace! If you liked the project or have feedback, leave a comment or connect on GitHub. I'd love to hear your thoughts! 🌟
Top comments (0)