?schema=public&sslmode=prefer"
5 | GITHUB_SECRET=
6 | GITHUB_ID=
7 | SECRET=
8 | NEXTAUTH_URL=
9 | NEXTAUTH_CALLBACK_URL=
10 | NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
11 | STRIPE_SECRET_KEY=
12 | NEXT_PUBLIC_STRIPE_SUCCESS_REDIRECT_URL=
13 | NEXT_PUBLIC_STRIPE_ERROR_REDIRECT_URL
14 |
--------------------------------------------------------------------------------
/components/products/Products.tsx:
--------------------------------------------------------------------------------
1 | import { Product } from './Product';
2 | import { useGetProducts } from './hooks/useGetProducts';
3 |
4 | export const Products = () => {
5 | const { data: products } = useGetProducts();
6 |
7 | return (
8 |
9 | {products && products.map((product) =>
)}
10 |
> = {
7 | Component: NextComponentType;
8 | router: Router;
9 | __N_SSG?: boolean;
10 | __N_SSP?: boolean;
11 | pageProps: P & {
12 | /** Initial session passed in from `getServerSideProps` or `getInitialProps` */
13 | session?: Session;
14 | };
15 | };
16 | }
17 |
--------------------------------------------------------------------------------
/components/layout/Layout.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from "react";
2 | import { Header } from "./header/Header";
3 |
4 | type LayoutProps = {
5 | readonly children: ReactNode;
6 | };
7 |
8 | export const Layout = ({ children }: LayoutProps) => (
9 | <>
10 |
11 |
12 |
13 | FullStack Next.js E-commerce
14 |
15 | {children}
16 |
17 |
18 | );
19 |
--------------------------------------------------------------------------------
/components/cart/api/checkoutCart.ts:
--------------------------------------------------------------------------------
1 | import type Prisma from "@prisma/client";
2 | import { fetcher } from "../../../utils/fetcher";
3 | import { stripeSessionSchema } from "../../../utils/stripe";
4 | import { transformProduct } from "../../products/utils/transforms";
5 |
6 | export const checkoutCart = async (products: Array) => {
7 | const stripeItems = products.map((product) => transformProduct(product));
8 |
9 | return await fetcher(`/api/checkout/products/`, {
10 | method: "POST",
11 | body: stripeItems,
12 | schema: stripeSessionSchema,
13 | });
14 | };
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true
17 | },
18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 | "exclude": ["node_modules"]
20 | }
21 |
--------------------------------------------------------------------------------
/utils/stripe.ts:
--------------------------------------------------------------------------------
1 | import Stripe from 'stripe';
2 | import * as y from 'yup';
3 | import { getEnv } from './env';
4 | import { loadStripe } from '@stripe/stripe-js';
5 |
6 | export const redirectToCheckout = async (session: Pick) => {
7 | const stripe = await loadStripe(getEnv('NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY'));
8 |
9 | return stripe!.redirectToCheckout({
10 | sessionId: session.id,
11 | });
12 | };
13 |
14 | export const stripeSessionSchema: y.SchemaOf> = y
15 | .object()
16 | .shape({
17 | id: y.string().required(),
18 | });
19 |
--------------------------------------------------------------------------------
/pages/api/auth/[...nextauth].tsx:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from '@prisma/client';
2 | import NextAuth from 'next-auth';
3 | import GitHubProvider from 'next-auth/providers/github';
4 | import { PrismaAdapter } from '@next-auth/prisma-adapter';
5 | import { getEnv } from '../../../utils/env';
6 |
7 | const prisma = new PrismaClient();
8 |
9 | export default NextAuth({
10 | providers: [
11 | GitHubProvider({
12 | clientId: getEnv('GITHUB_ID'),
13 | clientSecret: getEnv('GITHUB_SECRET'),
14 | }),
15 | ],
16 | pages: {
17 | signIn: '/auth/signin',
18 | },
19 | adapter: PrismaAdapter(prisma),
20 | secret: getEnv('SECRET'),
21 | });
22 |
--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import Document, { Head, Main, Html, NextScript, DocumentContext } from 'next/document';
2 |
3 | export default class MyDocument extends Document {
4 | static async getInitialProps(ctx: DocumentContext) {
5 | const initialProps = await Document.getInitialProps(ctx);
6 |
7 | return { ...initialProps };
8 | }
9 | render() {
10 | return (
11 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/pages/api/checkout/products/index.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from 'next';
2 | import { Stripe } from 'stripe';
3 | import { getEnv } from '../../../../utils/env';
4 |
5 | const stripe = new Stripe(getEnv('STRIPE_SECRET_KEY'), {
6 | apiVersion: '2020-08-27',
7 | });
8 |
9 | export default async (req: NextApiRequest, res: NextApiResponse) => {
10 | try {
11 | const { id } = await stripe.checkout.sessions.create({
12 | mode: 'payment',
13 | submit_type: 'donate',
14 | payment_method_types: ['card'],
15 | success_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`,
16 | cancel_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`,
17 | line_items: req.body,
18 | });
19 |
20 | res.status(200).json({ id });
21 | res.end();
22 | } catch {
23 | res.status(500);
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/components/cart/context/cartContext.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ReactNode,
3 | createContext,
4 | useReducer,
5 | useContext,
6 | useMemo,
7 | useState,
8 | } from "react";
9 | import { cartReducer } from "./reducers/cartReducer";
10 | import type { Action, State } from "./types";
11 |
12 | type Dispatch = (action: Action) => void;
13 | type CartProviderProps = { readonly children: React.ReactNode };
14 |
15 | export const CartStateContext = createContext<
16 | { state: State; dispatch: Dispatch } | undefined
17 | >(undefined);
18 |
19 | const initialState: State = { products: [], totalPrice: 0, isOpen: false };
20 |
21 | export const CartProvider = ({ children }: CartProviderProps) => {
22 | const [state, dispatch] = useReducer(cartReducer, initialState);
23 |
24 | const value = useMemo(() => ({ state, dispatch }), [state]);
25 |
26 | return (
27 |
28 | {children}
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import type { AppProps } from 'next/app';
3 | import { Hydrate, QueryClient, QueryClientProvider } from 'react-query';
4 | import { ReactQueryDevtools } from 'react-query/devtools';
5 | import { SessionProvider } from 'next-auth/react';
6 | import 'tailwindcss/tailwind.css';
7 | import { CartProvider } from '../components/cart/context/cartContext';
8 |
9 | export default function App({ Component, pageProps, err }: AppProps & { err: Error }) {
10 | const [queryClient] = useState(() => new QueryClient());
11 |
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/utils/env.ts:
--------------------------------------------------------------------------------
1 | type NameToType = {
2 | readonly ENV: 'production' | 'staging' | 'development' | 'test';
3 | readonly NEXTAUTH_URL: string;
4 | readonly NODE_ENV: 'production' | 'development';
5 | readonly POSTGRES_USER: string;
6 | readonly POSTGRES_PASSWORD: string;
7 | readonly POSTGRES_DB: string;
8 | readonly DATABASE_URL: string;
9 | readonly GITHUB_SECRET: string;
10 | readonly GITHUB_ID: string;
11 | readonly SECRET: string;
12 | readonly SENTRY_DSN: string;
13 | readonly NEXTAUTH_CALLBACK_URL: string;
14 | readonly NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: string;
15 | readonly STRIPE_SECRET_KEY: string;
16 | readonly NEXT_PUBLIC_STRIPE_SUCCESS_REDIRECT_URL: string;
17 | readonly NEXT_PUBLIC_STRIPE_ERROR_REDIRECT_URL: string;
18 | readonly ABC: number;
19 | };
20 |
21 | export function getEnv(name: Env): NameToType[Env];
22 | export function getEnv(name: keyof NameToType): NameToType[keyof NameToType] {
23 | const val = process.env[name];
24 |
25 | if (!val) {
26 | throw new Error(`Cannot find environmental variable: ${name}`);
27 | }
28 |
29 | return val;
30 | }
31 |
--------------------------------------------------------------------------------
/components/layout/header/Header.tsx:
--------------------------------------------------------------------------------
1 | import { useAuth } from '../../auth/hooks/useAuth';
2 | import { Logo } from '../logo/Logo';
3 |
4 | export const Header = () => {
5 | const { session, signIn, signOut } = useAuth();
6 |
7 | return (
8 |
9 |
10 |
26 |
18 |
23 |
25 |
26 |
{name}
27 |
{price / 100}
28 |
29 |
30 |
31 |
38 |
39 |
40 |
2 |
3 |
4 |
5 | 
6 |
7 |
8 |
9 |
10 |
11 | Fullstack Next.js E-commerce
12 |
13 |
14 |
15 | ## Technologies 🔧
16 |
17 | - Next.js(React)
18 | - TypeScript
19 | - Prisma
20 | - NextAuth
21 | - Stripe
22 | - Tailwind
23 | - React Query
24 | - Sentry
25 | - Yup
26 |
27 | ## Screenshots 📸
28 |
29 |
30 |
31 | 
32 |
33 |
34 |
35 | 
36 |
37 |
38 |
39 |
40 | ## Installation 💾
41 |
42 | ```bash
43 | git clone https://github.com/marksantiago290/eCommerce_MERN.git
44 | ```
45 |
46 | Fill your `.env` variables:
47 |
48 | ```
49 | POSTGRES_USER=
50 | POSTGRES_PASSWORD=
51 | POSTGRES_DB=
52 | DATABASE_URL="postgresql://:@:/?schema=public&sslmode=prefer"
53 | GITHUB_SECRET=
54 | GITHUB_ID=
55 | SECRET=
56 | NEXTAUTH_URL=
57 | NEXTAUTH_CALLBACK_URL=
58 | NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
59 | STRIPE_SECRET_KEY=
60 | NEXT_PUBLIC_STRIPE_SUCCESS_REDIRECT_URL=
61 | NEXT_PUBLIC_STRIPE_ERROR_REDIRECT_URL
62 | ```
63 |
64 | Install deps:
65 |
66 | ```bash
67 | npm install
68 | ```
69 |
70 | Generate Prisma Client:
71 |
72 | ```bash
73 | npx prisma generate
74 | ```
75 |
76 | Run docker-compose:
77 |
78 | ```bash
79 | docker-compose up -d
80 | ```
81 |
82 | Run Next dev server:
83 |
84 | ```bash
85 | npm run dev
86 | ```
87 |
--------------------------------------------------------------------------------
/components/cart/context/reducers/cartReducer.ts:
--------------------------------------------------------------------------------
1 | import type Prisma from "@prisma/client";
2 | import type { Action, State } from "../types";
3 |
4 | const calculateTotalPrice = (products: Array) => {
5 | return products.reduce((acc, curr) => acc + curr.price, 0);
6 | };
7 |
8 | export const cartReducer = (state: State, action: Action) => {
9 | switch (action.type) {
10 | case "addProduct": {
11 | const products = [...state.products];
12 | const newProduct = action.payload;
13 | const isTheNewProductInCart = products.find(
14 | (product) => product.id === newProduct.id
15 | );
16 |
17 | const newProducts = [newProduct, ...products];
18 |
19 | const totalPrice = calculateTotalPrice(newProducts);
20 |
21 | if (!isTheNewProductInCart) {
22 | return {
23 | ...state,
24 | products: newProducts,
25 | totalPrice,
26 | };
27 | }
28 | }
29 | case "deleteProduct": {
30 | const products = [...state.products];
31 | const productToDelete = action.payload;
32 |
33 | const newProducts = products.filter(
34 | (product) => product.id !== productToDelete.id
35 | );
36 |
37 | const totalPrice = calculateTotalPrice(newProducts);
38 |
39 | return {
40 | ...state,
41 | products: [...newProducts],
42 | totalPrice,
43 | };
44 | }
45 |
46 | case "openMenu": {
47 | return {
48 | ...state,
49 | isOpen: true,
50 | };
51 | }
52 | case "closeMenu": {
53 | return {
54 | ...state,
55 | isOpen: false,
56 | };
57 | }
58 |
59 | default: {
60 | throw new Error(`Unhandled action type`);
61 | }
62 | }
63 | };
64 |
--------------------------------------------------------------------------------
/components/products/Product.tsx:
--------------------------------------------------------------------------------
1 | import type Prisma from '@prisma/client';
2 | import { useBuyProduct } from './hooks/useBuyProduct';
3 | import { useCart } from '../cart/hooks/useCart';
4 |
5 | type ProductProps = Readonly;
6 |
7 | export const Product = (product: ProductProps) => {
8 | const { id, image, name, price } = product;
9 | const { mutate } = useBuyProduct();
10 | const { dispatch } = useCart();
11 |
12 | const buyProduct = () => mutate(product);
13 |
14 | const addToCart = () => {
15 | dispatch({ type: 'addProduct', payload: product });
16 | dispatch({ type: 'openMenu' });
17 | };
18 |
19 | return (
20 |
21 |
22 |
27 |
29 |
30 |
31 | {name}
32 |
33 |
{price / 100} zł
34 |
11 |
12 |