Note: This project was developed for a case competition in a short period of time. If you'd like to see improvements or have any questions, feel free to contact me at info@ethanzhou.ca
WealthScope is an intelligent investment portfolio dashboard that adapts to your experience level. Built with React and Tailwind CSS, it provides personalized insights and analytics for investors at all skill levels.
- Beginner: Simple, visual portfolio overview with educational tooltips
- Intermediate: Detailed metrics and sector analysis
- Advanced: Technical analysis with risk metrics and quantitative insights
- Dynamic questionnaire that adapts based on your answers
- Follow-up questions for precise experience level detection
- Smooth progress tracking with animated transitions
- 3 personalized portfolio insights based on your skill level
- 3 global market trends affecting your investments
- Interactive flip cards with hover animations
- Premium gradient UI with staggered animations
- Custom color scheme with brand identity
- Micro-interactions and button animations
- 3D flip card effects
- Smooth stagger animations for card grids
- Accessible tooltips with educational definitions
- Responsive design
- Real-time portfolio value tracking
- Holdings breakdown with sector allocation
- Performance metrics (Alpha, Beta, Sharpe Ratio, Max Drawdown)
- Visual sector distribution
- Tools & Insights tab with 15+ features
- Educational tooltips throughout
- React 18.3.1
- Tailwind CSS 3.4.14
- Lucide React (Icons)
- React Scripts 5.0.1
- Node.js (v14 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/ethanzhoucool/wealthscope-dashboard.git
# Navigate to the project directory
cd wealthscope-dashboard
# Install dependencies
npm install
# Start the development server
npm startThe app will open at http://localhost:3000
npm start- Runs the app in development modenpm test- Launches the test runnernpm run build- Builds the app for productionnpm run eject- Ejects from Create React App (one-way operation)
wealthscope-dashboard/
├── public/
│ ├── images/
│ │ └── logo.png
│ └── index.html
├── src/
│ ├── components/
│ │ ├── WealthScopeSurvey.jsx # Onboarding quiz
│ │ ├── WealthScopeDashboard.jsx # Main dashboard
│ │ └── InsightsBriefing.jsx # Daily insights page
│ ├── App.js
│ ├── index.css
│ └── index.js
├── package.json
└── README.md
The quiz dynamically adjusts based on user responses, asking 3-5 questions total. If intermediate-level responses are detected, bonus clarification questions are triggered to ensure accurate experience level detection.
- Beginner View: Large cards, friendly language, emoji indicators, simple metrics
- Intermediate View: Two-column layout, performance metrics, sector breakdowns
- Advanced View: Technical indicators, risk-adjusted returns, quantitative analysis
Hover over any underlined term to see a simple, clear definition. Over 17 investment terms explained throughout the interface.
Intercepts users after the quiz to show personalized market insights before accessing the main dashboard. Content complexity adapts to user level (beginner/intermediate/advanced).
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Lazy loading for optimal initial load
- CSS animations using GPU acceleration
- Optimized re-renders with React hooks
- LocalStorage for session persistence
Given more development time, potential improvements could include:
- Real-time market data integration via API
- User authentication and portfolio sync
- Historical performance charts
- Mobile app version
- AI-powered investment recommendations
- Social features and portfolio sharing
- Dark mode support
- Multi-language support
For questions, improvements, or collaboration opportunities:
Ethan Zhou
📧 info@ethanzhou.ca
Built with ❤️ for a case competition