Website: citizenbull-fa4ca.web.app/
Github: /UglyMice/CitizenBull
CitizenBull is a market dashboard app I designed to explore working with real-world APIs and building full-stack functionality. It integrates data from WeatherAPI (for location, time, and weather) and Finnhub.io (for stock ticker data, company news, and financial metrics). Users can build a custom watchlist, track live data, and view forecasts.
The app is built with React using a Vite setup and uses Firebase on the back end for user authentication and account management.
Thought Process
Original Notes for Features
Login / Profile
Store User Preferences
Stock Market
- Market News
- Symbol Data
- Symbol Search
- Company Profile
- Company Info
- Company News
Watchlist
- Add/Delete/Search
- Update every 30s
Weather
- Current Weather
- Location
- Current Weather
- Icon / Imagery
- Local Time / Timezone
- Sunrise / Sunset Time
- 3-Day Forecast
- Use time to change site theme
API Testing
As this was my first time working with APIs, I started by experimenting with basic JavaScript and CSS. My goal was simply to practice fetching and displaying data — to get comfortable with the structure and see what kind of information I had access to. This early testing phase helped me understand how to shape the user interface around the data I was working with.
Early UI Design in Sketch
During the design process, I began mapping out the login and signup flow — allowing users to set their location, choose a username, and select an icon. I also included a “Continue as Guest” option for users who prefer to explore the app without creating an account. These early design decisions helped shape the app’s accessibility and user onboarding experience.
React Build
Early On
In the early stages of building the app with React, I focused on structuring and styling my components. Much of the work centered on getting the layout right and defining the visual hierarchy. I used bright background colors temporarily during development to clearly see the boundaries of each container and refine spacing across the layout.
Final v1
CitizenBull v1 represents a key milestone where CitizenBull shifts from idea and experimentation into a breathing, real-world app. This version prioritizes stability, usability, and the full integration of core features, creating a strong base to build on.
It sets the stage for ongoing improvements and feature expansion, serving as a strong foundation for adding more advanced functionality in future versions.