The Problem

22222-labs want to build a product that can check the authenticity of luxury watch using AI. the product should can be accessed on any phone device (specially on ios).

My Roles and Responsibility

I assignee as Software Engineer in this project. My responsibility is to create responsive website for Realorfake that can be accessed on any phone device. Creating static website for landing page to enhance the SEO using Nextjs SSG. I also responsible to creating the CI/CD script to schedule the build every 3 days to updated the static content. And make sure the website performance is reached high score on pagespeedinsight

Build Process

We separate the app in two section. one app for main app and one landing app for SEO. We decide to separate the app into two section because we have rendering issue on main app. if we use Client Side Rendering(CSR), we will got low score on SEO. Because google can't crawling our content. If we use Static Site Generation(SSG), we cannot see update of our website immediately. because we need to rebuild the website to update our website content. If we use Server Side Rendering, we can solve both issue. but, the cost will be more expensive on server. So, we decide to separate our app into two section. one for main app and one for SEO

Main App

For the main App we have many features. They are :

• Scan the watch image and identify the authenticity of watch using AI
• Manual search watch type. If our AI cannot detect the type of watch
• Save the result on firebase
• Auth with OTP
• Integrate the Gpay and Apple Pay using stripe
  

Landing Page

For landing page, our focus is to generate content to enhance our SEO. so, in landing page we have some features:

• Article page integrated with hygraph
• Brand article integrated with supabase
• sitemap.xml to help search engines like Google discover and index all the pages on a website more efficiently
• OpenGraph to display the preview link on social media

Automated Build

To update the content we are using github action to schedule rebuild every 3 days and upload the build result to cloudflare pages. so, this technique will save our server budget. because we just upload static html files on our server.

Result

After a few months developing Realorfake. Finally, 22222-Labs launched the Realorfake on June, 2024. This is valuable experience for me. because, i responsible to decide what tech stack should we use to develop realorfake