- Client: TypeScript, Next.js, Zustand, Mantine
- Server: Strapi, Stripe API, Cloudinary
- Implementing Next.js features:
getStaticPaths
withgetStaticProps
getServerSideProps
- Image optimization with Next.js Image Component
- Working with a headless CMS - Strapi
- Storing images in Cloudinary via
strapi/provider-upload-cloudinary
plugin - Using Zustand for global state management and its Persist middleware
- Basic animation with Framer Motion
- Integrating Stripe for online payments
- Add user authentication via 'Users & Permissions' plugin in Strapi
- Store wishlist and cart data in the database instead of localStorage
- Add end-to-end and integration tests
- Clone repo
git clone https://github.com/zachloh/e-commerce.git
- env variable: API_TOKEN, API_URL, STRIPE_SECRET_KEY, NEXT_PUBLIC_API_URL, NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, NEXT_PUBLIC_ORDER_TOKEN
npm install
npm run dev
- Note: The strapi application is hosted in a separate, private repo