Skip to content

yarkincaner/case-cobra

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 

Repository files navigation


Logo

CaseCobra

Capture your favorite memories with your own phone case.

View Demo

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Acknowledgments

About The Project

hero section

Enhance your mobile experience with high-quality phone cases created by CaseCobra. Your phone will be embraced by the custom made phone cases made by you and surely feel your love ❤️.

Here's why:

  • High-quality, durable material
  • 5 year print guarantee
  • Modern iPhone models supported

(back to top)

Built With

  • Next
  • Supabase
  • Stripe
  • React Query
  • Shadcn/ui
  • Tailwind Css

(back to top)

Getting Started

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

  • npm
    npm install npm@latest -g
  • pnpm
    npm install -g pnpm

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

  1. Create a .env file inside apps/web and fill with necessary variables based on .env.example
  2. Clone the repo
    git clone https://github.com/yarkincaner/case-cobra.git
  3. Install NPM packages with pnpm
    pnpm install
  4. Run developer server
    pnpm dev

(back to top)

Usage

Landing Page

CaseCobra welcomes you with a landing page that contains a hero section, testimonials, and reviews. hero section

You can use both light theme and dark theme to meet your preference. hero section - dark

Login

Login page has two different appearance, one is a dialog with a route, and the other is a direct path. Having different login pages increases the user experience. login dialog login page

Create Case

You can create your in three steps:

  • Upload your image
  • Design your case with uploaded image
  • Review your configurated case

Create Case - Upload

A user can upload images via drag and drop or click to select an image to upload. This process takes a bit of time and user gets feedback with a progress bar to see how long will it take to upload their image, thus experience decent user experience. create case - upload

Create Case - Design

In this step, user views uploaded image on a digital case and can replace or resize their image on the case. They can select desired configurations on the side panel that contains supported colors, iPhone models, materials, and finishes. create case - design create case - configurated design

Create Case - Preview

In this last step, a preview of their configurated case shown to the user, the availability of shipment, highlights and materials, and total price that is base price plus configurations. create case - preview

Payment

CaseCobra has an integrated payment system with Stripe. stripe page

In order to test payment system, you can use a test card shown below that is provided by stripe to simulate a payment process stripe page - fields filled with information

Thank You Page

After payment is success, stripe redirects users to a thank you page with order informations. thank you page

Admin

A dashboard button appears on navbar to navigate admin to dashboard.

logged in as admin

Admin dashboard contains weekly and monthly goals, incoming orders from last week and details about these orders. admin dashboard

Admin can change status of an order.

order statuses

changed status of an order

(back to top)

Acknowledgments

(back to top)