Fixing all the problems

So this devlog is gonna be relatively short, cause it just comprises of correcting all changes requested, most importantly hosting on nest

For the project reviewer

Theres still a few issues with the website, but these are largely due to the hosting being on nest, cause the render website is mostly fine.

• Firstly, the whole website is very laggy and all round unresponsive for a few seconds after any press taht requires a query to supabase or redis

• Secondly, the dashboard does not render properly the first time, so id suggest to click the try again button or reload the page entirely.

• Even after reloading the portfolio performance part just doesn not work until you click on the one month or 3 month bnutton ( I have no clue why but this is on nest only) then it works

• The nest caddy does go down, like it did jstu at the time of writing this, so if it does happen to go down during the review, please check through tradesims.onrender.com, where the website is still upp

Thats all. Once again, Thanks !!

Just fixing deployed website

Fixed faqs, removed oauth, wrote the readme and instructions for installation

ONE. LAST. DANCE

Hours: 12? 15? 20? (idek 😭😭)

What i did

Made the entire stock page have real data, you can actually buy and sell stocks now. This also updates transactions and holdings.

Brand new holdings page that shows every stock you own.

Finally, MY WEBSITE IS DEPLOYED.

Try it out now:

Visit TradeSims

All changes I made

Buy and sell card

• This actually works now. YOu can buy and sell stocks
• It has both backend and frontend checks for buying and selling capacity
• Unlike last time it shouws different metrics in the buying and selling panel. Buying power if u wanna buy and stocks owned if you want to sell
• The buy and sell button also update transactions

Holdings page

• Its a simple page where all stocks are mentioned with their values quantity and P/L incurred.
• Theres a button to access it from the hero on the dasboard

Wishlist

• I thought it was complete alst time, but when i checked the dashoard i remembered the buttons id added to trending stocks for adding to wishlist

• This one was slightly hard to do as it took changes in both JS and Python. I faced another error with color of the start but that worked out

• This led me to my next problem

Stocks not in database

• Whenever i called yfinance on dashboard for market movers and trending stocks it might not be in the database

• This led to issues whenever I tried to wishlist those stocks or visited them it failed

• Now Ive made a function to check if a stock is in the database, if its not, it updates top stocks and now it can be accessed

• The same goes for the search bar, if theres no stock present then you can search for it, and if yfin has it, it adds to stocks and is forever accessible and updates just like all other stocks

Deploying

• This IS THE HARDEST PART OF ALL

• Im not even sure how its working. but it is

• Ive used redis and Supabase for the cache and database respiectively

• Redis is mostlyto recude dependence on yfinance so taht i can reduce requiests, prevent rate limiting

• And uptime robot is for monitoring and keeping the webstie up.

Thats about it. Thanks for the read

Tradesims is officialy LIVE

Making The stock page Have real data

Hours: 10

What I did

I made everythine from the head to the news get real data from yfinance.

Oh and also, one of my friends told me about Trading View so i scrapped my own chanrt and used their library to make an actual candlestick stock chart

All changes

Chart

• Scrapped the whole old chart
• Used trading view js library
• Actual candlestick chart
• YFin stock data sends it over an api to the stock page

Stock head

• Gets data from yfin
• Has a fucntional button where ytou can wishlist and un wishlist stocks
• Price updates every 5 minutes

All other parts

The following:

- About page
- Key statistics
- Financials
- News
- Order history
- Holding Position

Have been grabbed from backend ( YFin and DB models ) to display data in real time

Buy/Sell

This is the only part of the page that is not using actual data, its still simulated and yotu cant really buy stuff rn. but soon itll work

Role of AI

• This time, AI was only used as a helper to debug code and check for syntax errors
• All code was written by me :)

Problems faced

Once again, the biggest problem here was spelling mismatch between the wesite API and component names and classes and id’s

( We all know how amazing i am at typing)

Whats left

• Making buy and sell possile
• Transactions update after buying and selling
• Making a dedicated portfolio and (maybe) transaction page
• Adding a FAVICON ( omgg i keep forgetting)

And thats about it. Thanks for the read !

FINALLY THE STOCK PAGE IS READYYYY

Hours: 17

Note

This is has been a grinddd. So many errors and aaaaaaa 😭😭😭
But the entire stock page with all of its components is currently complete.
The entire page uses fake data inside the MockData.jsFile :)
Next i gotta just create the real api endpoints and feed it to the frontend

Changes in details

The link

The url for the stock is in the format:

