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!