We aim to convert a subscriber to a Customer, see each product view count and track the sales as well.
npx create-next-app favourite-bakery Need to install the following packages: firstname.lastname@example.org Ok to proceed? (y) y √ Would you like to use TypeScript with this project? ... No / Yes √ Would you like to use ESLint with this project? ... No / Yes √ Would you like to use `src/` directory with this project? ... No / Yes √ Would you like to use experimental `app/` directory with this project? ... No / Yes √ What import alias would you like configured? ... @/* ... Success! Created favourite-bakery
To run the project simply run
npm run dev
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p Need to install the following packages: email@example.com Ok to proceed? (y) tailwind.config.js already exists. Created PostCSS config file: postcss.config.js
npm run dev
Now let's add the header to our page.
npm install @headlessui/react npm install @tailwindcss/forms
Add Footer Footer from https://www.hyperui.dev/components/marketing/footers
You'll get the output as:
Now Let's add a few static products page we'll initialize and add the GraphQL later.
Let's add a folder in pages named, bread-n-buns/index.js and cakes/index.js
npm install @tailwindcss/aspect-ratio
Added the pages now, http://localhost:3000/cakes will look like,
Credits: Images are from https://depositphotos.com/, this is only for test purposes, and must not be used in production.
Did you find this article valuable?
Support Delighteck Blog by becoming a sponsor. Any amount is appreciated!