StockQuik
UI Wireframes — Initial Design Specification
Angular 21 Spring Boot 4 MySQL
Team — Sakib Khan & Jeter Gutierrez
Program — Mthree Capstone
Screens — 7 views
Status — Initial wireframe
1
Login page
/login — public route
Default state /login
Login
No inline error divs — all feedback via toast (top-right)
Toast states top-right overlay
Error toasts
No account found with that email
Wrong password — please try again
Please enter your email
Please enter your password
Success toast
Welcome back!
Loading state
Signing in...
Button disabled + text changes while loading. Toast fires on success then navigates to /home
2
Signup page
/signup — public route
Form with validation /signup
Sign Up
Inline field errors shown below each input. Button disabled if email exists.
Validation rules + toasts
Inline field rules (shown on touch)
✗ Valid email is required
✗ An account with this email already exists
✗ Must be at least 6 characters
✗ Must contain 1 uppercase letter and 1 number
✗ Passwords do not match
Server-error toasts
An account with this email already exists
Signup failed — please check your details
Success toast (then redirect to /login)
Account created! You can now log in.
Real-time email check on focusout. Client-side validation fires before any API call.
3
Home page
/home — AuthGuard protected
Home dashboard /home
Portfolio value
Cash balance
Total gain/loss
Holdings
Stock chart (selected symbol)
Search + buy panel
Max
Buy AAPL
Cart
3
Top movers
4
Portfolio dashboard
/portfolio — AuthGuard protected
Portfolio — Holdings tab /portfolio
Portfolio value
Cash balance
Total gain/loss
Shares held
Symbol chart (live poll 20s)
Portfolio history chart
Stock search
Action
Quantity
Max
Buy TSLA
Cart (3 items)
Checkout (3 items)
Holdings
Transactions
Watchlist
Analytics
Sell
Sell
Sell
Sell toast appears on success. Each row clickable to load that symbol's chart.
Portfolio — Analytics tab
Holdings
Transactions
Watchlist
Analytics
Portfolio overview
Holdings value
Cost basis
Unrealized gain
Return %
Trade activity
Total trades
Buys
Sells
W / L record
W
L
Holdings performance + risk
Best holding
Worst holding
Most traded
Max drawdown
5
Stock chart detail
Embedded in home + portfolio — symbol selected via search
Price chart view
Price
Volume
1M
3M
1Y
Market cap
Today vol.
Open price
Volume chart view
Price
Volume
1M
3M
1Y
Price/Volume toggle. Live polling every 20s via setInterval. Interval cleared on destroy.
6
Settings page
/settings — AuthGuard protected
Settings /settings
Reset
Change
Settings — field labels
Starting balance
Default cash on new account
Dark mode
Toggle app theme
Price alerts
Notify on watchlist price moves
Reset portfolio
Clear all holdings and transactions
Reset
Change password
Update your account password
Change
7
Diagrams / documentation page
/diagrams — AuthGuard protected
Diagrams page /diagrams
System architecture
Auth flow
Transaction workflow
Database ERD
Section: System architecture
REST
MySQL
SVG responsive with width="100%". Renders in a white card with overflow-x: auto on small screens.
Section: Database ERD
1:1 · 1:many relationships