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: #0e172c; --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-secondary-background: var(--light-secondary-background); --color-light-text-primary: var(--light-text-primary); --color-lig