Github Search using Typescript React and SCSS

SCSS setup

• As this is my first time using SCSS, setting up the folder structure took a while for me, but once it was set up, it provided a much easier development experience compared to using vanilla CSS. In particular, I would like to highlight a few things as below. 1. Nesting of CSS selectors - SCSS allows for nesting of selectors which allows for easier maintenance and reading 2. Creating variables using @mixin and @functions which provides for reusability 3. Creating CSS group properties such as colors and font which then allows for easy retrieval using map-get function 4. SCSS function such as lighten() enables user to easily change color to lighter shade

Typescript React

• I have used React in JS before, but this is my first time using Typescript React for development. Given the strongly-typed nature of Typescript, it took a longer development time as I had to figure out how to resolve certain error messages which are specific to Typescript. I had found Typescript intimidating in the past and was put off by the longer time requirement for development, but this experience has helped me appreciate Typescript a bit more and understand ways to deal with Typescript-specific errors. I did encounter an error which I could not resolve and I have posted it on Stackoverflow here. It is a problem regarding using useRef react hook to add cssText. Would highly appreciate it if anyone has any insight into this problem.

Responsive mobile and tablet layout

• It took me a while to adjust the desktop layout to tablet and mobile. I eventually used position: absolute to organise the layout as required. I have learnt various CSS position properties through the process.

Dark/light mode & localStorage

• I have learnt how to set dark and light mode using CSS properties and how to store the state in localStorage, using localStorage.getItem() and localStorage.setItem() functions. This allows user to store their viewing mode preference in the local storage and their preference will be persisted for their next visit.