portfolio.io
Introduction
Have you ever wanted to showcase your portfolio and its performance to your friends? What about discovering new portfolio strategies from others? Well then, portfolio.io is the platform for you! Introducing a new place to share your investment portfolio with your friends, test new strategies, and gain new insights through the power of LLM retrieval-augmented generation!
Getting Started
To get started, you'll need the following:
Auth0
Auth0 is used to provide user authentication (login and signup). You'll need your application's domain and client ID. See the frontend .env.example for the required environment variables. Make sure to add "http://127.0.0.1:8000, http://127.0.0.1:8000/create-username, http://127.0.0.1:8000/dashboard" to the Allowed Callback URLson your Auth0 dashboard. Also, add "http://127.0.0.1:8000" to the Allowed Logout URLs and Allowed Web Origins. Change these to match your domain upon deployment.
Supabase
Supabase is used to store the user data, portfolio data, and stock data. You'll need three tables to store the aforementioned information. See the frontend .env.example and the backend .env.example for the required environment variables. Make sure to either disable RLS (not recommended) or add a new policy!
Pinecone
Pinecone powers the vector embeddings and search used in RAG. You'll need an index, with the configuration being: Dimensions = 1536 and Metric = cosine. See the backend .env.example for the required environment variables. This will be used for the Chatbot feature.
OpenAI API
OpenAI's API provides the LLM used to create vector embeddings and generate responses after vector search. See the backend .env.example for the required environment variable.
EdgarTools
To create the 10-K and 10-Q embeddings to add to Pinecone, the edgartools package in Python is required to download the reports. An identity needs to be set, so add your name and email to the backend .env.example.
React Prerequisites
"@auth0/auth0-react": "^2.2.4",
"@supabase/supabase-js": "^2.45.2",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"lucide-react": "^0.439.0",
"react": "^18.3.1",
"react-datepicker": "^7.3.0",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.1",
"react-scripts": "5.0.1",
"recharts": "^2.12.7",
"web-vitals": "^2.1.4"
Python Prerequisites
edgartools==2.22.1
langchain==0.1.20
langchain-pinecone==0.1.1
langchain-openai==0.1.7
openai==1.30.1
python-dotenv==1.0.1
supabase==2.5.1
yfinance==0.2.12
Launching the App
Once you have done all this, you can finally launch the app! Make sure to run embed.py if you want the chatbot feature to work. Otherwise:
cd frontend
npm run build
cd ..
python manage.py runserver
Other Technologies and Packages
React
React was chosen as the frontend Javascript framework. Along with rendering the site's pages and components, Axios was also used to make calls to the backend.
Django
Django was used as the backend for creating endpoints. I'd like to add more to the app in the future to fully leverage Django's capabilities, and maybe move some of the calls to Supabase from the React frontend.
Recharts
Recharts was used to easily add React components displaying the line graph of performance and the pie chart for portfolio composition.
yfinance
yfinance was used to retrieve historical stock information.
Demo
Acknowledgements
The AI Stock Insights feature was based on the Mango10K RAG chatbot built by my team, Mango10K, for MongoDB's 2024 GenAI Hackathon. I swapped out MongoDB in favor of Pinecone's increased storage (0.5GB vs 2GB), though the scripts can be easily modified to be used with either.
License
This project is licensed under the MIT License - see the LICENSE file for details.