Glowykeys

Table of Contents

Click to expand

• Introduction

• Stack

• Environment Variables

• Run locally

• Credits

Introduction

Welcome to Glowykeys where you can search for products, add products to cart, and buy products using stripe checkout. This project uses mongodb as database so if you wanna run it locally you will need to configure everything yourself: mongodb://${your_username}:${your_password}@localhost:27017/yourdatabase, for checkout you may wanna use fake cards numbers from stripe nextjs checkout guide, for image hosting I used Cloudinary. The app is deployed to vercel Visit!, it uses getServerSideProps and stale-while-revalidate Cache-Control headers for majority of the pages along with some page transitions with framer-motion.

Stack

• Typescript
• Nextjs
• styled-components
• stripejs/stripe
• framer-motion
• useSwr
• jest
• cypress
• react-testing-library
• msw for server mocks

Environment variables

Name	Description	Example
DB_USER	your db username	chimson
DB_PWD	your db pwd	secret
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY	your stripe publishable key	Stripe Dashboard
STRIPE_SECRET_KEY	your stripe secret key	Stripe Dashboard
STRIPE_WEBHOOK_SECRET	your stripe webhook secret key	Stripe Dashboard

Run locally

• Clone to your computer.

  • clone this repo

  • cd glowykeys

  • npm install

• Create .env.local in the root directory of your project, add env variables required.

• Start a dev server

  • npm run dev

• Run integration tests

  • npm run test

• Run e2e tests

  • npm run cypress:open

Credits

• vector art from iconmonstr