Website is in progress and is just for testing and learning purposes
I wanted to teach and inspire people about finance. Specially young people like me who probably haven't recieved proper education on finance. I got inspired by the GameStop saga earlier in the year, and therefore decided this would be a project and topic where I would be passionate.
I chose React as a JS library. I also chose to go with typescript instead of javascript as it offers a compiler and static typing. As for a "framework", I decided to go with the classic CRA (Create-React-App). The reason I use framework in quotes is because CRA is simply a template invoked by a single command.
Since GitHub pages can only compute static HTML, I used a tool that would automatically publish the react build folder (the static compiled HTML and JS).
As for other libraries, I used react-markdown to render the book which is written in Markdown
I used axios to fetch from alphavantage API, and sorted the data in a seperate file.
The rest of site is just normal react
Styling
My idea was an infinite scroll book. I chose typefaces that match a newspaper like font (The fonts are called Ranchers and Playfair Display). I feel like I achieved a very unique and user friendly design with a little colored accent and high quality images.
Performance
As for performance, I might need to run the images through a compressing algorithm as they are affecting large contentful paint times but other than that my website is pretty efficient (as should be)
Responsive
I think one of the big factors of my website is the reponsiveness. My website is almost fully responsive, with some edge cases here and there. My website can be viewed both on phones and desktop devices, which I am very proud of.
I've been doing programming for about a year, however I've only recently touched the realms of web dev and design. My previous experience meant that reading documentation and googling problems was no issue for me. I was able to pickup typescript pretty easily. As for react, I watched a short youtube series that took me about 6 hours to complete. Git was a non issue for me and basic config files are pretty easy to setup for me.
Bugs
My biggest issue was getting dynamic data from the alphavantage API to display properly and with routing since github pages isn't exactly meant for react-router. I spent 4 hours debugging the HashRouter alone. More than 8 hours on the API (in one sitting, probably why it took so long).
Overall
I would say I am fairly happy with the way I developed this site. I would definetely change a lot of things if I had the chance to startover with my current knowledge. It took me a while to get started with anything meaningful as I decided to over reach for my styling and make impulsive changes to my tech stack. I would also spent more time on CSS layouts and would use CSS files instead of inline CSS.