This website is dedicated to documenting my experience with the course.
The website itself was created with React & Bootstrap. My goal for the website was initially to just display some data, however, I realized I could do much more than that, and this is the result!
My secondary goal was to experiment with creating a frontend without worrying about code structure, design, or a backend. This allowed me to figure out what would be the best practices I should follow, which would have consumed a large amount of time on a normal project. Furthermore, I was able to research and experiment with several techniques to render Markdown. While this codebase is certainly not an example of good code structure & design, I have learnt a lot in the process of making this website, and I will be applying the lessons learnt in future projects.
- Visualizing Data with Charts, on a website
- React Router
- Bootstrap components for React
- Markdown with React
- Webpack's Import System (Importing SVGs and Markdown)
- Embedding Twitter/YouTube videos
- Google Fonts
- Google Analytics
- Manipulating Metadata with React Helmet (But not before page loads ;/)
- Embedding KaTeX into the Browser
- Smooth Link Scrolling
- Fade In Animations
Obviously, programming short-sightedly brings a lot of design flaws, but that was what I was aiming for!
- Lack of Type Inference, I will not be programming in Javascript again without Typescript.
- Not using MDX, combining both React and Markdown in a single file. I needed to split my files into multiple chunks instead, and messily render them together.
- Bootstrap made the website's visual design feel bland.
- Not sticking to one Component per file.
- Badly designed components, I should take advantage of default values & making them more flexible.
- I will be putting each individual page/feature in it's own directory to make it easier to traverse the codebase.
- I initially used a card for everything, as I wanted to keep everything equally sized. However, I realized that I could just use padding on the page, and make the page responsive with CSS.
- Dynamic pages are not exactly dynamic, I need to write a file with a JSON object for every new blog. I want to avoid a backend to keep the hosting free, and reduce complexity. The only way I found to avoid this is to use something like Gatsby or Next.js, which I avoided on purpose for learning purposes.
All in all, this website was just a playground to understand how to put together my own personal website, which I will be making as soon as my exams are done!
While I initially was going to use the same codebase for both websites, I decided that I should rewrite from scratch, taking in mind the flaws and lessons I have learnt here.