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