Introduction
Ever since I started diving into the world of stock trading, finance has become my latest obsession. The thrill of managing portfolios, tracking stock movements, and analyzing financial data felt like a blend of strategy, intuition, and good-old problem-solving. As a tech enthusiast, I realized there was a way to combine my passion for trading with my skills in full-stack development. That’s how I landed on my latest project: Wall Street X—an app where users can manage their stock portfolios, log trades, and view real-time data, built with a Flask API backend and a React frontend. This wasn’t just a fun project—it was real-world experience that reinforced every lesson I’ve learned about both finance and software engineering. Here’s a look into the tech stack, the features, and how it all came together.
The Stack and Technologies
This project leveraged a diverse stack, with technologies selected to meet the needs of a high-performing, dynamic application:
Frontend: React
React was perfect for building a single-page app where users could interact with their portfolios in real-time. React Router allowed me to create a smooth, multi-page experience where users can toggle between their dashboard, trade history, and stock picker.
Backend: Flask API
Flask was the backend workhorse. I built out an API to handle CRUD operations for resources like Users, Stocks, Portfolios, and Trades. Flask-RESTful simplified endpoint creation, while Flask-Bcrypt and JWT authentication handled user logins securely.
Database: SQLAlchemy with SQLite
Using SQLAlchemy as the ORM, I designed a database schema with one-to-many and many-to-many relationships. The database stored users, trades, stocks, and portfolio data with data integrity and allowed for efficient querying of stock prices and trade histories.
Formik for Forms and Validation
Managing user input and validation with Formik made the login and trade forms feel polished and user-friendly. I implemented data type and format validations to prevent users from entering incorrect data.
Render for Deployment
With Render, I was able to deploy the app effortlessly, and I’ll continue using it for hosting Wall Street X once I’m ready to launch. Render’s support for both frontend and backend hosting simplified the deployment pipeline.
Meeting Project Requirements
Wall Street X wasn’t just a creative project but also a comprehensive solution that ticked off every project requirement:
Backend with Three Models and Relationships
The app has Users, Stocks, Portfolios, and Trades. Here’s how I set up the relationships:
One-to-Many:
Each user can have multiple portfolio entries, and each stock can be traded multiple times by different users.
Many-to-Many (with attributes):
Trades form a many-to-many relationship between users and stocks. This Trade model has user-submittable attributes like trade quantity, price at trade, and timestamps, making each trade unique and recordable.
Full CRUD Actions
Users can create and view trades, update profile information, and view real-time stock prices. Additionally, every interaction with a portfolio entry is logged, providing full CRUD actions on resources, particularly Trades and Portfolios.
Client-Side Routing
React Router enabled seamless navigation with routes for the login page, dashboard, trade history, and stock picker. This enhances the user experience by giving them quick access to all features from the navigation bar.
Data Fetching and Validation
Using Axios, I integrated data-fetching with the backend API for a smooth experience where data updates as users add new trades or stocks. Formik validates login details and trade entries with type and format validation, ensuring robust user input.
Why Wall Street X Was Real-World Practice
Building Wall Street X was like running a mini-fintech startup. Each feature—login security, real-time data display, CRUD functionality—required best practices for software architecture, database design, and user experience. Handling real-world issues like data validation, transaction integrity, and authentication provided hands-on learning. And the project turned into a valuable sandbox to practice techniques essential in both finance and tech.
As I move forward with finance, this project will be a proud addition to my portfolio. It reflects both my technical skills and a deepening understanding of the financial world. Stay tuned—Wall Street X will be live on Render soon!
Top comments (0)