<main-url>/stock/<stock_name>

Eg. ( Localhost ) http://127.0.0.1:8000/stock/AAPL/

The top bar

Here is the place where the name and stock exchange is listed.
Watchlist button is also present here
Price, Gain and loss and time is also mentioned

Price chart

A detailed chart with historical data of the stock witht timelines ranging from 1D to Max

About

Simply, an about page with details of Stock

Stats

Displays:

• Opening and closing price
• Highs and lows (Last day and past year)
• Market cap
• Volume
• Avg volume
• Price to earning ratio
• Earning per share
• Divident yield
• Beta

IDK how but this will probabaly be hardest to link to real data as ill have to change models too :(

Financisls

Displays revenue and net income for As bar charts per quarter

News

Its the news duh

Might remove this if i cant link to real data

Order history

Only of said stock.
Straight from dataabse

Buying/Selling panel

Literally, just a place to buy and sell your stocks that you own.
It has its own frontend way of checking if you can afford a stock or not

Position card

Page to display what the user owns of the stock
Has other details like Investment and value

Related stocks

Shows some more stocks to explore
( currently jst like the ones available in the fake data )

AI

AI played a good role here. Helped me debug sooooo many errors and helped in writing certain jss animations and css blocks.

All HTML and most CSS and Js was written by me ( Evident by the 17h worktime 🤣)

Next

• Use real data.

• Test runs

• Connect stock page to main page

• Debug

(Hopefully thats all)

Thanks for the read !!

Im almost done with the stock page

Ive been making this stuff for 9 hours now, and I dont have anything to show, but gimme a few hours ill get it done. just the CSS left now

Bug Fixes and live data

Hours: 9

What all I completed

• All Bugs mentioned in the previous devlog have been fixed.
• All data related to stocks (except for login page) has been connected to stock database so that all data is live
• Created multiple components for stock details and page ( in development )

Changes in details

Live data

• Finnhub API was scrapped to use only YFinance as the main Data provider.
• A task was scheduled to run every 5 minutes to update all data to stock database
• Instead of all pages calling the API for live data, all pages ping the database, which is updated as mentioned above

Bug Fixes

Live data

Pages that now have live data:
- Landing page ( Markets page and moving section )
- Watchlist part
- Trending stocks ( With sparklines )
- Floating stock cards

Problems faced

• I sometimes got timed out cause I called the API too many times
• I had to switch to the database metnod so i could reduce api queries.

User button

• This was a small fix, but took a surprising amount of time 😭😭
• The logout button is now hidden under the user initial button on top right

File cleanup

• Extra blocks of code, specifically fake js data was removed
• Fairly strightforward

Stock listing page

• This is still in development
• I have created multiple components
  • Navbar
  • Details
  • Right panel
    • Buy and sell stocks
    • Related stocks
    • User Ownership
  • Left panel
    • Stock progression chart
    • Conpany overview
    • Finance
    • Company News
    • Statistics
    • Order History

All compoenents come together inside a stock page that will be displayed

• This page is stil under development.

• I am planning to only use fake data for now, the i will slowly progress to real data from API and database

• There is very little js that i have written for this part till now, but there are more files planed

Everything I learnt

• Its best to store all data from apis specially if multiple pages need to visit it, cause well then it doesnt reach limit.

• Revised JS and how to put together animations

• Again, I already listed everything I learnt and did in the bug fixes :)

Role of AP

• AI only helped he understand the error specifics
• All code is written by me

Current bugs

• The stock page is not complete(it is far from done)
• I dont have any rn but theyll pop up

Next steps

• Complete the stock page
• Connect it to the database
• Allow for buying and selling
• FIX ALL BUGS ( They always come )

Thats about it !! Thanks for the read

Note

This is an extension of the previous devlog, at in all it was too long to fit inside one 😭😭😂😅

Watchlist

• This was again, fairly straightforward. I simply got the values from the Datapased and parsed it instead of the placeholder array

Current Bugs

• While the stock listed is itself part of the users wishlist, the pricing, change percent and sparkline are currently totally fake
• To fix this ill have to get the stock data update it in the database and create a function to do this every 10 miins or so

Recent Transactions

• Here too, the data is simple parsed from backend and sybstituted instead of the placeholder array.
• These values however in the database, are obviously made up. The purpose right now i to simply get the data, cause then if i upload it i am guaranteed to get it

Problems faced

• The Buy tag inside the transactions section was very uncooperative
• I later realised that it was due to the capitalisation of the tag in the database wheras the JS reciever expected it in lowercase, and rejected it, hence printing it as sell

