Coder Social home page Coder Social logo

jinnywong / jayscoffee Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 3.44 MB

☕ E-commerce web app for Apple's take-home assignment interview, built with Next.js and TypeScript.

Home Page: https://jayscoffee.vercel.app

License: MIT License

TypeScript 97.94% CSS 0.23% JavaScript 1.83%

jayscoffee's Introduction

☕ Jay's Coffee

My web app for Apple's take-home project.

You can try out the web app 🔗here.

Usage

Prerequisites: Node.js

Setup environment and run backend first, then frontend.

Backend setup

Git clone repository

git clone https://github.com/JinnyWong/JaysCoffee-backend.git

Install packages

npm i 

Setup & modify .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
NEXTHAUTH_SECRET= 

# This was inserted by `prisma init`:
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL=''
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""
STRIPE_API_KEY=
FRONTEND_STORE_URL=http://localhost:3001
STRIPE_WEBHOOK_SECRET=

Connect to Prisma & Supabase. Then, config .env file & schema.prisma to setup DATABASE_URL & DIRECT_URL as shown here. Then in terminal:

npx prisma init
npx prisma generate
npx prisma db push

Setup Cloudinary and get cloud name for NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME for in .env. Then, go to Cloudinary settings, and setup a new unsigned upload preset. Import the upload preset name into:

//image-upload.tsx

<CldUploadWidget onUpload={onUpload} uploadPreset="ENTER_UPLOAD_PRESET_NAME_HERE ">

Setup Stripe & webhook to get STRIPE_API_KEY & STRIPE_WEBHOOK_SECRET for .env

Then in Stripe dashboard settings, setup Stripe webhooks for local listeners (to run locally) or hosted endpoints (deploying to the cloud).

// in root file terminal 

stripe listen --forward-to localhost:3000/api/webhook

Start the app

npm run dev

The app will start running now in localhost:3000

Frontend setup

Git clone repository

git clone https://github.com/JinnyWong/JaysCoffee.git

Install packages

npm i

Setup .env file and get the NEXT_PUBLIC_API_URL= from backend dashboard settings.

Start the app

npm run dev

Deploying to Vercel

Commit all changes to GitHub project repository.

Then, connect Vercel project to your GitHub project repository.

Go to https://generate-secret.vercel.app/32 to generate NEXTAUTH_SECRET in .env for both the backend and frontend.

Add your environment variables in the Vercel project settings.

App Features

User functions:

  • View and pre-order drinks
  • Make secure payments
  • In-app map navigation to the shop

Admin functions:

  • Admin authentication
  • Dashboard to show sales report
  • Content manageres

Tech Stack

  • Tailwind CSS
  • Radix + Shadcn UI
  • TypeScript
  • Next.js
  • Cloudinary image hosting
  • Clerk authentication
  • PostgreSQL + Supabase database
  • Prisma ORM
  • Stripe payments
  • MappedIn Web SDK in-mall map navigation
  • Vercel cloud deployment

License

Copyright © 2024 JinnyWong

Licensed under the MIT License.

jayscoffee's People

Contributors

jinnywong avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.