Subtitle: Your Personal Command Center
Obel is a futuristic dashboard-style web app built to combine markets + portfolio tracking + news + weather + budgeting + productivity + an AI workspace assistant into one clean “command center” experience.
This is a portfolio project focused on frontend engineering, polished UI/UX, modular components, and real API integration (market data powered by Twelve Data API).
Obel is designed to feel like a daily hub you’d actually open. Instead of bouncing between apps, Obel centralizes everything into a smooth dashboard workflow.
Obel originally included login/signup, but for the demo version it’s currently removed.
Why? MongoDB free tier can pause after inactivity, which makes always-on authentication unreliable unless upgraded to a paid tier. Since this is a showcase build, auth was removed temporarily and can be re-enabled once backend hosting is always-on.
The Dashboard is the main entry point for daily scanning and quick actions:
- Hero “Welcome back” section with Obel theme + motion animations
- Portfolio Snapshot module (net worth + goal progress bar)
- Today’s To-Dos gallery (pulled from Workspace board stored in
localStorage) - Clickable Weather tile → opens full Weather Dashboard modal
- Clickable Mini Calendar widget → opens full Calendar Planner modal
- Motivational Quote widget (refreshes periodically)
- Built with careful layout tuning so the dashboard stays readable across desktop/mobile
A dedicated page for market-focused portfolio tracking:
- Net worth + progress tracking visuals
- Interactive allocation pie chart + breakdown visuals (structured to scale)
- Growth chart to visualize portfolio performance over time
- Distribution chart to highlight allocation / category spread at a glance
- Webull-style trading chart section for stock performance / research
- Designed to feel like a fast-scanning “trading dashboard” experience
- Market data integration is planned/expanding using Twelve Data API
Goal: Keep this page clean and scannable like a real investing platform UI.
A budgeting and spending breakdown page:
- Budget totals + quick summary layout
- Category cards with progress bars
- Designed for “at-a-glance” money tracking
- Built as a practical companion to the portfolio workflow
A category-based news feed that supports “read later” research:
- Category pills: Political, Sports, Entertainment, Sci&Tech
- Glassmorphism news cards (image, headline, summary, source, date)
- Clickable cards open the article link in a new tab
- Bookmark system stored in
localStorage - Saved articles modal (“Bookmarks”)
- “What is this page?” explainer modal for UX clarity
The Workspace is the productivity side of Obel — built like a mini project manager:
- Kanban-style board (To Do / In Progress / Done)
- Task modal with structured fields (priority, due date, etc.)
- Designed to feel like a real workflow system, not just a notes page
- Includes an AI Workspace Assistant concept panel to help:
- break down tasks
- suggest next steps
- guide daily prioritization (built to expand over time)
- Click the Weather tile → opens Weather Dashboard modal
- Click the Calendar widget → opens Calendar Planner modal
- Click a To-Do card → routes into Workspace context
- Use it for investing-focused views and market research layout
- Check the allocation pie chart for portfolio breakdown
- Review Growth and Distribution charts for quick performance + spread insights
- Use the Webull-style trading chart section to analyze stock movement and trends
- Built for fast scanning like a trading platform page
- Track spending categories + budget progress bars
- Designed as a “money management” companion tool
- Switch categories with pills
- Click a story card to open the full article
- Bookmark stories to save them for later
- View tasks by column
- Create/edit tasks through the modal
- Use the AI assistant panel as a workflow helper concept
Obel uses localStorage to make the demo feel “real” without requiring login:
- Workspace board →
localStorage["obel-workspace-board"] - News bookmarks →
localStorage["obelNewsBookmarks"]
This makes Obel usable after refresh and helps the project feel like a real product.
-
Twelve Data API is used for stock/market data integration (expanding)
-
NewsData API is used to pull fresh headlines by category for the News page
-
Groq API is used to power the built-in AI assistant experience
-
Weather/Quotes are fetched through backend API routes
-
The UI includes strong loading/error/fallback states so missing data doesn’t break the experience
- React (Vite)
- JavaScript
- Tailwind CSS + custom CSS
- Framer Motion (animations)
- REST API integration
- LocalStorage persistence
This project forced real “frontend engineering” work beyond just making things look good:
- Responsive dashboard layout fixes
- especially making cards behave in landscape widths
- Clickable card UX
- ensuring cards open links while bookmark buttons still work (event propagation)
- State + modal management
- multiple modals, loading states, fallbacks
- Deployment polish
- favicon/tab icon behavior differences after deployment
- Backend reliability
- MongoDB free tier pausing → led to removing auth for demo stability
- Expand Twelve Data usage for more live market widgets (quotes, mini charts, movers)
- Persist Workspace tasks to a database (instead of only localStorage)
- Re-enable auth once backend is always-on (paid tier / always-on hosting)
- Add saved portfolio holdings + real performance tracking
- Upgrade AI Workspace Assistant into a more functional workflow helper
Watch the full walkthrough here: Obel Demo Video
- Website link: https://theobel.vercel.app/
- Portfolio Website: https://jamxstudios.vercel.app/
- LinkedIn: https://www.linkedin.com/in/jonathanmirabal/
Portfolio / learning project. Feel free to explore and learn from it.