Everything I learnt

• API selection. Oh man! Theres so many parameters to check for and so many pros and cons and ups and downs.

  • I should have probably evaluated all of that before actually starting to build the endpoint; It would probably have saved me an hour or two

• Capitalisation, i mean i knew it was important, but still. Spellings and capitalisation gave me a headache 😭😭😭
  ~ [ I really gotta improve my typing accuracy]

• Data sttructuring designs matter a lot more than i thought. When creating the dashboard, all i thought was, what all do i want. BUt then i realised alter, that its more about what all will the backend send and i should have structured it accoring to that; It would also have saved me some time

• Even tho i did plan everything well this time, i did slip out at a few places; like the 0 Change error in my main section is caused due to the way i made my backend

• There is a lot more, but most of it has been covered in the problems sections, which obviously meant learning about everything that meant wrong, so im not going to repeat it all here

Role of AI

• During this time, AI did not write any code. ALl implementation is my own work; Ai merely acted as a debugger for some of my issues
• Moreover, it helped me progress though my plan in stages that actually made sense
• It also stored all of my past mistakes and issues and designs so i could easily refer them and write the code

Next Steps

• First, obiviously, just fix all the bugs in the Updated version

• once thats done, i plan to create a way for users to actually quote and buy stocks.

• I also want to create detailed amalysis pages for stocks dynamically, if possible ( I really hope i dont have to change APIs again 😭)

• Thanks for the read !!

MASSIVE CHANGES

Hours: 10

The list includes:
- User data pulled form database instead of fake values
- Live market overview
- Daily gainers and losers with live data
- Sparklines and growth charts for all stocks
- Watchlist dynamically rendered from user’s database
- Transactions rendered from database
- Portfolio progression chart created from users previous net worths

Disclaimer

These changes were meant to be distributed among two journals. But due to my absolutely amazing memory i forgot and created all these functions
Hence this devlong is gonna be a long one

Changes in depth

User data

• Earlier, on logging in, the user visited a dashboard with palceholder name, portfolio, networth etc.
• This has been updated via the dashboard_api function in views.py to dynamically fetch user data

Problems faced

• Mismatch with the expected json data of the Backend meant that initially the data was not rendering properly, and just returning placeholder data

Current Bugs

• The way the data is saved daily means that there is virtually zero change in the net worth of the indivisual, atleast as far as this section is concerned
  • This causes the change and change percent to always remain at 0

Market overview

• Yahoo’s YFinance API endpoint has been used to get live market data of the S&P500, NASDAQ and Dow Jones ETFs.
• This data is rendered through markets.py file inside services

Problems faced

• Initially, I thought of using finnhub as the provider due to its generous free tier and live data.

  • This however did not work as the candles required to generate the sparkline of each graph were not included in the free tier of finnhub

• Next, i consider Alpha Vantage as my data provider. This idea was quickly scrapped due to its sparing free tier of 25 requests/day which would be exhausted in mere minutes

  • I briefly considered a mix of Finnhub and Alpha Vantage to get the best of both worlds, but the lag between responses and the limit for alpha vantage were still limiting

• So finally, i went with a mix of Finnhub and YFinance, and i thought it was the best combination. However, again, it lagged, it would not render properly. And besider, apart from the 15 mins delay, which, lets face it, is not game changing for a simulator, YFinance offered everything i needed, and also it had good documentation i could refer to

• My final data feed comes from YFinance and yahooquery, which I am quite proud of

Current Bugs

• Sometimes, there is still delay in the response, and im confused cause its very rare, and othertimes its not… Im still working on it

Trending

• Trending API is still in progress, i havent been able to get it to work with the current data, but ill get it done by the next journal

Progression Chart

• This is simply a chart that is dynamically created based on past portfolio worths of the user.
• Not many problems were faced here, thank god. It was fairly strightforward

Market movers

• The greatest gainers and losers, by day and percentage, are shown here. (Theyre the market movers after all 😅)
• This part was a considerable pain to get to work properly, particularly when i was using Finnhub, becuase it was very hard to find the gainers and losers, atleast for me.

Problems I faced

• Spellings mismatch with exact wording of the data the stock returned

• Issues with perfectly parsing it in the exact format required by JavaScript [What can i say, my typing is just that good]

• It was so bad that i did not even push my changes to github for this part

• YFinance for me somehow made this quite simpler and i was able to get it running.

• Thankfully, no errors presently

