First, run the development server to see the interface:

yarn install
yarn dev

Open http:https://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Detailed instructions for each task are in the comments of the corresponding file.

pages/index.tsx

• Create a Firebase project on Firebase Console
• Enable Google Sign in
• Add Firebase to the project
• Initialize Firebase

Documentation: https://firebase.google.com/docs/auth/web/start

pages/index.tsx

• Implement Google Sign in with Google button
• Redirect to the Signed In page to show random programming jokes

Documentation: https://firebase.google.com/docs/auth/web/google-signin

pages/signed-in.tsx

• Fetch programming jokes from the API using getServerSideProps

Learn more about Nextjs Data Fetching: https://nextjs.org/docs/basic-features/data-fetching

• Pass the joke to the page on the client side

API URL: https://official-joke-api.appspot.com/jokes/programming/random

pages/signed-in.tsx

• Display the programming joke in your own way :)

No need to send me the problem and fix, just let me know what you find in the interview

• My findings:
  • There is latency after redirect result returned from Google Sign in
  • The user has signed in but the application are not signed in yet
  • Possible solution: Add spinning widgets to indicate the application is processing the result

• Feel free to explore the codebase and make changes to the UI
• You can use any UI library you want
• It is completely fine if you cannot complete all the tasks as one of the objectives in this test is to let you know the usual developer experience in CheckMate
• If you have any questions, please feel free to ask me :) Just drop me an email