Krycha Store

SEE THIS PROJECT LIVE

Project Overview

Krycha Store is Fullstack Next.js E-Commerce website. The main use of Next.js in this project is pre-rendering, specifically Static Site Generation (SSG). Pre-rendering can result in better performance and SEO which is important in commercial websites. For backend, I used Firebase, so I don't have to worry about implementing, scaling, or maintaining the backend at all and can focus on Frontend only. The application is also tested with Jest and React Testing Library.

Search for the products you are interested in and add them to your shopping cart. To be able to make a purchase, you will need to create an account and then log in. Finally, website uses Stripe to complete the transaction.

Technologies

In this project I used:

• Next.js React Based framework with server side rendering capability. It is very fast and SEO friendly (version: 13.4.1)
• React JavaScript library for building user interfaces (version: 18.2.0)
• Typescript Javascript superset, which add static typing to Javascript (version: 5.0.4)
• SASS CSS with superpowers. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world (version: 1.61.0)
• Firebase Backend platform for building Web, Android and IOS applications. It offers real time database, different APIs, multiple authentication types and hosting platform (version: 9.19.1)
• Jest JavaScript Testing Framework with a focus on simplicity (version: 29.5.0)
• React Testing Library Set of helpers that let you test React components without relying on their implementation details (version: 14.0.0)
• Stripe Suite of APIs powering online payment processing and commerce solutions for internet businesses of all sizes (version: 12.3.0)
• Framer Motion Simple yet powerful motion library for React. It powers the amazing animations and interactions (version: 10.12.8)
• React Icons Small library that helps you add icons (from all different icon libraries) to your React apps (version: 4.8.0)
• React Hot Toast Add beautiful notifications to your React app (version: 2.4.1)

Screenshots

Installation

Clone repo and install all the dependencies

git clone https://github.com/Krycha94/fullstack-nextjs-ecommerce.git
npm install

Create file named

.env

Which will contain all environmental variable

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>
NEXT_PUBLIC_STRIPE_SECRET_KEY=<YOUR STRIPE SECRET KEY>
NEXT_PUBLIC_FIREBASE_API_KEY=<YOUR FIREBASE API KEY>
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<YOUR FIREBASE AUTH DOMAIN>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<YOUR FIREBASE PROJECT ID>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<YOUR FIREBASE STORAGE BUCKET>
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<YOUR FIREBASE MESSAGING SENDER ID>
NEXT_PUBLIC_FIREBASE_APP_ID=<YOUR FIREBASE APP ID>

Run app in development mode

npm run dev

Build for production then run app

npm run build
npm run start

Test app

npm run test