A React, Styled-components Project


Daily Quote is an app that generates random quotes for your daily inspiration. You can shuffle, save and share the quotes you like on social media, you can also change a category if you want to. The theme colour changes every time after you changed a category of quotes.


  • - Adobe XD
  • - React
  • - Styled-components
  • - Local Storage
  • - Vercel


The start off was bumpy because it’s not just my first React project started from scratch, but also it’s my first time using styled-components with it. I struggled the hell through how to give the SVG logo dynamic colour which is based on the theme colour using styled-components.

During the styling stage, I found out that we can’t fully customize the style of dropdown input, which I was planning to use on the category options for quotes.

Trying to get data flow as my expectation, also figuring out how to organise the files so I won’t get lost as the project gets more complex.

Finding appropriate resources to use on the quote-sharing feature, reading the document and applying them to my project.


lesson learned

I became fairly comprehended with styled-components and in love with it. Such as how to populate the CSS properties with the props that are being pumped into the component, how to create a new component that inherits the styles of another to stay consistent with visual expression, how to just freaking style any component, no matter that is created by myself or a third-party component... etc.

I’m getting familiar with React hooks, Router and Context API, especially the last one. There are so many states that have to be managed in the project, Context API makes work so much easier since we can create one single file to store all the states and logic, then use Context.Provider to distribute them to whichever component you want, preventing us from prop-drilling. Also, we’re benefited from its simplicity in regards to code optimization and maintenance.

Reading loads of API documentation, finding answers to my technical troubles faster is also taking a huge part of the lesson. I also reorganised the file structure a few times during development, because it gets more complicated than I expected, and I found myself kind of lost in the mess at some point so I had to stop developing and think what is the best way to organize the files instead. I learned that basic work like file structuring, naming is equally important in regards to the efficiency of collaboration, and that needs to be properly and thoughtfully planned out from the get-go.