Creating Django Models, Admin Page & Connecting Frontend Pages to Database

Hours: 4.5

Objective

Create Django Models for backend foundation of TradeSims and connect the Login and Register pages to the backend database.

What I Worked On

• Wrote a markdown file first listing out all the models, fields, and relationships before touching code
• Translated that into models.py — ended up with 5 models: Portfolio, Stock, Holding, Transaction, Wishlist
  • Portfolio: one-to-one with User, starts everyone off with a $100k balance
  • Stock: symbol, price, exchange, etc.
  • Holding: links Portfolio + Stock, added a save() override so avg_buy_price calculates itself and the holding deletes itself if quantity hits 0
  • Transaction: logs every buy/sell with balance before/after so there’s a proper trade history
  • Wishlist: User + Stock, made sure someone can’t wishlist the same stock twice
• Used PROTECT on the Stock foreign keys so a stock can’t get deleted while it’s still tied to trades/holdings, but CASCADE on the Portfolio ones since those don’t make sense without the parent
• Ran migrations, tested everything through the shell and admin
• Set up admin.py for all models + created a superuser
• Defined GET and POST conditions for login and register views
• Added a component to cleanly display any client-side errors(such as password mismatch)
• Checked for multiple edge cases such as:
  • Duplicating usernames
  • Password mismatch
  • Incorrect username or password
  • Duplicating email id
• Created a simple logout form

What I Learnt

• on_delete matters more than I thought — CASCADE vs PROTECT changes a lot depending on whether the child record even makes sense without the parent
• Doing calculations (like avg_buy_price) inside save() keeps that logic in one place instead of copy-pasting it into views later
• Constraints like UniqueConstraint/CheckConstraint let the database stop bad data itself instead of relying only on form validation
• GET and POST methods
• Login required decorators
• Fetching data from HTML forms
• Django USER authentication using authenticate

Problems & Rabbit Holes

• Migration broke when I swapped a CharField (was just storing the stock symbol as text) for a proper ForeignKey to Stock. Django had no way to map the existing text values to actual Stock rows, so it errored out
  • Fixed by wiping the db and remigrating since there was no real data yet — if this happens again later with actual data I’ll need a proper data migration instead of just nuking it
• Multiple spelling mismatches across files meant that i had to carefully check and re iterate multiple files over and over again
• Forgot my superuser username 🤪 which lead me to use shell to retireve it

Functional Elements

• Fully working relational database — 5 models, all linked up properly with constraints
• Django Admin page working for all models
• Superuser set up
• Functional Login and Register Pages tied to database
• Pop up Errors on client side
• Both frontend and backend authentication
• Simple logout functionality

Role of AI

• AI was used as a reviewer and technical mentor to validate database design decisions, strengthen Django concepts, and help debug migration issues.
• AI was used as a syntax-reviewer (and in this case, a spelling checker), allowing me to focus on implementing logic in the functions.
• All implementation and code integration were completed by me.

Next Steps

• Research for the most suitable API key given my current website scope
• Implement its API through a HTML form to fetch JSON data
  • Parse the data and wire it up to backend
  • Create a dashboard with all the user’s data
• Implement OAuth Buttons

Error Pop-ups

Day 3 & 4 - Creating login and register pages

Hours: 3

Objective

Create and render the frontend part of login and register pages for website

What I Worked On

Writing HTML code and creating a form to input the First Name, last name, user ID, email ID, and password.

After initial creation of HTML pages, it was broken into functional components to make code more readable andstructured

Styling

The HTML forms and components were created by me, with specific styling desicions inspired by Claude.

The Specific CSS and JavaScript used to stylise the webpage, and to check for password strength, and email validity was implimented by claude.

All AI generated code was cross checked and modified by me to fit the project’s coding style

Functional Elements

• Working login page
• Working register page
• Password strength check at client side
• (Frontend only) Google and GitHub OAuth buttons
• Panels for both login and register pages to make the page visually appealing

Next Steps

• Implement Django database models and SQL queries to be able to save user information
• Make OAuth Buttons functional
• Create Dashboard for user to view their paper currency value, stock holding, portfolio value, etc
• Add API to be able to pull live data of stocks

Created multiple components for homepage(such as hero, markets etc.) , used CSS and JS to beautifully style landing page. Compiled all components into final home.html file to successfully run my django app for the first time

Completed initial layout with a navbar, and template indexing, ready to use as a base for all webfiles. Also added a new django software

Initial layout and template html file