Step 1: Setup Frontend

This step is going to be a short one, but let’s go! Install NextJS: Use this command pnpm create next - app @ latest my - app Choose Yes for everything Setup Theme Switcher For this project, I’m going to add theme switcher feature. Which is why I’m going to change the global.css to this: @ import url ( " https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap " ); @ import " tailwindcss " ; : root { -- white : # fffffe ; -- light - background : # fffffe ; -- light - secondary - background : # d9d4e7 ; -- light - text - primary : # 0 e172c ; -- light - text - secondary : # fffffe ; -- light - highlight : # a786df ; -- dark - background : # 232946 ; -- dark - secondary - background : # d4d8f0 ; -- dark - text - primary : # b8c1ec ; -- dark - text - secondary : # 232946 ; -- dark - highlight : # eebbc3 ; } @ theme inline { -- color - white : var ( -- white ); -- color - light - background : var ( -- light - background ); -- color - light - seconda