Full-Stack Movie App - Typescript, NextJS/React, TailwindCSS, Firebase

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.