All solutions

Challenges Faced and My Learnings Firebase/Firestore for Auth and Storage

• Learning how to use Firebase/Firestore to do user authentication and CRUD operations is certainly a major learning point for me.
  • For initial data bulk upload to Firestore, while it is possible to write a NodeJS script to do this, to save time, I have used Refi App (https://refiapp.io/) to do the job. This app provides a really easy interface for bulk uploading data to Firestore and it is sync-ed to Firestore seamlessly.
  • Querying, adding and updating data in Firestore is relatively easy with clear documentation provided
  • Setting up user authentication flow is another major learning point for me. This includes the logic of re-directing users who are not authenticated to the login page and using Firebase event listener to monitor the user auth state changes.
  • After a user has signed up, the workflow includes adding the user to Firestore and using the user profile to store and update the bookmarks. Learning how to implement this has also been hugely beneficial for my learning journey

NextJS API rendering

• Learning how to deal with API data flows in NextJS is also major thing which I learnt. NextJS has a certain workflow which differs from the normal React API rendering workflow (ie. via useEffect hook). I have to use getServerSideProps and getStaticProps for getting data from API. And the API rendering components only interact with pages, not other components.

Learn to love TailwindCSS

• Having used Tailwind CSS for the past 2 projects, I start to be more efficient in using this CSS utility tool which really saves me a lot of time. It is especially useful and convenient for creating responsive layout.

React-Hook-Form for User Authentication and Input Validation

• Learnt how to use another great tool for creating form and validating user input - react-hook-form package.

Challenges that I faced while building the project

Create Lightbox feature

• This is my first attempt at coding a lightbox feature. I have referred to a youtube tutorial which provides ideas about different ways of closing a lightbox (ie. 'escape' key, clicking outside the lightbox). Through the process, I learnt how to use useCallback hook in combination with useEffect

Typescript errors

• Also learnt about how to resolve typescript errors relating to useRef hook. Another instance of typescript error is different ways of typing event. In particular, I realised that I need to denote React.MouseEvent for onClick event type, and not just MouseEvent

Reusable React components and refactoring

• Through the process, I gained a deeper understanding of ways to create re-usable components in React and how to refactor the code to keep it DRY.

Any comments / feedback would be much appreciated.

What I have learnt

NextJS framework

• This is my first time using NextJS so I spent some time initially to learn about the details of the framework. One useful thing I learnt was how to create the Layout component for NavBar and nest the pageProps within the Layout component.
• The main challenge in NextJS for me is how to use various data fetching components such as getStaticProps, getServerSideProps and getStaticPaths which I don't get to use in this project but hopefully I will for the next project.
• I find that <Image> which is the native NextJS img component is not very easy nor flexible to use, so I have resorted to using <img> which offers more flexibility in terms of CSS styling.

Tailwind CSS

• This is my first time using Tailwind CSS and I really love it - for the ease of use, flexibility and responsiveness. As this is my first time using Tailwind, I also spent some time to familiarize myself with the various utilities offered by Tailwind. There was an initial learning curve in knowing the various class names that are available but it is relatively easy to pick up.
• It is also convenient to create re-usable CSS classes in Tailwind in the normal CSS file
• To define custom colors, fonts or other settings, it is possible to do so in tailwind.config.js
• Specifying the layout and styling for various screen-sizes is really easy with Tailwind without having to write media queries, which saves a lot of time

Typescript

• I find that using Typescript instead of JS has slowed down my development time significantly due to the need to resolve Typescript errors. However I hope this will pay off in the longer term for practicing type-safe secure coding practices.
• To resolve MouseEvent type error, one can cast the event.target as an Element or HTMLElement.

Search function

• To implement the incremental search function, I discovered Array.includes function which makes it really easy to filter with multiple strings. Example of the code as below:

for(let i=0; i<newList.length; i++) {
      newFilterData = newFilterData.filter(({tags}) => tags.includes(newList[i]))
    }

I seem to have problems with the HTML tags in Next but I'm still yet to figure out how to resolve them. Any help would be much appreciated.

Any comments/suggestions welcome!

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.

The focus of this project is about creating layout using CSS, in particular CSS grid. I was unable to render the heading - Modern Art Gallery in 2 different colours. Any feedback/help in this would be much appreciated.

I find it most challenging to find ways to persist state when routing to a new page. For the purpose of this project, I have chosen to store the "rating" state in URL and call useParam to retrieve the state on a new page. Would like to find out if there are other ways to do this.