Stocks
A stock search and analysis app that allows users to search for stocks by name and view detailed information about each stock.
Live VersionRepo
Project Goal
My goal was to build a reliable stock search app using real-world APIs. Users can search for a stock by name and analyze its trends using historical data. The app displays charts for 7-day, 6-week, and 5-month periods, along with real-time price updates. (Note: only the currently selected stock is updated every 15 minutes.)
Tech Stack
- React, TypeScript, Vite, plain CSS
- Vitest for unit testing
- Custom caching using React Context and a usePersistedState hook
My Contributions (Solo Project)
With mentorship support from Martin Stadler, I completed the following:
- Converted a Figma design into a responsive UI using plain CSS
- Implemented a caching system using
useContextand a customusePersistedStatehook - Created reusable, typed components with clean TypeScript interfaces
- Wrote unit tests with
Vitestto ensure app functionality - Built an quote auto-update feature to update the quotes of the stocks
Iterations & Thought Process
This project went through multiple iterations and overlapped with several Chingu Voyages. I used what I learned from this app, like caching logic and search implementation, to contribute more effectively to team projects.
I originally used Material UI, but switched to plain CSS to improve my layout and styling skills. Since I wasn’t familiar with turning Figma designs into HTML/CSS, I worked with a tutor, Green L, to guide me through the process.
Due to API rate limits, I added local caching and integrated a fallback API to ensure the data remained reliable even during refresh limits.
What I Learned
- How to build a UI from a Figma design without using a UI library
- How to manage API rate limits using caching and fallback strategies
- How to write scalable, maintainable React code with TypeScript
- How to test core logic using
Vitestand improve based on feedback