Skip to content

Latest commit

 

History

History
212 lines (153 loc) · 4.89 KB

README.md

File metadata and controls

212 lines (153 loc) · 4.89 KB
Raw

Review to Refactor

  • commit w/ number and comments w/ same number in files

setup boilerplate

  • NextJS 14

    • package manager: pnpm
    • pnpm dlx create-next-app@latest

  • vscode

    • extensions
    • settings
    • snippets

  • shadcn/ui

    • pnpm dlx shadcn-ui@latest init
    • tailwind.config.ts | components.json
    • globals.css | utils.ts

  • prettier integration

    • pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss
    • prettier.config.mjs + prettier-plugin-tailwindcss
    • package.json + script w/ prettier
    • .eslintrc.json(old) + extends prettier

  • eslint

    • read fast eslint 9 documentation for the future updates
    • eslint.config.mjs(new) like prettier.config.mjs convention

UI Layout setup

  • CenterWrapper component
  • new snippet tsx-slot
  • read and take notes on Tailwind Layout

Hero section

  • app/page.tsx

  • lucid icons pnpm install lucide-react

  • Phone component

    • extends HTMLAttributes<HTMLDivElement>
    • z-index
    • pointer-events-none, select-none

  • Navbar component

    • shadcn button pnpm dlx shadcn-ui@latest add button
    • using buttonVariants

  • Change Theme from Shadcn

    • replace @layer base

Kinde Authentication Integration

  • kinde.com
    • sign up by my github account
    • business, domain, region
    • tech NextJS
    • Email, FB, Google, X, Github
    • connect to NextJS codebase
  • QuickStart Documentation
    • Select Existing codebase
    • URL http://localhost:3000
    • Dep pnpm i @kinde-oss/kinde-auth-nextjs
    • Update .env.local env vars
    • API endpoint src/app/api/auth/[kindeAuth]/route.ts
    • Rerun pnpm run dev to load env vars
  • NextJS SDK Documentation

Animated landing page 1

  • home page customers review section

  • space between words and span

    • text-balance to style Heading text+{' '}+spanText

  • Icon Component for custom svg control

  • Reviews Component with animation

    • pnpm add framer-motion
    • Review (enter animation) useInView
    • ReviewColumn (marquee animation)
    • ReviewGrid (screen size affect display mode)
    • Reviews/container (gradient blur effect)
    • tailwind.config.ts customize keyframes and animations
    • constants
    • utils

  • anther marketing section

  • Footer

file upload page

  • page configure/upload

  • pnpm add react-dropzone

  • flex box review

  • pnpm dlx shadcn-ui@latest add progress

  • Free upload service uploadthing

  • sign in with github

  • create a app

    • named josh-casecobra with default setting

  • dashboard API keys

    • copy and paste to .env.local

  • read integration documentation

  • pnpm add uploadthing @uploadthing/react

  • app/api/uploadthing/core.ts

  • app/api/uploadthing/route.ts

  • lib/uploadthing.ts hooks

  • pnpm add zod for server to client full-type

  • useUploadthing hook

  • pnpm dlx shadcn-ui@latest add toast for file format rejection

  • ConfigureStep Component

configuration page 1

  • neon postgres

    • github sign up
    • project: Springer, database: neon, region: Singapore
    • copy postgres URL to .env.local

  • pnpm add prisma @prisma/client

  • npx prisma init create a prisma setup

  • src/db/index.ts

  • modify schema.prisma then npx prisma db push

    • change .env.local to .env
    • table format appear in neon database

  • Do Not Delete .env directly. Backup First!!!

  • pnpm add sharp@0.32.6 compatible with NextTS

  • npx prisma studio db GUI

  • I should put all notes in the project then extract from the project

  • 4:55

3:35:53 Creating our configuration page 59m + 120m

configuration page 2

6:34:15 Creating our configuration summary page

  • 54m

secure payment

7:28:33 Integrating secure payments

  • 59m

auth callback

8:27:28 Creating an auth callback

  • 23m

stripe webhook

8:50:20 Creating our stripe webhook

  • 44m

thank you page

9:34:19 Creating our thank you page

  • 56m

secret admin dashboard

10:30:00 Creating a secret admin dashboard

  • 45m

thank you email

11:15:00 Writing our thank-you email

  • 22m

final touch & improvement

11:37:30 Final touches & improvements

  • 10m

deployment

11:47:45 Final deployment

  • 7m

review

11:54:00 Final review

  • 5m 11:59:00 Outro - thank you for following along!

Highlights

  • 🛠️ Complete shop built from scratch in Next.js 14

  • ⌨️ 100% written in TypeScript

  • 🌟 Clean, modern UI on top of shadcn-ui

  • 🔑 Authentication using Kinde

    • build-in Email 2-step authentication

  • 💻 Beautiful landing page included

    • 🎨 Custom artworks made by a professional illustrator

🖥️ Drag-and-drop file uploads 🛒 Completely custom phone case configuration ✅ Apple-inspired configuration design

🛍️ Customers can purchase directly from you ✉️ Beautiful thank-you email after purchase 💳 Secret admin dashboard to manage orders