├── .env.example ├── .eslintrc.json ├── .gitignore ├── .npmrc ├── .nvmrc ├── LICENSE ├── README.md ├── environment.d.ts ├── next.config.js ├── package.json ├── public ├── favicon.ico └── vercel.svg ├── src ├── assets │ └── svg │ │ ├── empty_cart.svg │ │ └── hero.svg ├── components │ ├── Head.tsx │ ├── Hero.tsx │ ├── Layout │ │ ├── Content.tsx │ │ ├── Footer.tsx │ │ └── index.tsx │ ├── Loader.tsx │ ├── NextProgress.tsx │ ├── NoData.tsx │ ├── ProductList │ │ ├── Product.tsx │ │ └── index.tsx │ ├── SectionTitle.tsx │ ├── Toaster.tsx │ └── index.ts ├── features │ ├── Cart │ │ ├── Provider.tsx │ │ ├── components │ │ │ ├── Header.tsx │ │ │ ├── OrderSummary.tsx │ │ │ ├── Table.tsx │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── service.ts │ │ └── types │ │ │ └── index.ts │ └── Checkout │ │ ├── Provider.tsx │ │ ├── components │ │ ├── AddressForm │ │ │ ├── Button.tsx │ │ │ ├── Input.tsx │ │ │ ├── Select.tsx │ │ │ └── index.tsx │ │ ├── Confirmation.tsx │ │ ├── PaymentForm │ │ │ ├── Review.tsx │ │ │ └── index.tsx │ │ └── index.tsx │ │ ├── index.ts │ │ ├── service.ts │ │ └── types │ │ └── index.ts ├── lib │ └── commerce.ts ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── api │ │ └── hello.ts │ ├── cart.tsx │ ├── checkout.tsx │ └── index.tsx ├── providers │ └── Theme.tsx ├── styles │ ├── darkTheme.ts │ ├── index.ts │ └── lightTheme.ts ├── types │ └── index.ts └── utils │ ├── createEmotionCache.ts │ └── storage.ts ├── tsconfig.json └── yarn.lock /.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_CHEC_PUBLIC_API_KEY="..." 2 | NEXT_PUBLIC_STRIPE_PUBLIC_API_KEY="..." 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": { 4 | "no-restricted-imports": ["error", { "patterns": ["@/features/*/*"] }] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | lts/gallium 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 ratul-devr 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DevR Commerce 2 | 3 | DevR-Commerce is a simple E-Commerce store created with Next.Js using the CommerceJs back-end. It has basic E-Commerce features since it's has been recently published. It will have more useful features in future. 4 | 5 | ## ⏩ Quick Start 6 | 7 | ```bash 8 | git clone git@github.com:developeratul/devr-commerce.git 9 | cd devr-commerce 10 | yarn 11 | cp .env.example .env.local # please change the credentials 12 | ``` 13 | 14 | Then run 15 | 16 | ```bash 17 | yarn dev 18 | ``` 19 | 20 | ## 🧑‍💻 Technologies used 21 | 22 | - MUI - for designing the front-end 23 | - React-Hot-Toast - for toast notifications 24 | - nextjs-progressbar - for slim progressbars 25 | - @mui/icons-material - for icons 26 | - Dracula - the theme used in the app 27 | 28 | That's it! 29 | 30 | ## ⚒️ Upcoming features 31 | 32 | - [ ] Promo Code to get discount on checkouts 33 | - [ ] A separate product page where all the products will be shown and they can be filtered and searched 34 | - [ ] Separate page for each products 35 | - [ ] Variant selection for products 36 | 37 | ## 🐛 Fixes to be done 38 | 39 | - [x] Making the cart page responsive 40 | - [ ] Speed optimization 41 | 42 | ## 🛡️ License 43 | 44 | This project is under MIT license 45 | 46 | ## 👨‍💻 Author 47 | 48 | - Twitter: [@developeratul](https://twitter.com/developeratul) 49 | - Github: [@developeratl](https://github.com/developeratul) 50 | -------------------------------------------------------------------------------- /environment.d.ts: -------------------------------------------------------------------------------- 1 | export declare global { 2 | namespace NodeJS { 3 | interface ProcessEnv { 4 | NODE_ENV: "development" | "production"; 5 | NEXT_PUBLIC_CHEC_PUBLIC_API_KEY: string; 6 | NEXT_PUBLIC_STRIPE_PUBLIC_API_KEY: string; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: false, 4 | swcMinify: true, 5 | images: { 6 | domains: ["cdn.chec.io"], 7 | }, 8 | }; 9 | 10 | module.exports = nextConfig; 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "devr-commerce", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "next dev", 8 | "build": "next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "@chec/commerce.js": "^2.8.0", 14 | "@emotion/react": "^11.10.0", 15 | "@emotion/server": "^11.10.0", 16 | "@emotion/styled": "^11.10.0", 17 | "@fontsource/poppins": "^4.5.9", 18 | "@mui/icons-material": "^5.8.4", 19 | "@mui/lab": "^5.0.0-alpha.95", 20 | "@mui/material": "^5.10.0", 21 | "@stripe/react-stripe-js": "^1.10.0", 22 | "@stripe/stripe-js": "^1.35.0", 23 | "next": "12.2.5", 24 | "nextjs-progressbar": "^0.0.14", 25 | "react": "18.2.0", 26 | "react-dom": "18.2.0", 27 | "react-hot-toast": "^2.3.0", 28 | "universal-cookie": "^4.0.4", 29 | "validator": "^13.7.0" 30 | }, 31 | "devDependencies": { 32 | "@types/chec__commerce.js": "^2.8.5", 33 | "@types/node": "18.7.3", 34 | "@types/react": "18.0.17", 35 | "@types/react-dom": "18.0.6", 36 | "@types/validator": "^13.7.5", 37 | "eslint": "8.22.0", 38 | "eslint-config-next": "12.2.5", 39 | "typescript": "4.7.4" 40 | }, 41 | "engines": { 42 | "node": ">=16.0.0", 43 | "yarn": ">=1.22.0", 44 | "npm": "please-use-yarn" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/developeratul/devr-commerce/07323956178a635c7234464f367266a28f4f37bd/public/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/empty_cart.svg: -------------------------------------------------------------------------------- 1 | empty_cart -------------------------------------------------------------------------------- /src/assets/svg/hero.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Head.tsx: -------------------------------------------------------------------------------- 1 | import NextHead from "next/head"; 2 | 3 | type HeadProps = { 4 | title?: string; 5 | description?: string; 6 | }; 7 | 8 | export default function Head(props: HeadProps) { 9 | const { title, description } = props; 10 | return ( 11 | 12 | {title ? `DevR Commerce - ${title}` : "DevR Commerce"} 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Hero.tsx: -------------------------------------------------------------------------------- 1 | import HeroImage from "@/assets/svg/hero.svg"; 2 | import { Flex } from "@/styles"; 3 | import { GitHub } from "@mui/icons-material"; 4 | import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward"; 5 | import { Box, Button, Container, styled, Typography } from "@mui/material"; 6 | import Image from "next/image"; 7 | 8 | const FlexContainer = styled(Box)(({ theme }) => ({ 9 | display: "flex", 10 | justifyContent: "space-between", 11 | alignItems: "center", 12 | padding: "100px 0", 13 | gap: 5, 14 | [theme.breakpoints.down("md")]: { 15 | flexDirection: "column", 16 | }, 17 | })); 18 | const LeftContent = styled(Box)(({ theme }) => ({ 19 | width: "100%", 20 | maxWidth: "600px", 21 | [theme.breakpoints.down("md")]: { 22 | marginBottom: 50, 23 | }, 24 | })); 25 | const RightContent = styled(Box)(({ theme }) => ({ 26 | [theme.breakpoints.down("lg")]: { 27 | maxWidth: "400px", 28 | }, 29 | })); 30 | export default function Hero() { 31 | return ( 32 | 33 | 34 | 35 | 41 | DevR Commerce 42 | 43 | 49 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum voluptates magnam aperiam 50 | amet? Ea iusto repudiandae corporis, animi excepturi non nostrum cupiditate ad! Est, 51 | nostrum! 52 | 53 | 54 | 62 | 72 | 73 | 74 | 75 | Hero section illustration 76 | 77 | 78 | 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /src/components/Layout/Content.tsx: -------------------------------------------------------------------------------- 1 | import { AppProps } from "@/types"; 2 | import { Box, styled } from "@mui/material"; 3 | 4 | const ContentContainer = styled(Box)({ 5 | flex: 1, 6 | display: "flex", 7 | flexDirection: "column", 8 | }); 9 | export default function Content(props: AppProps) { 10 | const { children } = props; 11 | return {children}; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/Layout/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { Flex } from "@/styles"; 2 | import { GitHub, LogoDev, Twitter } from "@mui/icons-material"; 3 | import * as Mui from "@mui/material"; 4 | 5 | const FooterContainer = Mui.styled(Mui.Box)(({ theme }) => ({ 6 | padding: "20px 10px", 7 | marginTop: "auto", 8 | background: theme.palette.background.paper, 9 | })); 10 | export default function Footer() { 11 | return ( 12 | 13 | 17 | 18 | Designed and Developed with Next.js by{" "} 19 | 20 | DevR 21 | 22 | 23 | 24 | 30 | 31 | 32 | 38 | 39 | 40 | 46 | 47 | 48 | 49 | 50 | 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /src/components/Layout/index.tsx: -------------------------------------------------------------------------------- 1 | import { Header } from "@/features/Cart"; 2 | import { AppProps } from "@/types"; 3 | import { Box, styled } from "@mui/material"; 4 | import Content from "./Content"; 5 | import Footer from "./Footer"; 6 | 7 | const LayoutContainer = styled(Box)({ 8 | display: "flex", 9 | flexDirection: "column", 10 | minHeight: "100vh", 11 | margin: 0, 12 | }); 13 | export default function Layout(props: AppProps) { 14 | const { children } = props; 15 | return ( 16 | 17 |
18 | {children} 19 |