├── .gitignore
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── components
    ├── Button.js
    ├── CartLink.js
    ├── Image.js
    ├── Inventory.js
    ├── ListItem.js
    ├── QuantityPicker.js
    ├── ViewInventory.js
    ├── formComponents
    │   ├── AddInventory.js
    │   ├── ConfirmSignUp.js
    │   ├── SignIn.js
    │   └── SignUp.js
    ├── heroComponents
    │   ├── Center.js
    │   ├── DisplayMedium.js
    │   ├── DisplaySmall.js
    │   ├── Footer.js
    │   ├── Showcase.js
    │   ├── Spacer.js
    │   └── Tag.js
    └── index.js
├── context
    └── mainContext.js
├── ecommerce.config.js
├── example-images
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    └── 5.png
├── layouts
    └── layout.js
├── package.json
├── pages
    ├── _app.js
    ├── admin.js
    ├── cart.js
    ├── categories.js
    ├── category
    │   └── [name].js
    ├── checkout.js
    ├── index.js
    └── product
    │   └── [name].js
├── postcss.config.js
├── public
    ├── favicon.ico
    ├── fonts
    │   ├── Eina-Light.otf
    │   ├── Eina-SemiBold.otf
    │   ├── Eina-SemiBold.ttf
    │   ├── Eina.otf
    │   ├── Eina.ttf
    │   └── fonts.css
    ├── logo.png
    └── products
    │   ├── chair1.png
    │   ├── chair10.png
    │   ├── chair2.png
    │   ├── chair3.png
    │   ├── chair4.png
    │   ├── chair5.png
    │   ├── chair6.png
    │   ├── chair7.png
    │   ├── chair8.png
    │   ├── chair9.png
    │   ├── couch1.png
    │   ├── couch10.png
    │   ├── couch11.png
    │   ├── couch12.png
    │   ├── couch13.png
    │   ├── couch14.png
    │   ├── couch15.png
    │   ├── couch2.png
    │   ├── couch3.png
    │   ├── couch4.png
    │   ├── couch5.png
    │   ├── couch6.png
    │   ├── couch7.png
    │   ├── couch8.png
    │   └── couch9.png
├── serverless.yml
├── snippets
    └── lambda.js
├── styles
    └── globals.css
├── tailwind.config.js
├── theme.js
├── utils
    ├── categoryProvider.js
    ├── currencyProvider.js
    ├── helpers.js
    ├── inventory.js
    ├── inventoryByCategory.js
    ├── inventoryForCategory.js
    └── inventoryProvider.js
└── yarn.lock


/.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 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 
36 | # serverless
37 | .serverless
38 | .serverless_nextjs


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | package.json
3 | package-lock.json
4 | public
5 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": false,
4 |   "singleQuote": false,
5 |   "tabWidth": 2,
6 |   "trailingComma": "es5"
7 | }
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015
 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 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## Jamstack ECommerce Next
  2 | 
  3 | Jamstack ECommerce Next provides a way to quickly get up and running with a fully configurable ECommerce site using Next.js.
  4 | 
  5 | Out of the box, the site uses completely static data coming from a provider at `providers/inventoryProvider.js`. You can update this provider to fetch data from any real API by changing the call in the `getInventory` function.
  6 | 
  7 | ![Home](example-images/1.png)
  8 | 
  9 | ### Live preview
 10 | 
 11 | Click [here](https://www.jamstackecommerce.dev/) to see a live preview.
 12 | 
 13 | <details>
 14 |   <summary>Other Jamstack ECommerce pages</summary>
 15 | 
 16 | ### Category view
 17 | ![Category view](example-images/2.png)
 18 | 
 19 | ### Item view
 20 | ![Item view](example-images/3.png)
 21 | 
 22 | ### Cart view
 23 | ![Cart view](example-images/4.png)
 24 | 
 25 | ### Admin panel
 26 | ![Admin panel](example-images/5.png)
 27 | </details>
 28 | 
 29 | ### Getting started
 30 | 
 31 | 1. Clone the project
 32 | 
 33 | ```sh
 34 | $ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git
 35 | ```
 36 | 
 37 | 2. Install the dependencies:
 38 | 
 39 | ```sh
 40 | $ yarn
 41 | 
 42 | # or
 43 | 
 44 | $ npm install
 45 | ```
 46 | 
 47 | 3. Run the project
 48 | 
 49 | ```sh
 50 | $ npm run dev
 51 | 
 52 | # or to build
 53 | 
 54 | $ npm run build
 55 | ```
 56 | 
 57 | ## Deploy to Vercel
 58 | 
 59 | Use the [Vercel CLI](https://vercel.com/download)
 60 | 
 61 | ```sh
 62 | vercel
 63 | ```
 64 | 
 65 | ## Deploy to AWS
 66 | 
 67 | ```sh
 68 | npx serverless
 69 | ```
 70 | 
 71 | ## About the project
 72 | 
 73 | ### Tailwind
 74 | 
 75 | This project is styled using Tailwind. To learn more how this works, check out the Tailwind documentation [here](https://tailwindcss.com/docs).
 76 | 
 77 | ### Components
 78 | 
 79 | The main files, components, and images you may want to change / modify are:
 80 | 
 81 | __Logo__ - public/logo.png   
 82 | __Button, ListItem, etc..__ - components   
 83 | __Form components__ - components/formComponents   
 84 | __Context (state)__ - context/mainContext.js   
 85 | __Pages (admin, cart, checkout, index)__ - pages   
 86 | __Templates (category view, single item view, inventory views)__ - templates   
 87 | 
 88 | ### How it works
 89 | 
 90 | As it is set up, inventory is fetched from a local hard coded array of inventory items. This can easily be configured to instead be fetched from a remote source like Shopify or another CMS or data source by changing the inventory provider.
 91 | 
 92 | #### Configuring inventory provider
 93 | 
 94 | Update __utils/inventoryProvider.js__ with your own inventory provider.
 95 | 
 96 | #### Download images at build time
 97 | 
 98 | If you change the provider to fetch images from a remote source, you may choose to also download the images locally at build time to improve performance. Here is an example of some code that should work for this use case:
 99 | 
100 | ```javascript
101 | import fs from 'fs'
102 | import axios from 'axios'
103 | import path from 'path'
104 | 
105 | function getImageKey(url) {
106 |   const split = url.split('/')
107 |   const key = split[split.length - 1]
108 |   const keyItems = key.split('?')
109 |   const imageKey = keyItems[0]
110 |   return imageKey
111 | }
112 | 
113 | function getPathName(url, pathName = 'downloads') {
114 |   let reqPath = path.join(__dirname, '..')
115 |   let key = getImageKey(url)
116 |   key = key.replace(/%/g, "")
117 |   const rawPath = `${reqPath}/public/${pathName}/${key}`
118 |   return rawPath
119 | }
120 | 
121 | async function downloadImage (url) {
122 |   return new Promise(async (resolve, reject) => {
123 |     const path = getPathName(url)
124 |     const writer = fs.createWriteStream(path)
125 |     const response = await axios({
126 |       url,
127 |       method: 'GET',
128 |       responseType: 'stream'
129 |     })
130 |     response.data.pipe(writer)
131 |     writer.on('finish', resolve)
132 |     writer.on('error', reject)
133 |   })
134 | }
135 | 
136 | export default downloadImage
137 | ```
138 | 
139 | You can use this function to map over the inventory data after fetching and replace the image paths with a reference to the location of the downloaded images, probably would look something like this:
140 | 
141 | ```javascript
142 | await Promise.all(
143 |   inventory.map(async (item, index) => {
144 |     try {
145 |       const relativeUrl = `../downloads/${item.image}`
146 |       if (!fs.existsSync(`${__dirname}/public/downloads/${item.image}`)) {
147 |         await downloadImage(image)
148 |       }
149 |       inventory[index].image = relativeUrl
150 |     } catch (err) {
151 |       console.log('error downloading image: ', err)
152 |     }
153 |   })
154 | )
155 | ```
156 | 
157 | ### Updating with Auth / Admin panel
158 | 
159 | 1. Update __pages/admin.js__ with sign up, sign, in, sign out, and confirm sign in methods.
160 | 
161 | 2. Update __components/ViewInventory.js__ with methods to interact with the actual inventory API.
162 | 
163 | 3. Update __components/formComponents/AddInventory.js__ with methods to add item to actual inventory API.
164 | 
165 | ### Roadmap
166 | 
167 | - Full product and category search
168 | - Auto dropdown navigation for large number of categories
169 | - Ability to add more / more configurable metadata to item details
170 | - Themeing + dark mode
171 | - Optional user account / profiles out of the box
172 | - Make Admin Panel responsive
173 | - Have an idea or a request? Submit [an issue](https://github.com/jamstack-cms/jamstack-ecommerce/issues) or [a pull request](https://github.com/jamstack-cms/jamstack-ecommerce/pulls)!
174 | 
175 | ### Other considerations
176 | 
177 | #### Server-side processing of payments
178 | 
179 | To see an example of how to process payments server-side with stripe, check out the [Lambda function in the snippets folder](https://github.com/jamstack-cms/jamstack-ecommerce/blob/next/snippets/lambda.js).
180 | 
181 | Also, consider verifying totals by passing in an array of IDs into the function, calculating the total on the server, then comparing the totals to check and make sure they match.


--------------------------------------------------------------------------------
/components/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function Button({ title, onClick, full = false }) {
 4 |   let classNames = "text-sm font-bold tracking-wider bg-transparent hover:bg-black text-black font-semibold hover:text-white py-4 px-12 border-2 border-black hover:border-transparent"
 5 | 
 6 |   if (full) {
 7 |     classNames = `${classNames} w-full`
 8 |   }
 9 |   return (
10 |     <button onClick={onClick} className={classNames}>
11 |       <div>
12 |         {title}
13 |       </div>
14 |     </button>
15 |   )
16 | }


--------------------------------------------------------------------------------
/components/CartLink.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import { ContextProviderComponent, SiteContext } from '../context/mainContext'
 3 | import { FaShoppingCart, FaCircle } from 'react-icons/fa';
 4 | import Link from "next/link"
 5 | import { colors } from '../theme'
 6 | const { primary } = colors
 7 | 
 8 | function CartLink(props) {
 9 |   const [renderClientSideComponent, setRenderClientSideComponent] = useState(false)
10 |   useEffect(() => {
11 |     setRenderClientSideComponent(true)
12 |   }, [])
13 |   let { context: { numberOfItemsInCart = 0 }} = props
14 |   return (
15 |     <div>
16 |       <div className="fixed
17 |       sm:top-53 right-24 desktop:right-flexiblemargin
18 |       top-40 z-10">
19 |         <div className="flex flex-1 justify-end pr-4 relative">
20 |           <Link href="/cart">
21 |             <a aria-label="Cart">
22 |               <FaShoppingCart />
23 |             </a>
24 |           </Link>
25 |           {
26 |             renderClientSideComponent && numberOfItemsInCart > Number(0) && (
27 |               <FaCircle color={primary} size={12} suppressHydrationWarning />
28 |             )
29 |           }
30 |         </div>
31 |       </div>
32 |     </div>
33 |   )
34 | }
35 | 
36 | function CartLinkWithContext(props) {
37 |   return (
38 |     <ContextProviderComponent>
39 |       <SiteContext.Consumer>
40 |         {
41 |           context => <CartLink {...props} context={context} />
42 |         }
43 |       </SiteContext.Consumer>
44 |     </ContextProviderComponent>
45 |   )
46 | }
47 | 
48 | export default CartLinkWithContext


--------------------------------------------------------------------------------
/components/Image.js:
--------------------------------------------------------------------------------
1 | const ImageComponent = ({ src, ...props}) => {
2 |   return <img src={src} {...props} />
3 | }
4 | 
5 | export default ImageComponent
6 | 


--------------------------------------------------------------------------------
/components/Inventory.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AddInventory from '../components/formComponents/AddInventory'
 3 | import ViewInventory from '../components/ViewInventory'
 4 | 
 5 | class Inventory extends React.Component {
 6 |   state = {
 7 |     viewState: 'view'
 8 |   }
 9 |   toggleViewState(viewState) {
10 |     this.setState(() => ({ viewState }))
11 |   }
12 |   render() {
13 |      return (
14 |        <div>
15 |           <div className="flex my-6">
16 |             <p role="button" className="mr-4 cursor-pointer hover:text-primary" onClick={() => this.toggleViewState('view')}>View Inventory</p>
17 |             <p role="button" className="cursor-pointer hover:text-primary" onClick={() => this.toggleViewState('add')}>Add Item</p>
18 |           </div>
19 |           {
20 |             this.state.viewState === 'view' ? (
21 |               <ViewInventory />
22 |             ) : (<AddInventory />)
23 |           }
24 |           <button onClick={this.props.signOut} className="mt-4 bg-primary hover:bg-black text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
25 |             Sign Out
26 |           </button>
27 |        </div>
28 |      )
29 |   }
30 | }
31 | 
32 | export default Inventory


--------------------------------------------------------------------------------
/components/ListItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | import DENOMINATION from '../utils/currencyProvider'
 4 | import Image from './Image'
 5 | 
 6 | const ListItem = ({ link, title, imageSrc, price }) =>  (
 7 |   <div className="
 8 |     w-100
 9 |     md:w-1/2
10 |     lg:w-1/4
11 |     p1 sm:p-2
12 |   ">
13 |     <Link href={`${link}`}>
14 |       <a aria-label={title}>
15 |         <div className="h-72 flex justify-center items-center bg-light hover:bg-light-200">
16 |           <div className="flex flex-column justify-center items-center">
17 |             <Image alt={title} src={imageSrc} className="w-3/5" />
18 |           </div>
19 |         </div>
20 |       </a>
21 |     </Link>
22 |     <div>
23 |       <p className="m-4 text-center text-l font-semibold mb-1">{title}</p>
24 |       <p className="text-center text-gray-700 mb-4">{`${DENOMINATION}${price}`}</p>
25 |     </div>
26 |   </div>
27 | )
28 | 
29 | export default ListItem


--------------------------------------------------------------------------------
/components/QuantityPicker.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function QuantityPicker({
 4 |   increment, decrement, numberOfitems, hideQuantityLabel
 5 | }) {
 6 |   return (
 7 |     <div className={`flex items-center`}>
 8 |       {
 9 |         !hideQuantityLabel && (
10 |           <div className="px-2 text-xs">QUANTITY</div>
11 |         )
12 |       }
13 |       <button
14 |         className="
15 |         w-10 h-10 text-xl
16 |         md:w-8 md:h-8 md:text-sm 
17 |         cursor-pointer text-center border pb-.5
18 |         hover:bg-gray-900 hover:text-white
19 |         focus:outline-none
20 |         "
21 |         onClick={increment}
22 |       >+</button>
23 |       <p className="
24 |         w-10 h-10 pt-2 text-base
25 |         md:w-8 md:h-8 md:pt-2 md:text-xs
26 |         m-0 border-t border-b text-center">{numberOfitems}</p>
27 |       <button
28 |         className="
29 |         w-10 h-10 text-2xl
30 |         md:w-8 md:h-8 md:text-sm
31 |         cursor-pointer text-center border pb-.5
32 |         hover:bg-gray-900 hover:text-white
33 |         focus:outline-none
34 |         "
35 |         onClick={decrement}>-</button>
36 |     </div>
37 |   )
38 | }


--------------------------------------------------------------------------------
/components/ViewInventory.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { fetchInventory } from '../utils/inventoryProvider'
  3 | import DENOMINATION from '../utils/currencyProvider'
  4 | import Image from '../components/Image'
  5 | import Link from 'next/link'
  6 | import { slugify } from '../utils/helpers'
  7 | import { FaTimes } from 'react-icons/fa'
  8 | 
  9 | class ViewInventory extends React.Component {
 10 |   state = {
 11 |     inventory: [],
 12 |     currentItem: {},
 13 |     editingIndex: []
 14 |   }
 15 |   componentDidMount() {
 16 |     this.fetchInventory()
 17 |   }
 18 |   fetchInventory = async() => {
 19 |     const inventory = await fetchInventory()
 20 |     this.setState({ inventory })
 21 |   }
 22 |   editItem = (item, index) => {
 23 |     const editingIndex = index
 24 |     this.setState({ editingIndex, currentItem: item })    
 25 |   }
 26 |   saveItem = async index => {
 27 |     const inventory = [...this.state.inventory]
 28 |     inventory[index] = this.state.currentItem
 29 |     // update item in database
 30 |     this.setState({ editingIndex: null, inventory })
 31 |   }
 32 |   deleteItem = async index => {
 33 |     const inventory = [...this.state.inventory.slice(0, index), ...this.state.inventory.slice(index + 1)]
 34 |     this.setState({ inventory })
 35 |   }
 36 |   onChange = event => {
 37 |     const currentItem = {
 38 |       ...this.state.currentItem,
 39 |       [event.target.name]: event.target.value
 40 |     }
 41 |     
 42 |     this.setState({ currentItem })
 43 |   }
 44 |   render() {
 45 |     const { inventory, currentItem, editingIndex } = this.state
 46 |     return (
 47 |       <div>
 48 |         <h2 className="text-3xl">Inventory</h2>
 49 |         {
 50 |           inventory.map((item, index) => {
 51 |             const isEditing = editingIndex === index
 52 |             if (isEditing) {
 53 |               return (
 54 |                 <div className="border-b py-10" key={item.id}>
 55 |                   <div className="flex items-center">
 56 |                     <Link href={`/product/${slugify(item.name)}`}>
 57 |                       <a aria-label={item.name}>
 58 |                         <Image className="w-32 m-0" src={item.image} alt={item.name} />
 59 |                       </a>
 60 |                     </Link>
 61 |                     <input
 62 |                       onChange={(e) => this.onChange(e, index)}
 63 |                       className="ml-8 shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
 64 |                       value={currentItem.name}
 65 |                       placeholder="Item name"
 66 |                       name="name"
 67 |                     />
 68 |                     <div className="flex flex-1 justify-end items-center">
 69 |                       <p className="m-0 text-sm mr-2">In stock:</p>
 70 |                       <input
 71 |                         onChange={this.onChange}
 72 |                         className="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
 73 |                         value={currentItem.currentInventory}
 74 |                         name="currentInventory"
 75 |                         placeholder="Item inventory"
 76 |                       />
 77 |                       <input
 78 |                         onChange={this.onChange}
 79 |                         className="ml-16 shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
 80 |                         value={currentItem.price}
 81 |                         name="price"
 82 |                         placeholder="Item price"
 83 |                       />
 84 |                     </div>
 85 |                     <div role="button" onClick={() => this.saveItem(index)} className="m-0 ml-10 text-gray-900 text-s cursor-pointer">
 86 |                       <p className="text-sm ml-10 m-0">Save</p>
 87 |                     </div>
 88 |                   </div>
 89 |                 </div>
 90 |               )
 91 |             }
 92 |             return (
 93 |               <div className="border-b py-10" key={item.id}>
 94 |                 <div className="flex items-center">
 95 |                   <Link href={`/product/${slugify(item.name)}`}>
 96 |                     <a>
 97 |                       <Image className="w-32 m-0" src={item.image} alt={item.name} />
 98 |                     </a>
 99 |                   </Link>
100 |                   <Link href={`/product/${slugify(item.name)}`}>
101 |                     <a>
102 |                       <p className="m-0 pl-10 text-gray-600 text-sm">
103 |                         {item.name}
104 |                       </p>
105 |                     </a>
106 |                   </Link>
107 |                   <div className="flex flex-1 justify-end">
108 |                     <p className="m-0 pl-10 text-gray-900 text-sm">In stock: {item.currentInventory}</p>
109 |                     <p className="m-0 pl-20 text-gray-900 font-semibold">
110 |                       {DENOMINATION + item.price}
111 |                     </p>
112 |                   </div>
113 |                   <div className="flex items-center m-0 ml-10 text-gray-900 text-s cursor-pointer">
114 |                     <FaTimes onClick={() => this.deleteItem(index)} />
115 |                     <p role="button" onClick={() => this.editItem(item, index)} className="text-sm ml-10 m-0">Edit</p>
116 |                   </div>
117 |                 </div>
118 |               </div>
119 |             )
120 |           })
121 |         }
122 |       </div>
123 |     )
124 |   }
125 | }
126 | 
127 | export default ViewInventory


--------------------------------------------------------------------------------
/components/formComponents/AddInventory.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | const initialState = {
  4 |   name: '', brand: '', price: '', categories: [], image: '', description: '', currentInventory: ''
  5 | }
  6 | 
  7 | class AddInventory extends React.Component {
  8 |   state = initialState
  9 |   clearForm = () => {
 10 |     this.setState(() => (initialState))
 11 |   }
 12 |   onChange = (e) => {
 13 |     this.setState({ [e.target.name]: e.target.value})
 14 |   }
 15 |   onImageChange = async (e) => {
 16 |     const file = e.target.files[0];
 17 |     this.setState({ image: file })
 18 |     // const storageUrl = await Storage.put('example.png', file, {
 19 |     //     contentType: 'image/png'
 20 |     // })
 21 |     // this.setState({ image: storageUrl  })
 22 |   }
 23 |   addItem = async () => {
 24 |     const { name, brand, price, categories, image, description, currentInventory } = this.state
 25 |     if (!name || !brand || !price || !categories.length || !description || !currentInventory || !image) return
 26 |     // add to database
 27 |     this.clearForm()
 28 |   }
 29 |   render() {
 30 |     const {
 31 |       name, brand, price, categories, image, description, currentInventory
 32 |     } = this.state
 33 |     return (
 34 |       <div>
 35 |         <h3 className="text-3xl">Add Item</h3>
 36 |         <div className="flex flex-1 justify-center">
 37 |           <div className="w-full max-w-144">
 38 |             <form className="bg-white shadow-xs rounded px-8 pt-6 pb-8 mb-4">
 39 |               <div className="mb-4">
 40 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
 41 |                   Item name
 42 |                 </label>
 43 |                 <input
 44 |                 onChange={this.onChange}
 45 |                 value={name} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Item name" name="name" />
 46 |               </div>
 47 |               <div className="mb-4">
 48 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="price">
 49 |                   Item price
 50 |                 </label>
 51 |                 <input
 52 |                 onChange={this.onChange}
 53 |                 value={price} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="price" type="text" placeholder="Item price" name="price" />
 54 |               </div>
 55 |               <div className="mb-4">
 56 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="description">
 57 |                   Item Description
 58 |                 </label>
 59 |                 <input
 60 |                 onChange={this.onChange}
 61 |                 value={description} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="description" placeholder="Item Description" name="description" />
 62 |               </div>
 63 |               <div className="mb-4">
 64 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="item image">
 65 |                   Item image
 66 |                 </label>
 67 |                 <input
 68 |                   type="file"
 69 |                   onChange={(e) => this.onImageChange(e)}
 70 |                 />
 71 |               </div>
 72 |               <div className="mb-4">
 73 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="currentInventory">
 74 |                   In stock
 75 |                 </label>
 76 |                 <input
 77 |                 onChange={this.onChange}
 78 |                 value={currentInventory} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="currentInventory" placeholder="Items in stock" name="currentInventory" />
 79 |               </div>
 80 |               <div className="mb-4">
 81 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="categories">
 82 |                   Item categories
 83 |                 </label>
 84 |                 <input
 85 |                 onChange={this.onChange}
 86 |                 value={categories} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="categories" placeholder="Comma separated list of item categories" name="categories" />
 87 |               </div>
 88 |               <div className="mb-4">
 89 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="brand">
 90 |                   Item brand
 91 |                 </label>
 92 |                 <input
 93 |                 onChange={this.onChange}
 94 |                 value={brand} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="brand" placeholder="Item brand" name="brand" />
 95 |               </div>
 96 |               <div className="flex items-center justify-between mt-4">
 97 |                 <button onClick={this.addItem} className="bg-primary hover:bg-black text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
 98 |                   Add Item
 99 |                 </button>
100 |                 <a onClick={this.clearForm} className="inline-block align-baseline font-bold text-sm" href="#">
101 |                   Clear Form
102 |                 </a>
103 |               </div>
104 |             </form>
105 |           </div>
106 |         </div>
107 |       </div>
108 |     )
109 |   }
110 | }
111 | 
112 | export default AddInventory


--------------------------------------------------------------------------------
/components/formComponents/ConfirmSignUp.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | class ConfirmSignUp extends React.Component {
 4 |   state = {
 5 |     username: '', authcode: ''
 6 |   }
 7 |   onChange = (e) => {
 8 |     this.setState({ [e.target.name]: e.target.value})
 9 |   }
10 |   render() {
11 |     return (
12 |       <div>
13 |         <h3 className="py-4">Sign Up</h3>
14 |         <div className="flex flex-1 justify-center">
15 |           <div className="w-full max-w-144">
16 |             <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
17 |               <div className="mb-4">
18 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="username">
19 |                   Username
20 |                 </label>
21 |                 <input
22 |                 onChange={this.onChange} name="username"
23 |                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username" />
24 |               </div>
25 |               <div className="mb-6">
26 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="authcode">
27 |                   Authentication Code
28 |                 </label>
29 |                 <input
30 |                 onChange={this.onChange} name="authcode"
31 |                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="authcode" type="authcode" />
32 |               </div>
33 |               <div className="flex items-center justify-between">
34 |                 <button onClick={() => this.props.confirmSignUp(this.state)} className="bg-primary hover:bg-primary text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
35 |                   Confirm Sign Up
36 |                 </button>
37 |                 <a className="inline-block align-baseline font-bold text-sm" href="#">
38 |                   Forgot Password?
39 |                 </a>
40 |               </div>
41 |             </form>
42 |           </div>
43 |         </div>
44 |       </div>
45 |     )
46 |   }
47 | }
48 | 
49 | export default ConfirmSignUp


--------------------------------------------------------------------------------
/components/formComponents/SignIn.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | class SignIn extends React.Component {
 4 |   state = {
 5 |     username: '', password: ''
 6 |   }
 7 |   onChange = (e) => {
 8 |     this.setState({ [e.target.name]: e.target.value})
 9 |   }
10 |   render() {
11 |     return (
12 |       <div>
13 |         <h3 className="my-4">Sign In</h3>
14 |         <div className="flex flex-1 justify-center">
15 |           <div className="w-full max-w-144">
16 |             <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
17 |               <div className="mb-4">
18 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="username">
19 |                   Username
20 |                 </label>
21 |                 <input
22 |                   onChange={this.onChange} name="username"
23 |                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username" />
24 |               </div>
25 |               <div className="mb-6">
26 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
27 |                   Password
28 |                 </label>
29 |                 <input
30 |                   onChange={this.onChange} name="password"
31 |                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************" />
32 |               </div>
33 |               <div className="flex items-center justify-between">
34 |                 <button onClick={() => this.props.signIn(this.state)} className="bg-primary hover:bg-black text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
35 |                   Sign In
36 |                 </button>
37 |                 <a className="inline-block align-baseline font-bold text-sm" href="#">
38 |                   Forgot Password?
39 |                 </a>
40 |               </div>
41 |             </form>
42 |           </div>
43 |         </div>
44 |       </div>
45 |     )
46 |   }
47 | }
48 | 
49 | export default SignIn
50 | 


--------------------------------------------------------------------------------
/components/formComponents/SignUp.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | class SignUp extends React.Component {
 4 |   state = {
 5 |     username: '', email: '', password: ''
 6 |   }
 7 |   onChange = (e) => {
 8 |     this.setState({ [e.target.name]: e.target.value})
 9 |   }
10 |   render() {
11 |     return (
12 |       <div>
13 |         <h3 className="my-4">Sign Up</h3>
14 |         <div className="flex flex-1 justify-center">
15 |           <div className="w-full max-w-144">
16 |             <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
17 |               <div className="mb-4">
18 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="username">
19 |                   Username
20 |                 </label>
21 |                 <input
22 |                   onChange={this.onChange} name="username"
23 |                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username" />
24 |               </div>
25 |               <div className="mb-6">
26 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
27 |                   Email
28 |                 </label>
29 |                 <input
30 |                   onChange={this.onChange} name="email"
31 |                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="email" placeholder="Email address" />
32 |               </div>
33 |               <div className="mb-6">
34 |                 <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
35 |                   Password
36 |                 </label>
37 |                 <input
38 |                   onChange={this.onChange} name="password"
39 |                 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************" />
40 |               </div>
41 |               <div className="flex items-center justify-between">
42 |                 <button onClick={() => this.props.signUp(this.state)} className="bg-primary hover:bg-black text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
43 |                   Sign Up
44 |                 </button>
45 |                 <a className="inline-block align-baseline font-bold text-sm" href="#" onClick={() => this.props.toggleFormState('signIn')}>
46 |                   Already signed up?
47 |                 </a>
48 |               </div>
49 |             </form>
50 |           </div>
51 |         </div>
52 |       </div>
53 |     )
54 |   }
55 | }
56 | 
57 | export default SignUp


--------------------------------------------------------------------------------
/components/heroComponents/Center.js:
--------------------------------------------------------------------------------
 1 | import { Button } from '../';
 2 | import { useRouter } from 'next/router'
 3 | 
 4 | const Center = ({ price, title, link }) => {
 5 |   const router = useRouter()
 6 |   function navigate() {
 7 |     router.push(link)
 8 |   }
 9 |   return (
10 |     <div>
11 |       <p className="text-4xl xl:text-5xl font-bold tracking-widest leading-none">{title}</p>
12 |       <p className="py-6 tracking-wide">FROM <span>${price}</span></p>
13 |       <Button
14 |         onClick={navigate}
15 |         title="Shop Now"
16 |       />
17 |     </div>
18 |   )
19 | }
20 | 
21 | export default Center


--------------------------------------------------------------------------------
/components/heroComponents/DisplayMedium.js:
--------------------------------------------------------------------------------
 1 | import Image from '../Image'
 2 | import Link from 'next/link'
 3 | 
 4 | const DisplayMedium = ({ imageSrc, title, subtitle, link }) => {
 5 |   return (
 6 |     <div className="
 7 |     mb-4 lg:mb-0
 8 |     bg-light p-8 pb-0 hover:bg-light-200">
 9 |       <Link href={`${link}`}>
10 |         <a aria-label={title}>
11 |           <div className="flex flex-column justify-center items-center h-56">
12 |             <Image src={imageSrc} alt={title} className="w-3/5" />
13 |           </div>
14 |           <div className="mb-8">
15 |             <p className="text-3xl font-semibold mb-1">{title}</p>
16 |             <p className="text-xs text-gray-700">{subtitle}</p>
17 |           </div>
18 |         </a>
19 |       </Link>
20 |     </div>
21 |   )
22 | }
23 | 
24 | export default DisplayMedium;


--------------------------------------------------------------------------------
/components/heroComponents/DisplaySmall.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import { getTrimmedString } from '../../utils/helpers'
 3 | import Image from '../Image'
 4 | 
 5 | const DisplaySmall = ({ link, title, subtitle, imageSrc }) =>  (
 6 |   <div className="lg:w-flex-fourth bg-light
 7 |   px-6 pt-10 pb-2 lg:p-6 lg:pb-0
 8 |   hover:bg-light-200 lg:mb-0 mb-4">
 9 |     <Link href={link}>
10 |       <a aria-label={title}>
11 |         <div className="flex flex-column justify-center items-center h-32">
12 |           <Image alt={title} src={imageSrc} className="w-3/5" />
13 |         </div>
14 |         <div className="">
15 |           <p className="text-xl font-semibold mb-1">{title}</p>
16 |           <p className="text-xs text-gray-700 mb-4">{getTrimmedString(subtitle, 150)}</p>
17 |         </div>
18 |       </a>
19 |     </Link>
20 |   </div>
21 | )
22 | 
23 | export default DisplaySmall


--------------------------------------------------------------------------------
/components/heroComponents/Footer.js:
--------------------------------------------------------------------------------
 1 | const Footer = ({ designer }) => {
 2 |   return (
 3 |     <div className="flex flex-1 flex-col justify-end pb-10 mt-4">
 4 |         <p className="font-light text-xs tracking-tight m-0 leading-tight mb-2">Design by</p>
 5 |         <p className="text-xxs font-semibold tracking-tight m-0 leading-tight">{designer}</p>
 6 |     </div>
 7 |   )
 8 | }
 9 | 
10 | export default Footer


--------------------------------------------------------------------------------
/components/heroComponents/Showcase.js:
--------------------------------------------------------------------------------
 1 | import Image from '../Image'
 2 | 
 3 | const Showcase = ({ imageSrc }) => {
 4 |   return (
 5 |     <div className="z-10">
 6 |       <Image src={imageSrc} className="w-136" alt="Showcase item" />
 7 |     </div>
 8 |   )
 9 | }
10 | 
11 | export default Showcase


--------------------------------------------------------------------------------
/components/heroComponents/Spacer.js:
--------------------------------------------------------------------------------
1 | const Spacer = ({ width }) => (
2 |   <div className={`m-${width}`} />
3 | )
4 | 
5 | export default Spacer


--------------------------------------------------------------------------------
/components/heroComponents/Tag.js:
--------------------------------------------------------------------------------
 1 | const Tag = ({ category, year }) => {
 2 |   return (
 3 |     <div className="border-l border-gray-900 px-3 pt-1 mb-10">
 4 |       <p className="text-xs tracking-wider m-0 leading-tight">{category}</p>
 5 |       { year && <p className="text-xs tracking-wider m-0 leading-tight">{year}</p>}
 6 |     </div>
 7 |   )
 8 | }
 9 | 
10 | export default Tag


--------------------------------------------------------------------------------
/components/index.js:
--------------------------------------------------------------------------------
 1 | import Tag from './heroComponents/Tag'
 2 | import Center from './heroComponents/Center'
 3 | import Footer from './heroComponents/Footer'
 4 | import Showcase from './heroComponents/Showcase'
 5 | import DisplaySmall from './heroComponents/DisplaySmall'
 6 | import DisplayMedium from './heroComponents/DisplayMedium'
 7 | import Spacer from './heroComponents/Spacer'
 8 | import Button from './Button'
 9 | import Image from './Image'
10 | 
11 | export {
12 |   Tag,
13 |   Center,
14 |   Footer,
15 |   Button,
16 |   Image,
17 |   Showcase,
18 |   DisplaySmall,
19 |   DisplayMedium,
20 |   Spacer
21 | }


--------------------------------------------------------------------------------
/context/mainContext.js:
--------------------------------------------------------------------------------
  1 | import { toast } from 'react-toastify'
  2 | import React from 'react'
  3 | const STORAGE_KEY = 'NEXT_ECOMMERCE_STARTER_'
  4 | 
  5 | const initialState = {
  6 |   cart: [],
  7 |   numberOfItemsInCart: 0,
  8 |   total: 0
  9 | }
 10 | 
 11 | const SiteContext = React.createContext()
 12 | 
 13 | function calculateTotal(cart) {
 14 |   const total = cart.reduce((acc, next) => {
 15 |     const quantity = next.quantity
 16 |     acc = acc + JSON.parse(next.price) * quantity
 17 |     return acc
 18 |   }, 0)
 19 |   return total
 20 | }
 21 | 
 22 | class ContextProviderComponent extends React.Component {
 23 |   componentDidMount() {
 24 |     if (typeof window !== 'undefined') {
 25 |       const storageState = window.localStorage.getItem(STORAGE_KEY)
 26 |       if (!storageState) {
 27 |         window.localStorage.setItem(STORAGE_KEY, JSON.stringify(initialState))
 28 |       }
 29 |     }
 30 |   }
 31 | 
 32 |   setItemQuantity = (item) => {
 33 |     const storageState = JSON.parse(window.localStorage.getItem(STORAGE_KEY))
 34 |     const { cart } = storageState
 35 |     const index = cart.findIndex(cartItem => cartItem.id === item.id)
 36 |     cart[index].quantity = item.quantity
 37 |     window.localStorage.setItem(STORAGE_KEY, JSON.stringify({
 38 |       cart, numberOfItemsInCart: cart.length, total: calculateTotal(cart)
 39 |     }))
 40 |     this.forceUpdate()
 41 |   }
 42 | 
 43 |   addToCart = item => {
 44 |     const storageState = JSON.parse(window.localStorage.getItem(STORAGE_KEY))
 45 |     const { cart } = storageState
 46 |     if (cart.length) {
 47 |       const index = cart.findIndex(cartItem => cartItem.id === item.id)
 48 |       if (index >= Number(0)) {
 49 |         /* If this item is already in the cart, update the quantity */
 50 |         cart[index].quantity = cart[index].quantity + item.quantity
 51 |       } else {
 52 |         /* If this item is not yet in the cart, add it */
 53 |         cart.push(item)
 54 |       }
 55 |     } else {
 56 |       /* If no items in the cart, add the first item. */
 57 |       cart.push(item)
 58 |     }
 59 | 
 60 |     window.localStorage.setItem(STORAGE_KEY, JSON.stringify({
 61 |       cart, numberOfItemsInCart: cart.length, total: calculateTotal(cart)
 62 |     }))
 63 |     toast("Successfully added item to cart!", {
 64 |       position: toast.POSITION.TOP_LEFT
 65 |     })
 66 |     this.forceUpdate()
 67 |   }
 68 | 
 69 |   removeFromCart = (item) => {
 70 |     const storageState = JSON.parse(window.localStorage.getItem(STORAGE_KEY))
 71 |     let { cart } = storageState
 72 |     cart = cart.filter(c => c.id !== item.id)
 73 | 
 74 |     window.localStorage.setItem(STORAGE_KEY, JSON.stringify({
 75 |       cart, numberOfItemsInCart: cart.length, total: calculateTotal(cart)
 76 |     }))
 77 |     this.forceUpdate()
 78 |   }
 79 | 
 80 |   clearCart = () => {
 81 |     window.localStorage.setItem(STORAGE_KEY, JSON.stringify(initialState))
 82 |     this.forceUpdate()
 83 |   }
 84 | 
 85 |   render() {
 86 |     let state = initialState
 87 |     if (typeof window !== 'undefined') {
 88 |       const storageState = window.localStorage.getItem(STORAGE_KEY)
 89 |       if (storageState) {
 90 |         state = JSON.parse(storageState)
 91 |       }
 92 |     }
 93 | 
 94 |     return (
 95 |       <SiteContext.Provider value={{
 96 |         ...state,
 97 |          addToCart: this.addToCart,
 98 |          clearCart: this.clearCart,
 99 |          removeFromCart: this.removeFromCart,
100 |          setItemQuantity: this.setItemQuantity
101 |       }}>
102 |        {this.props.children}
103 |      </SiteContext.Provider>
104 |     )
105 |   }
106 | }
107 | 
108 | export {
109 |   SiteContext,
110 |   ContextProviderComponent
111 | }


--------------------------------------------------------------------------------
/ecommerce.config.js:
--------------------------------------------------------------------------------
1 | // number of categories to show in the navigation by default
2 | const navItemLength = 5
3 | 
4 | export {
5 |   navItemLength
6 | }


--------------------------------------------------------------------------------
/example-images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/example-images/1.png


--------------------------------------------------------------------------------
/example-images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/example-images/2.png


--------------------------------------------------------------------------------
/example-images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/example-images/3.png


--------------------------------------------------------------------------------
/example-images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/example-images/4.png


--------------------------------------------------------------------------------
/example-images/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/example-images/5.png


--------------------------------------------------------------------------------
/layouts/layout.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import { slugify } from '../utils/helpers'
 3 | import 'react-toastify/dist/ReactToastify.css'
 4 | import { ToastContainer } from 'react-toastify'
 5 | import { navItemLength } from '../ecommerce.config'
 6 | 
 7 | export default function Layout({ children, categories }) {
 8 |   if (categories.length > navItemLength) {
 9 |     categories = categories.slice(0, navItemLength)
10 |   }
11 |   return (
12 |     <div>
13 |       <nav>
14 |         <div className="flex justify-center">
15 |           <div className="
16 |             mobile:px-12 sm:flex-row sm:pt-12 sm:pb-6 desktop:px-0
17 |             px-4 pt-8 flex flex-col w-fw
18 |           ">
19 |             <div className="mb-4 sm:mr-16 max-w-48 sm:max-w-none">
20 |               <Link href="/">
21 |                 <a aria-label="Home">
22 |                   <img src="/logo.png" alt="logo" width="90" height="28" />
23 |                 </a>
24 |               </Link>
25 |             </div>
26 |             <div className="flex flex-wrap mt-1">
27 |               <Link href="/">
28 |                 <a aria-label="Home">
29 |                   <p className="
30 |                     sm:mr-8 sm:mb-0
31 |                     mb-4 text-left text-smaller mr-4
32 |                   ">
33 |                   Home
34 |                   </p>
35 |                 </a>
36 |               </Link>
37 |               {
38 |                 categories.map((category, index) => (
39 |                   <Link
40 |                     href={`/category/${slugify(category)}`}
41 |                     key={index}
42 |                   >
43 |                     <a aria-label={category}>
44 |                       <p className="
45 |                           sm:mr-8 sm:mb-0
46 |                           mb-4 text-left text-smaller mr-4
47 |                         ">
48 |                         {category.charAt(0).toUpperCase() + category.slice(1)}
49 |                       </p>
50 |                     </a>
51 |                   </Link>
52 |                 ))
53 |               }
54 |               <Link href="/categories">
55 |                 <a aria-label="All categories">
56 |                   <p className="
57 |                     sm:mr-8 sm:mb-0
58 |                     mb-4 text-left text-smaller mr-4 
59 |                   ">
60 |                   All
61 |                   </p>
62 |                 </a>
63 |               </Link>
64 |             </div>
65 |           </div>
66 |         </div>
67 |       </nav>
68 |       <div className="mobile:px-10 px-4 pb-10 flex justify-center">
69 |         <main className="w-fw">{children}</main>
70 |       </div>
71 |       <footer className="flex justify-center">
72 |         <div className="
73 |         sm:flex-row sm:items-center
74 |         flex-col
75 |         flex w-fw px-12 py-8
76 |         desktop:px-0
77 |         border-solid
78 |         border-t border-gray-300">
79 |           <span className="block text-gray-700 text-xs">Copyright © 2021 JAMstack Ecommerce. All rights reserved.</span>
80 |           <div className="
81 |             sm:justify-end sm:m-0
82 |             flex flex-1 mt-4
83 |           ">
84 |             <Link href="/admin">
85 |               <a aria-label="Admin panel">
86 |               <p className="text-sm font-semibold">Admins</p>
87 |               </a>
88 |             </Link>
89 |           </div>
90 |         </div>
91 |       </footer>
92 |       <ToastContainer autoClose={3000} />
93 |     </div>
94 |   )
95 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jamstack-ecommerce",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@stripe/react-stripe-js": "^1.1.2",
12 |     "@stripe/stripe-js": "^1.11.0",
13 |     "autoprefixer": "^10.1.0",
14 |     "next": "10.0.4",
15 |     "postcss": "^8.2.2",
16 |     "react": "17.0.1",
17 |     "react-dom": "17.0.1",
18 |     "react-icons": "^4.1.0",
19 |     "react-toastify": "^6.2.0",
20 |     "tailwindcss": "^2.0.2",
21 |     "uuid": "^8.3.2"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.css'
 2 | import Layout from '../layouts/layout'
 3 | import fetchCategories from '../utils/categoryProvider'
 4 | 
 5 | function Ecommerce({ Component, pageProps, categories }) {
 6 |   return (
 7 |     <Layout categories={categories}>
 8 |       <Component {...pageProps} />
 9 |     </Layout>
10 |   )
11 | }
12 | 
13 | Ecommerce.getInitialProps = async () => {
14 |   const categories = await fetchCategories()
15 |   return {
16 |     categories
17 |   }
18 | }
19 | 
20 | export default Ecommerce


--------------------------------------------------------------------------------
/pages/admin.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import SignUp from '../components/formComponents/SignUp'
 3 | import ConfirmSignUp from '../components/formComponents/ConfirmSignUp'
 4 | import SignIn from '../components/formComponents/SignIn'
 5 | import Inventory from '../components/Inventory'
 6 | 
 7 | class Admin extends React.Component {
 8 |   state = { formState: 'signUp', isAdmin: false }
 9 |   toggleFormState = (formState) => {
10 |     this.setState(() => ({ formState }))
11 |   }
12 |   async componentDidMount() {
13 |     // check and update signed in state
14 |   }
15 |   signUp = async (form) => {
16 |     const { username, email, password } = form
17 |     // sign up
18 |     this.setState({ formState: 'confirmSignUp' })
19 |   }
20 |   confirmSignUp = async (form) => {
21 |     const { username, authcode } = form
22 |     // confirm sign up
23 |     this.setState({ formState: 'signIn' })
24 |   }
25 |   signIn = async (form) => {
26 |     const { username, password } = form
27 |     // signIn
28 |     this.setState({ formState: 'signedIn', isAdmin: true })
29 |   }
30 |   signOut = async() => {
31 |     // sign out
32 |     this.setState({ formState: 'signUp' })
33 |   }
34 | 
35 |   render() {
36 |     const { formState, isAdmin } = this.state
37 |     const renderForm = (formState, state) => {
38 |       switch(formState) {
39 |         case 'signUp':
40 |           return <SignUp {...state} signUp={this.signUp} toggleFormState={this.toggleFormState} />
41 |         case 'confirmSignUp':
42 |           return <ConfirmSignUp {...state} confirmSignUp={this.confirmSignUp} />
43 |         case 'signIn':
44 |           return <SignIn {...state} signIn={this.signIn} toggleFormState={this.toggleFormState} />
45 |         case 'signedIn':
46 |           return isAdmin ? <Inventory {...state} signOut={this.signOut} /> : <h3>Not an admin</h3>
47 |         default:
48 |           return null
49 |       }
50 |     }
51 |     
52 |     return (
53 |       <div className="flex flex-col">
54 |         <div className="max-w-fw flex flex-col">
55 |           <div className="pt-10">
56 |             <h1 className="text-5xl font-light">Admin Panel</h1>
57 |           </div>
58 |           {
59 |             renderForm(formState)
60 |           }
61 |         </div>
62 |       </div>
63 |     )
64 |   }
65 | }
66 | 
67 | export default Admin


--------------------------------------------------------------------------------
/pages/cart.js:
--------------------------------------------------------------------------------
  1 | import Link from 'next/link'
  2 | import { useState, useEffect } from 'react'
  3 | import { FaTimes, FaLongArrowAltRight } from 'react-icons/fa'
  4 | import { SiteContext, ContextProviderComponent } from '../context/mainContext'
  5 | import DENOMINATION from '../utils/currencyProvider'
  6 | import { slugify } from '../utils/helpers'
  7 | import QuantityPicker from '../components/QuantityPicker'
  8 | import Image from '../components/Image'
  9 | import Head from 'next/head'
 10 | import CartLink from '../components/CartLink'
 11 | 
 12 | const Cart = ({ context }) => {
 13 |   const [renderClientSideComponent, setRenderClientSideComponent] = useState(false)
 14 |   useEffect(() => {
 15 |     setRenderClientSideComponent(true)
 16 |   }, [])
 17 |   const {
 18 |     numberOfItemsInCart, cart, removeFromCart, total, setItemQuantity
 19 |   } = context
 20 |   const cartEmpty = numberOfItemsInCart === Number(0)
 21 | 
 22 |   function increment(item) {
 23 |     item.quantity = item.quantity + 1
 24 |     setItemQuantity(item)
 25 |   }
 26 | 
 27 |   function decrement(item) {
 28 |     if (item.quantity === 1) return
 29 |     item.quantity = item.quantity - 1
 30 |     setItemQuantity(item)
 31 |   }
 32 | 
 33 |   if (!renderClientSideComponent) return null
 34 | 
 35 |   return (
 36 |     <>
 37 |       <CartLink />
 38 |       <div className="flex flex-col items-center pb-10">
 39 |         <Head>
 40 |           <title>Jamstack ECommerce - Cart</title>
 41 |           <meta name="description" content={`Jamstack ECommerce - Shopping cart`} />
 42 |           <meta property="og:title" content="Jamstack ECommerce - Cart" key="title" />
 43 |         </Head>
 44 |         <div className="
 45 |           flex flex-col w-full
 46 |           c_large:w-c_large
 47 |         ">
 48 |           <div className="pt-10 pb-8">
 49 |             <h1 className="text-5xl font-light">Your Cart</h1>
 50 |           </div>
 51 | 
 52 |           {
 53 |             cartEmpty ? (
 54 |               <h3>No items in cart.</h3>
 55 |             ) : (
 56 |               <div className="flex flex-col">
 57 |                 <div>
 58 |                   {
 59 |                     cart.map((item) => {
 60 |                       return (
 61 |                         <div className="border-b py-10" key={item.id}>
 62 |                           <div className="flex items-center hidden md:flex">
 63 |                             <Link href={`/product/${slugify(item.name)}`}>
 64 |                               <a aria-label={item.name}>
 65 |                                 <Image className="w-32 m-0" src={item.image} alt={item.name} />
 66 |                               </a>
 67 |                             </Link>
 68 |                             <Link href={`/product/${slugify(item.name)}`}>
 69 |                               <a aria-label={item.name}>
 70 |                                 <p className="
 71 |                                 m-0 pl-10 text-gray-600 w-60
 72 |                                 ">
 73 |                                   {item.name}
 74 |                                 </p>
 75 |                               </a>
 76 |                             </Link>
 77 |                             <div className="ml-4">
 78 |                               <QuantityPicker
 79 |                                 numberOfitems={item.quantity}
 80 |                                 increment={() => increment(item)}
 81 |                                 decrement={() => decrement(item)}
 82 |                               />
 83 |                             </div>
 84 |                             <div className="flex flex-1 justify-end">
 85 |                               <p className="m-0 pl-10 text-gray-900 tracking-wider">
 86 |                                 {DENOMINATION + item.price}
 87 |                               </p>
 88 |                             </div>
 89 |                             <div role="button" onClick={() => removeFromCart(item)} className="
 90 |                             m-0 ml-10 text-gray-900 text-s cursor-pointer
 91 |                             ">
 92 |                               <FaTimes />
 93 |                             </div>
 94 |                           </div>
 95 | 
 96 |                           <div className="flex items-center flex md:hidden">
 97 |                             <Link href={`/product/${slugify(item.name)}`}>
 98 |                               <a>
 99 |                                 <Image className="w-32 m-0" src={item.image} alt={item.name} />
100 |                               </a>
101 |                             </Link>
102 |                             <div>
103 |                               <Link href={`/product/${slugify(item.name)}`}>
104 |                                 <a aria-label={item.name}>
105 |                                   <p className="
106 |                                   m-0 pl-6 text-gray-600 text-base
107 |                                   ">
108 |                                     {item.name}
109 |                                   </p>
110 |                                 </a>
111 |                               </Link>
112 |                               <div className="ml-6 mt-4 mb-2">
113 |                                 <QuantityPicker
114 |                                   hideQuantityLabel
115 |                                   numberOfitems={item.quantity}
116 |                                   increment={() => increment(item)}
117 |                                   decrement={() => decrement(item)}
118 |                                 />
119 |                               </div>
120 |                               <div className="flex flex-1">
121 |                                 <p className="text-lg m-0 pl-6 pt-4 text-gray-900 tracking-wider">
122 |                                   {DENOMINATION + item.price}
123 |                                 </p>
124 |                               </div>
125 |                             </div>
126 |                             <div role="button" onClick={() => removeFromCart(item)} className="
127 |                             m-0 ml-10 text-gray-900 text-s cursor-pointer mr-2
128 |                             ">
129 |                               <FaTimes />
130 |                             </div>
131 |                           </div>
132 |                         </div>
133 |                       )
134 |                     })
135 |                   }
136 |                 </div>  
137 |             </div>
138 |             )
139 |           }
140 |           <div className="flex flex-1 justify-end py-8">
141 |             <p className="text-sm pr-10">Total</p>
142 |             <p className="font-semibold tracking-wide">{DENOMINATION + total}</p>
143 |           </div>
144 |           {!cartEmpty && (
145 |             <Link href="/checkout" className="flex flex-1 justify-end">
146 |               <a aria-label="Check out">
147 |                 <div className="cursor-pointer flex items-center">
148 |                   <p className="text-gray-600 text-sm mr-2">Proceed to check out</p>
149 |                   <FaLongArrowAltRight className="text-gray-600" />
150 |                 </div>
151 |               </a>
152 |             </Link>
153 |           )}
154 |         </div>
155 |       </div>
156 |     </>
157 |   )
158 | }
159 | 
160 | function CartWithContext(props) {
161 |   return (
162 |     <ContextProviderComponent>
163 |       <SiteContext.Consumer>
164 |         {
165 |           context => <Cart {...props} context={context} />
166 |         }
167 |       </SiteContext.Consumer>
168 |     </ContextProviderComponent>
169 |   )
170 | }
171 | 
172 | 
173 | export default CartWithContext


--------------------------------------------------------------------------------
/pages/categories.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import { titleIfy , slugify } from '../utils/helpers'
 3 | import { DisplayMedium } from '../components'
 4 | import CartLink from '../components/CartLink'
 5 | import { fetchInventory } from '../utils/inventoryProvider'
 6 | 
 7 | function Categories ({ categories = [] }) {
 8 |   return (
 9 |     <>
10 |       <div className="w-full">
11 |         <CartLink />
12 |         <Head>
13 |           <title>Jamstack ECommerce - All Categories</title>
14 |           <meta name="description" content={`Jamstack ECommerce - All categories`} />
15 |           <meta property="og:title" content="Jamstack ECommerce - All Categories" key="title" />
16 |         </Head>
17 |         <div className="
18 |           pt-4 sm:pt-10 pb-8
19 |         ">
20 |           <h1 className="text-5xl font-light">All categories</h1>
21 |         </div>
22 |         <div className="flex flex-col items-center">
23 |           
24 |           {/* <div className="my-4 lg:my-8 flex flex-col lg:flex-row justify-between"> */}
25 |           <div className="grid gap-4
26 |           lg:grid-cols-3 md:grid-cols-2 grid-cols-1">
27 |           {
28 |             categories.map((category, index) => (
29 |               <DisplayMedium
30 |                 key={index}
31 |                 imageSrc={category.image}
32 |                 subtitle={`${category.itemCount} items`}
33 |                 title={titleIfy(category.name)}
34 |                 link={`/category/${slugify(category.name)}`}
35 |               />
36 |             ))
37 |           }
38 |           </div>
39 |         </div>
40 |       </div>
41 |     </>
42 |   )
43 | }
44 | 
45 | export async function getStaticProps() {
46 |   const inventory = await fetchInventory()
47 |   const inventoryCategories = inventory.reduce((acc, next) => {
48 |     const categories = next.categories
49 |     categories.forEach(c => {
50 |       const index = acc.findIndex(item => item.name === c)
51 |       if (index !== -1) {
52 |         const item = acc[index]
53 |         item.itemCount = item.itemCount + 1
54 |         acc[index] = item
55 |       } else {
56 |         const item = {
57 |           name: c,
58 |           image: next.image,
59 |           itemCount: 1
60 |         }
61 |         acc.push(item)
62 |       }
63 |     })
64 |     return acc
65 |   }, [])
66 | 
67 |   return {
68 |     props: {
69 |       categories: inventoryCategories
70 |     }
71 |   }
72 | }
73 | 
74 | export default Categories


--------------------------------------------------------------------------------
/pages/category/[name].js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import ListItem from '../../components/ListItem'
 3 | import { titleIfy, slugify } from '../../utils/helpers'
 4 | import fetchCategories from '../../utils/categoryProvider'
 5 | import inventoryForCategory from '../../utils/inventoryForCategory'
 6 | import CartLink from '../../components/CartLink'
 7 | 
 8 | const Category = (props) => {
 9 |   const { inventory, title } = props
10 |   return (
11 |     <>
12 |       <CartLink />
13 |       <Head>
14 |         <title>Jamstack ECommerce - {title}</title>
15 |         <meta name="description" content={`Jamstack ECommerce - ${title}`} />
16 |         <meta property="og:title" content={`Jamstack ECommerce - ${title}`} key="title" />
17 |       </Head>
18 |       <div className="flex flex-col items-center">
19 |         <div className="max-w-fw flex flex-col w-full">
20 |           <div className="pt-4 sm:pt-10 pb-8">
21 |             <h1 className="text-5xl font-light">{titleIfy(title)}</h1>
22 |           </div>
23 | 
24 |           <div>
25 |             <div className="flex flex-1 flex-wrap flex-row">
26 |               {
27 |                 inventory.map((item, index) => {
28 |                   return (
29 |                     <ListItem
30 |                       key={index}
31 |                       link={`/product/${slugify(item.name)}`}
32 |                       title={item.name}
33 |                       price={item.price}
34 |                       imageSrc={item.image}
35 |                     />
36 |                   )
37 |                 })
38 |               }
39 |             </div>
40 |           </div>
41 |           </div>
42 |       </div>
43 |     </>
44 |   )
45 | }
46 | 
47 | export async function getStaticPaths () {
48 |   const categories = await fetchCategories()
49 |   const paths = categories.map(category => {
50 |     return { params: { name: slugify(category) }}
51 |   })
52 |   return {
53 |     paths,
54 |     fallback: false
55 |   }
56 | }
57 | 
58 | export async function getStaticProps ({ params }) {
59 |   const category = params.name.replace(/-/g," ")
60 |   const inventory = await inventoryForCategory(category)
61 |   return {
62 |     props: {
63 |       inventory,
64 |       title: category
65 |     }
66 |   }
67 | }
68 | 
69 | export default Category


--------------------------------------------------------------------------------
/pages/checkout.js:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | import Head from 'next/head'
  3 | import { SiteContext, ContextProviderComponent } from "../context/mainContext"
  4 | import DENOMINATION from "../utils/currencyProvider"
  5 | import { FaLongArrowAltLeft } from "react-icons/fa"
  6 | import Link from "next/link"
  7 | import Image from "../components/Image"
  8 | import { v4 as uuid } from "uuid"
  9 | 
 10 | import {
 11 |   CardElement,
 12 |   Elements,
 13 |   useStripe,
 14 |   useElements,
 15 | } from "@stripe/react-stripe-js"
 16 | import { loadStripe } from "@stripe/stripe-js"
 17 | 
 18 | // Make sure to call `loadStripe` outside of a component’s render to avoid
 19 | // recreating the `Stripe` object on every render.
 20 | const stripePromise = loadStripe("xxx-xxx-xxx")
 21 | 
 22 | function CheckoutWithContext(props) {
 23 |   return (
 24 |     <ContextProviderComponent>
 25 |       <SiteContext.Consumer>
 26 |         {context => (
 27 |           <Elements stripe={stripePromise}>
 28 |             <Checkout {...props} context={context} />
 29 |           </Elements>
 30 |         )}
 31 |       </SiteContext.Consumer>
 32 |     </ContextProviderComponent>
 33 |   )
 34 | }
 35 | 
 36 | const calculateShipping = () => {
 37 |   return 0
 38 | }
 39 | 
 40 | const Input = ({ onChange, value, name, placeholder }) => (
 41 |   <input
 42 |     onChange={onChange}
 43 |     value={value}
 44 |     className="mt-2 text-sm shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
 45 |     type="text"
 46 |     placeholder={placeholder}
 47 |     name={name}
 48 |   />
 49 | )
 50 | 
 51 | const Checkout = ({ context }) => {
 52 |   const [errorMessage, setErrorMessage] = useState(null)
 53 |   const [orderCompleted, setOrderCompleted] = useState(false)
 54 |   const [input, setInput] = useState({
 55 |     name: "",
 56 |     email: "",
 57 |     street: "",
 58 |     city: "",
 59 |     postal_code: "",
 60 |     state: "",
 61 |   })
 62 | 
 63 |   const stripe = useStripe()
 64 |   const elements = useElements()
 65 | 
 66 |   const onChange = e => {
 67 |     setErrorMessage(null)
 68 |     setInput({ ...input, [e.target.name]: e.target.value })
 69 |   }
 70 | 
 71 |   const handleSubmit = async event => {
 72 |     event.preventDefault()
 73 |     const { name, email, street, city, postal_code, state } = input
 74 |     const { total, clearCart } = context
 75 | 
 76 |     if (!stripe || !elements) {
 77 |       // Stripe.js has not loaded yet. Make sure to disable
 78 |       // form submission until Stripe.js has loaded.
 79 |       return
 80 |     }
 81 | 
 82 |     // Validate input
 83 |     if (!street || !city || !postal_code || !state) {
 84 |       setErrorMessage("Please fill in the form!")
 85 |       return
 86 |     }
 87 | 
 88 |     // Get a reference to a mounted CardElement. Elements knows how
 89 |     // to find your CardElement because there can only ever be one of
 90 |     // each type of element.
 91 |     const cardElement = elements.getElement(CardElement)
 92 | 
 93 |     // Use your card Element with other Stripe.js APIs
 94 |     const { error, paymentMethod } = await stripe.createPaymentMethod({
 95 |       type: "card",
 96 |       card: cardElement,
 97 |       billing_details: { name: name },
 98 |     })
 99 | 
100 |     if (error) {
101 |       setErrorMessage(error.message)
102 |       return
103 |     }
104 | 
105 |     const order = {
106 |       email,
107 |       amount: total,
108 |       address: state, // should this be {street, city, postal_code, state} ?
109 |       payment_method_id: paymentMethod.id,
110 |       receipt_email: "customer@example.com",
111 |       id: uuid(),
112 |     }
113 |     // TODO call API
114 |     setOrderCompleted(true)
115 |     clearCart()
116 |   }
117 | 
118 |   const { numberOfItemsInCart, cart, total } = context
119 |   const cartEmpty = numberOfItemsInCart === Number(0)
120 | 
121 |   if (orderCompleted) {
122 |     return (
123 |       <div>
124 |         <h3>Thanks! Your order has been successfully processed.</h3>
125 |       </div>
126 |     )
127 |   }
128 | 
129 |   return (
130 |     <div className="flex flex-col items-center pb-10">
131 |       <Head>
132 |         <title>Jamstack ECommerce - Checkout</title>
133 |         <meta name="description" content={`Check out`} />
134 |         <meta property="og:title" content="Jamstack ECommerce - Checkpit" key="title" />
135 |       </Head>
136 |       <div
137 |         className="
138 |             flex flex-col w-full
139 |             c_large:w-c_large
140 |           "
141 |       >
142 |         <div className="pt-10 pb-8">
143 |           <h1 className="text-5xl font-light mb-6">Checkout</h1>
144 |           <Link href="/cart">
145 |             <a aria-label="Cart">
146 |               <div className="cursor-pointer flex  items-center">
147 |                 <FaLongArrowAltLeft className="mr-2 text-gray-600" />
148 |                 <p className="text-gray-600 text-sm">Edit Cart</p>
149 |               </div>
150 |             </a>
151 |           </Link>
152 |         </div>
153 | 
154 |         {cartEmpty ? (
155 |           <h3>No items in cart.</h3>
156 |         ) : (
157 |           <div className="flex flex-col">
158 |             <div className="">
159 |               {cart.map((item, index) => {
160 |                 return (
161 |                   <div className="border-b py-10" key={index}>
162 |                     <div className="flex items-center">
163 |                       <Image
164 |                         className="w-32 m-0"
165 |                         src={item.image}
166 |                         alt={item.name}
167 |                       />
168 |                       <p className="m-0 pl-10 text-gray-600">
169 |                         {item.name}
170 |                       </p>
171 |                       <div className="flex flex-1 justify-end">
172 |                         <p className="m-0 pl-10 text-gray-900 font-semibold">
173 |                           {DENOMINATION + item.price}
174 |                         </p>
175 |                       </div>
176 |                     </div>
177 |                   </div>
178 |                 )
179 |               })}
180 |             </div>
181 |             <div className="flex flex-1 flex-col md:flex-row">
182 |               <div className="flex flex-1 pt-8 flex-col">
183 |                 <div className="mt-4 border-t pt-10">
184 |                   <form onSubmit={handleSubmit}>
185 |                     {errorMessage ? <span>{errorMessage}</span> : ""}
186 |                     <Input
187 |                       onChange={onChange}
188 |                       value={input.name}
189 |                       name="name"
190 |                       placeholder="Cardholder name"
191 |                     />
192 |                     <CardElement className="mt-2 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
193 |                     <Input
194 |                       onChange={onChange}
195 |                       value={input.email}
196 |                       name="email"
197 |                       placeholder="Email"
198 |                     />
199 |                     <Input
200 |                       onChange={onChange}
201 |                       value={input.street}
202 |                       name="street"
203 |                       placeholder="Street"
204 |                     />
205 |                     <Input
206 |                       onChange={onChange}
207 |                       value={input.city}
208 |                       name="city"
209 |                       placeholder="City"
210 |                     />
211 |                     <Input
212 |                       onChange={onChange}
213 |                       value={input.state}
214 |                       name="state"
215 |                       placeholder="State"
216 |                     />
217 |                     <Input
218 |                       onChange={onChange}
219 |                       value={input.postal_code}
220 |                       name="postal_code"
221 |                       placeholder="Postal Code"
222 |                     />
223 |                     <button
224 |                       type="submit"
225 |                       disabled={!stripe}
226 |                       onClick={handleSubmit}
227 |                       className="hidden md:block bg-primary hover:bg-black text-white font-bold py-2 px-4 mt-4 rounded focus:outline-none focus:shadow-outline"
228 |                       type="button"
229 |                     >
230 |                       Confirm order
231 |                     </button>
232 |                   </form>
233 |                 </div>
234 |               </div>
235 |               <div className="md:pt-20">
236 |                 <div className="pl-4 flex flex-1 pt-2 md:pt-8 mt-2 sm:mt-0">
237 |                   <p className="text-sm pr-10 text-left">Subtotal</p>
238 |                   <p className="w-38 flex text-right justify-end">
239 |                     {DENOMINATION + total}
240 |                   </p>
241 |                 </div>
242 |                 <div className="pl-4 flex flex-1 my-2">
243 |                   <p className="text-sm pr-10">Shipping</p>
244 |                   <p className="w-38 flex justify-end">
245 |                     FREE SHIPPING
246 |                   </p>
247 |                 </div>
248 |                 <div className="md:ml-4 pl-2 flex flex-1 bg-gray-200 pr-4 pb-1 pt-2 mt-2">
249 |                   <p className="text-sm pr-10">Total</p>
250 |                   <p className="font-semibold w-38 flex justify-end">
251 |                     {DENOMINATION + (total + calculateShipping())}
252 |                   </p>
253 |                 </div>
254 |                 <button
255 |                   type="submit"
256 |                   disabled={!stripe}
257 |                   onClick={handleSubmit}
258 |                   className="md:hidden bg-primary hover:bg-black text-white font-bold py-2 px-4 mt-4 rounded focus:outline-none focus:shadow-outline"
259 |                   type="button"
260 |                 >
261 |                   Confirm order
262 |                 </button>
263 |               </div>
264 |             </div>
265 |           </div>
266 |         )}
267 |       </div>
268 |     </div>
269 |   )
270 | }
271 | 
272 | export default CheckoutWithContext


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import Head from 'next/head'
  2 | import { Center, Footer, Tag, Showcase, DisplaySmall, DisplayMedium } from '../components'
  3 | import { titleIfy, slugify } from '../utils/helpers'
  4 | import { fetchInventory } from '../utils/inventoryProvider'
  5 | import CartLink from '../components/CartLink'
  6 | 
  7 | const Home = ({ inventoryData = [], categories: categoryData = [] }) => {
  8 |   const inventory = inventoryData.slice(0, 4)
  9 |   const categories = categoryData.slice(0, 2)
 10 | 
 11 |   return (
 12 |     <>
 13 |       <CartLink />
 14 |       <div className="w-full">
 15 |         <Head>
 16 |           <title>Jamstack ECommerce</title>
 17 |           <meta name="description" content="Jamstack ECommerce Next provides a way to quickly get up and running with a fully configurable ECommerce site using Next.js." />
 18 |           <meta property="og:title" content="Jamstack ECommerce" key="title" />
 19 |         </Head>
 20 |         <div className="bg-blue-300
 21 |         p-6 pb-10 smpb-6
 22 |         flex lg:flex-row flex-col">
 23 |           <div className="pt-4 pl-2 sm:pt-12 sm:pl-12 flex flex-col">
 24 |             <Tag
 25 |               year="2021"
 26 |               category="SOFAS"
 27 |             />
 28 |             <Center
 29 |               price="200"
 30 |               title={inventory[2].name}
 31 |               link={`/product/${slugify(inventory[2].name)}`}
 32 |             />
 33 |             <Footer
 34 |               designer="Jason Bourne"
 35 |             />
 36 |           </div>
 37 |           <div className="flex flex-1 justify-center items-center relative">
 38 |               <Showcase
 39 |                 imageSrc={inventory[2].image}
 40 |               />
 41 |               <div className="absolute
 42 |               w-48 h-48 sm:w-72 sm:h-72 xl:w-88 xl:h-88
 43 |               bg-white z-0 rounded-full" />
 44 |           </div>
 45 |         </div>
 46 |       </div>
 47 |       <div className="
 48 |         lg:my-8 lg:grid-cols-2
 49 |         grid-cols-1
 50 |         grid gap-4 my-4 
 51 |       ">
 52 |         <DisplayMedium
 53 |           imageSrc={categories[0].image}
 54 |           subtitle={`${categories[0].itemCount} items`}
 55 |           title={titleIfy(categories[0].name)}
 56 |           link={`/category/${slugify(categories[0].name)}`}
 57 |         />
 58 |         <DisplayMedium
 59 |           imageSrc={categories[1].image}
 60 |           subtitle={`${categories[1].itemCount} items`}
 61 |           title={titleIfy(categories[1].name)}
 62 |           link={`/category/${slugify(categories[1].name)}`}
 63 |         />
 64 |       </div>
 65 |       <div className="pt-10 pb-6 flex flex-col items-center">
 66 |         <h2 className="text-4xl mb-3">Trending Now</h2>
 67 |         <p className="text-gray-600 text-sm">Find the perfect piece or accessory to finish off your favorite room in the house.</p>
 68 |       </div>
 69 |       <div className="my-8 flex flex-col lg:flex-row justify-between">
 70 |         <DisplaySmall
 71 |           imageSrc={inventory[0].image}
 72 |           title={inventory[0].name}
 73 |           subtitle={inventory[0].categories[0]}
 74 |           link={`/product/${slugify(inventory[0].name)}`}
 75 |         />
 76 | 
 77 |         <DisplaySmall
 78 |           imageSrc={inventory[1].image}
 79 |           title={inventory[1].name}
 80 |           subtitle={inventory[1].categories[0]}
 81 |           link={`/product/${slugify(inventory[1].name)}`}
 82 |         />
 83 | 
 84 |         <DisplaySmall
 85 |           imageSrc={inventory[2].image}
 86 |           title={inventory[2].name}
 87 |           subtitle={inventory[2].categories[0]}
 88 |           link={`/product/${slugify(inventory[2].name)}`}
 89 |         />
 90 | 
 91 |         <DisplaySmall
 92 |           imageSrc={inventory[3].image}
 93 |           title={inventory[3].name}
 94 |           subtitle={inventory[3].categories[0]}
 95 |           link={`/product/${slugify(inventory[3].name)}`}
 96 |         />
 97 |       </div>
 98 |     </>
 99 |   )
100 | }
101 | 
102 | export async function getStaticProps() {
103 |   const inventory = await fetchInventory()
104 |   
105 |   const inventoryCategorized = inventory.reduce((acc, next) => {
106 |     const categories = next.categories
107 |     categories.forEach(c => {
108 |       const index = acc.findIndex(item => item.name === c)
109 |       if (index !== -1) {
110 |         const item = acc[index]
111 |         item.itemCount = item.itemCount + 1
112 |         acc[index] = item
113 |       } else {
114 |         const item = {
115 |           name: c,
116 |           image: next.image,
117 |           itemCount: 1
118 |         }
119 |         acc.push(item)
120 |       }
121 |     })
122 |     return acc
123 |   }, [])
124 |   
125 |   return {
126 |     props: {
127 |       inventoryData: inventory,
128 |       categories: inventoryCategorized
129 |     }
130 |   }
131 | }
132 | 
133 | export default Home


--------------------------------------------------------------------------------
/pages/product/[name].js:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | import Head from 'next/head'
  3 | import Button from '../../components/Button'
  4 | import Image from '../../components/Image'
  5 | import QuantityPicker from '../../components/QuantityPicker'
  6 | import { fetchInventory } from '../../utils/inventoryProvider'
  7 | import { slugify } from '../../utils/helpers'
  8 | import CartLink from '../../components/CartLink'
  9 | import { SiteContext, ContextProviderComponent } from '../../context/mainContext'
 10 | 
 11 | const ItemView = (props) => {
 12 |   const [numberOfitems, updateNumberOfItems] = useState(1)
 13 |   const { product } = props
 14 |   const { price, image, name, description } = product
 15 |   const { context: { addToCart }} = props
 16 | 
 17 |   function addItemToCart (product) {
 18 |     product["quantity"] = numberOfitems
 19 |     addToCart(product)
 20 |   }
 21 | 
 22 |   function increment() {
 23 |     updateNumberOfItems(numberOfitems + 1)
 24 |   }
 25 | 
 26 |   function decrement() {
 27 |     if (numberOfitems === 1) return
 28 |     updateNumberOfItems(numberOfitems - 1)
 29 |   }
 30 | 
 31 |   return (
 32 |     <>
 33 |       <CartLink />
 34 |       <Head>
 35 |         <title>Jamstack ECommerce - {name}</title>
 36 |         <meta name="description" content={description} />
 37 |         <meta property="og:title" content={`Jamstack ECommerce - ${name}`} key="title" />
 38 |       </Head>
 39 |       <div className="
 40 |         sm:py-12
 41 |         md:flex-row
 42 |         py-4 w-full flex flex-1 flex-col my-0 mx-auto
 43 |       ">
 44 |         <div className="w-full md:w-1/2 h-120 flex flex-1 bg-light hover:bg-light-200">
 45 |           <div className="py-16 p10 flex flex-1 justify-center items-center">
 46 |             <Image src={image} alt="Inventory item" className="max-h-full" />
 47 |           </div>
 48 |         </div>
 49 |         <div className="pt-2 px-0 md:px-10 pb-8 w-full md:w-1/2">
 50 |           <h1 className="
 51 |            sm:mt-0 mt-2 text-5xl font-light leading-large
 52 |           ">{name}</h1>
 53 |           <h2 className="text-2xl tracking-wide sm:py-8 py-6">${price}</h2>
 54 |           <p className="text-gray-600 leading-7">{description}</p>
 55 |           <div className="my-6">
 56 |             <QuantityPicker
 57 |               increment={increment}
 58 |               decrement={decrement}
 59 |               numberOfitems={numberOfitems}
 60 |             />
 61 |           </div>
 62 |           <Button
 63 |             full
 64 |             title="Add to Cart"
 65 |             onClick={() => addItemToCart(product)}
 66 |           />
 67 |         </div>
 68 |       </div>
 69 |     </>
 70 |   )
 71 | }
 72 | 
 73 | export async function getStaticPaths () {
 74 |   const inventory = await fetchInventory()
 75 |   const paths = inventory.map(item => {
 76 |     return { params: { name: slugify(item.name) }}
 77 |   })
 78 |   return {
 79 |     paths,
 80 |     fallback: false
 81 |   }
 82 | }
 83 | 
 84 | export async function getStaticProps ({ params }) {
 85 |   const name = params.name.replace(/-/g," ")
 86 |   const inventory = await fetchInventory()
 87 |   const product = inventory.find(item => slugify(item.name) === slugify(name))
 88 | 
 89 |   return {
 90 |     props: {
 91 |       product,
 92 |     }
 93 |   }
 94 | }
 95 | 
 96 | function ItemViewWithContext(props) {
 97 |   return (
 98 |     <ContextProviderComponent>
 99 |       <SiteContext.Consumer>
100 |         {
101 |           context => <ItemView {...props} context={context} />
102 |         }
103 |       </SiteContext.Consumer>
104 |     </ContextProviderComponent>
105 |   )
106 | }
107 | 
108 | export default ItemViewWithContext


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/favicon.ico


--------------------------------------------------------------------------------
/public/fonts/Eina-Light.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/fonts/Eina-Light.otf


--------------------------------------------------------------------------------
/public/fonts/Eina-SemiBold.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/fonts/Eina-SemiBold.otf


--------------------------------------------------------------------------------
/public/fonts/Eina-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/fonts/Eina-SemiBold.ttf


--------------------------------------------------------------------------------
/public/fonts/Eina.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/fonts/Eina.otf


--------------------------------------------------------------------------------
/public/fonts/Eina.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/fonts/Eina.ttf


--------------------------------------------------------------------------------
/public/fonts/fonts.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: "Eina";
 3 |   src: url("Eina.otf");
 4 | }
 5 | 
 6 | @font-face {
 7 |   font-family: "Eina Bold";
 8 |   src: url("Eina-SemiBold.otf");
 9 | }
10 | 
11 | @font-face {
12 |   font-family: "Eina Light";
13 |   src: url("Eina-Light.otf");
14 | }


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/logo.png


--------------------------------------------------------------------------------
/public/products/chair1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair1.png


--------------------------------------------------------------------------------
/public/products/chair10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair10.png


--------------------------------------------------------------------------------
/public/products/chair2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair2.png


--------------------------------------------------------------------------------
/public/products/chair3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair3.png


--------------------------------------------------------------------------------
/public/products/chair4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair4.png


--------------------------------------------------------------------------------
/public/products/chair5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair5.png


--------------------------------------------------------------------------------
/public/products/chair6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair6.png


--------------------------------------------------------------------------------
/public/products/chair7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair7.png


--------------------------------------------------------------------------------
/public/products/chair8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair8.png


--------------------------------------------------------------------------------
/public/products/chair9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/chair9.png


--------------------------------------------------------------------------------
/public/products/couch1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch1.png


--------------------------------------------------------------------------------
/public/products/couch10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch10.png


--------------------------------------------------------------------------------
/public/products/couch11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch11.png


--------------------------------------------------------------------------------
/public/products/couch12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch12.png


--------------------------------------------------------------------------------
/public/products/couch13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch13.png


--------------------------------------------------------------------------------
/public/products/couch14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch14.png


--------------------------------------------------------------------------------
/public/products/couch15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch15.png


--------------------------------------------------------------------------------
/public/products/couch2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch2.png


--------------------------------------------------------------------------------
/public/products/couch3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch3.png


--------------------------------------------------------------------------------
/public/products/couch4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch4.png


--------------------------------------------------------------------------------
/public/products/couch5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch5.png


--------------------------------------------------------------------------------
/public/products/couch6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch6.png


--------------------------------------------------------------------------------
/public/products/couch7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch7.png


--------------------------------------------------------------------------------
/public/products/couch8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch8.png


--------------------------------------------------------------------------------
/public/products/couch9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamstack-cms/jamstack-ecommerce/64e01be0aea19f09973e8c0ad60129f88278830d/public/products/couch9.png


--------------------------------------------------------------------------------
/serverless.yml:
--------------------------------------------------------------------------------
1 | nextEcommerce:
2 |   component: "@sls-next/serverless-component@1.18.0"
3 |   # inputs:
4 |   #   domain: "yourdomain.com"


--------------------------------------------------------------------------------
/snippets/lambda.js:
--------------------------------------------------------------------------------
 1 | // https://stripe.com/docs/payments/without-card-authentication
 2 | const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY) //"API_KEY"
 3 | 
 4 | exports.handler = async event => {
 5 |   if (!event.body || event.httpMethod !== "POST") {
 6 |     return {
 7 |       statusCode: 400,
 8 |       headers,
 9 |       body: JSON.stringify({
10 |         status: "invalid http method",
11 |       }),
12 |     }
13 |   }
14 | 
15 |   const order = JSON.parse(event.body)
16 | 
17 |   const calculateOrderAmount = items => {
18 |     // Replace this constant with a calculation of the order's amount
19 |     // You should always calculate the order total on the server to prevent
20 |     // people from directly manipulating the amount on the client
21 |     return 1400
22 |   }
23 | 
24 |   try {
25 |     const intent = await stripe.paymentIntents.create({
26 |       amount: calculateOrderAmount(order.items),
27 |       currency: "usd",
28 |       payment_method: order.payment_method_id,
29 | 
30 |       // A PaymentIntent can be confirmed some time after creation,
31 |       // but here we want to confirm (collect payment) immediately.
32 |       confirm: true,
33 | 
34 |       // If the payment requires any follow-up actions from the
35 |       // customer, like two-factor authentication, Stripe will error
36 |       // and you will need to prompt them for a new payment method.
37 |       error_on_requires_action: true,
38 |     })
39 | 
40 |     if (intent.status === "succeeded") {
41 |       // This creates a new Customer and attaches the PaymentMethod in one API call.
42 |       const customer = await stripe.customers.create({
43 |         payment_method: intent.payment_method,
44 |         email: order.email,
45 |         address: order.address,
46 |       })
47 |       // Handle post-payment fulfillment
48 |       console.log(`Created Payment: ${intent.id} for Customer: ${customer.id}`)
49 |       // Now ship those goodies
50 |       await inventoryAPI.ship(order)
51 |     } else {
52 |       // Any other status would be unexpected, so error
53 |       console.log({ error: "Unexpected status " + intent.status })
54 |     }
55 |   } catch (e) {
56 |     if (e.type === "StripeCardError") {
57 |       // Display error to customer
58 |       console.log({ error: e.message })
59 |     } else {
60 |       // Something else happened
61 |       console.log({ error: e.type })
62 |     }
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | /* ./styles/globals.css */
 2 | @tailwind base;
 3 | @tailwind components;
 4 | @tailwind utilities;
 5 | 
 6 | @font-face {
 7 |   font-family: "Eina";
 8 |   src: url("/fonts/Eina.otf");
 9 | }
10 | 
11 | 
12 | @font-face {
13 |   font-family: "Eina Light";
14 |   src: url("/fonts/Eina-Light.otf");
15 | }
16 | 
17 | @font-face {
18 |   font-family: "Eina SemiBold";
19 |   src: url("/fonts/Eina-SemiBold.otf");
20 | }
21 | 
22 | @layer base {
23 |   p, h1, h2, h3, h4, h5 {
24 |     color: rgba(0, 0, 0, .8);
25 |     font-family: Eina;
26 |   }
27 | }
28 | 
29 | .Toastify__progress-bar--default {
30 |   background: #89bdf9 !important;
31 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   // purge: ['./pages/**/*.js', './components/**/*.js'],
  3 |   darkMode: false, // or 'media' or 'class'
  4 |   theme: {
  5 |     extend: {
  6 |       spacing: {
  7 |         "72": "18rem",
  8 |         "80": "20rem",
  9 |         "88": "22rem",
 10 |         "96": "24rem",
 11 |         "104": "26rem",
 12 |         "112": "28rem",
 13 |         "120": "30rem",
 14 |         "124": "31rem",
 15 |         "128": "32rem",
 16 |         "132": "33rem",
 17 |         "136": "34rem",
 18 |         "140": "35rem",
 19 |         "144": "36rem",
 20 |         "fw": "1440px",
 21 |       },
 22 |       fontSize: {
 23 |         'xxs': '.6rem',
 24 |         'smaller': '.95rem'
 25 |       },
 26 |       fontFamily: {
 27 |         'light': ['Eina Light'],
 28 |         'semibold': ['Eina SemiBold'],
 29 |       },
 30 |       screens: {
 31 |         'mobile': '600px',
 32 |         'c_large': '1200px',
 33 |         'desktop': '1440px'
 34 |       },
 35 |       width: {
 36 |         '28': '7rem',
 37 |         'c_large': '1200px',
 38 |         "38":"10rem",
 39 |         "48":"12rem",
 40 |         "52":"13rem",
 41 |         "56":"14rem",
 42 |         "60":"15rem",
 43 |         "64": "16rem",
 44 |         "68": "17rem",
 45 |         "72": "18rem",
 46 |         "80": "20rem",
 47 |         "88": "22rem",
 48 |         "96": "24rem",
 49 |         "104": "26rem",
 50 |         "112": "28rem",
 51 |         "120": "30rem",
 52 |         "124": "31rem",
 53 |         "128": "32rem",
 54 |         "132": "33rem",
 55 |         "136": "34rem",
 56 |         "140": "35rem",
 57 |         "144": "36rem",
 58 |         'flex-half': "calc((100%/2) - 15px)",
 59 |         'flex-fourth': "calc((100% / 4) - 20px)"
 60 |       },
 61 |       inset: {
 62 |         'flexiblemargin': "calc((100vw - 1420px) / 2)",
 63 |         '100': '100px',
 64 |         '200': '200px',
 65 |         '250': '250px',
 66 |         '300': '300px',
 67 |         '400': '400px',
 68 |         '20': '20px',
 69 |         '22': '22px',
 70 |         '24': '24px',
 71 |         '26': '26px',
 72 |         '28': '28px',
 73 |         '30': '30px',
 74 |         '35': '35px',
 75 |         '40': '40px',
 76 |         '45': '45px',
 77 |         '45': '45px',
 78 |         '46': '46px',
 79 |         '47': '47px',
 80 |         '48': '48px',
 81 |         '49': '49px',
 82 |         '50': '50px',
 83 |         '51': '51px',
 84 |         '52':'52px',
 85 |         '53': '53px',
 86 |         '54':'54px',
 87 |         '55': '55px',
 88 |         '60': '60px'
 89 |        },
 90 |        height: {
 91 |          'hero': '500px',
 92 |          "48":"12rem",
 93 |          "52":"13rem",
 94 |          "56":"14rem",
 95 |          "60":"15rem",
 96 |          "64": "16rem",
 97 |          "68":"17rem",
 98 |          "72": "18rem",
 99 |          "80": "20rem",
100 |          "88": "22rem",
101 |          "96": "24rem",
102 |          "104": "26rem",
103 |          "112": "28rem",
104 |          "120": "30rem",
105 |          "124": "31rem",
106 |          "128": "32rem",
107 |          "132": "33rem",
108 |          "136": "34rem",
109 |          "140": "35rem",
110 |          "144": "36rem",
111 |        },
112 |        padding: {
113 |          ".5": ".125rem"
114 |        },
115 |        maxWidth: {
116 |          "48":"12rem",
117 |          "52":"13rem",
118 |          "56":"14rem",
119 |          "60":"15rem",
120 |          "64": "16rem",
121 |          "68":"17rem",
122 |          "72": "18rem",
123 |          "80": "20rem",
124 |          "88": "22rem",
125 |          "96": "24rem",
126 |          "104": "26rem",
127 |          "112": "28rem",
128 |          "120": "30rem",
129 |          "124": "31rem",
130 |          "128": "32rem",
131 |          "132": "33rem",
132 |          "136": "34rem",
133 |          "140": "35rem",
134 |          "144": "36rem",
135 |          "fw": "1440px",
136 |          'c_large': '1200px'
137 |        },
138 |        maxHeight: {
139 |          "36":"9rem",
140 |          "40":"10rem",
141 |          "44":"11rem",
142 |          "48":"12rem",
143 |          "52":"13rem",
144 |          "56":"14rem",
145 |          "60":"15rem",
146 |          "64": "16rem",
147 |          "68":"17rem",
148 |          "72": "18rem",
149 |          "80": "20rem",
150 |          "88": "22rem",
151 |          "96": "24rem",
152 |          "104": "26rem",
153 |          "112": "28rem",
154 |          "120": "30rem",
155 |          "124": "31rem",
156 |          "128": "32rem",
157 |          "132": "33rem",
158 |          "136": "34rem",
159 |          "140": "35rem",
160 |          "144": "36rem",
161 |          "fw": "1440px"
162 |        },
163 |        zIndex: {
164 |         '-2': '-2',
165 |         '-4': '-4',
166 |         '-6': '-6',
167 |         '-12': '-12',
168 |        },
169 |        backgroundColor: {
170 |         'primary': '#89bdf9',
171 |         'light': '#f5f5f5',
172 |         'light-200': '#f0f0f0',
173 |         'light-300': '#e8e8e8'
174 |        },
175 |        lineHeight: {
176 |         'large': '54px'
177 |        }
178 |     },
179 |   },
180 |   plugins: [],
181 | }


--------------------------------------------------------------------------------
/theme.js:
--------------------------------------------------------------------------------
1 | const colors = {
2 |   primary: '#89bdf9'
3 | }
4 | 
5 | export {
6 |   colors
7 | }


--------------------------------------------------------------------------------
/utils/categoryProvider.js:
--------------------------------------------------------------------------------
 1 | import inventory from './inventory'
 2 | 
 3 | async function fetchCategories () {
 4 |   const categories = inventory.reduce((acc, next) => {
 5 |     next.categories.map(category => {
 6 |       if (acc.includes(category)) return
 7 |       acc.push(category)
 8 |     })
 9 |     return acc
10 |   }, [])
11 |   return Promise.resolve(categories)
12 | }
13 | 
14 | export default fetchCategories


--------------------------------------------------------------------------------
/utils/currencyProvider.js:
--------------------------------------------------------------------------------
1 | const DENOMINATION = '$'
2 | 
3 | export default DENOMINATION


--------------------------------------------------------------------------------
/utils/helpers.js:
--------------------------------------------------------------------------------
 1 | function slugify(string) {
 2 |   const a = 'àáäâãåăæąçćčđďèéěėëêęğǵḧìíïîįłḿǹńňñòóöôœøṕŕřßşśšșťțùúüûǘůűūųẃẍÿýźžż·/_,:;'
 3 |   const b = 'aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz------'
 4 |   const p = new RegExp(a.split('').join('|'), 'g')
 5 | 
 6 |   return string.toString().toLowerCase()
 7 |     .replace(/\s+/g, '-') // Replace spaces with -
 8 |     .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters
 9 |     .replace(/&/g, '-and-') // Replace & with 'and'
10 |     .replace(/[^\w-]+/g, '') // Remove all non-word characters
11 |     .replace(/--+/g, '-') // Replace multiple - with single -
12 |     .replace(/^-+/, '') // Trim - from start of text
13 |     .replace(/-+$/, '') // Trim - from end of text
14 | }
15 | 
16 | function titleIfy(slug) {
17 |   var words = slug.split('-')
18 |   for (var i = 0; i < words.length; i++) {
19 |     var word = words[i]
20 |     words[i] = word.charAt(0).toUpperCase() + word.slice(1)
21 |   }
22 |   return words.join(' ')
23 | }
24 | 
25 | function getTrimmedString(string, length = 8) {
26 |   if (string.length <= length) {
27 |     return string
28 |   } else {
29 |     return string.substring(0, length) + '...'
30 |   }
31 | }
32 | 
33 | export {
34 |   slugify, titleIfy, getTrimmedString
35 | }


--------------------------------------------------------------------------------
/utils/inventory.js:
--------------------------------------------------------------------------------
 1 | import { v4 as uuid } from 'uuid'
 2 | 
 3 | let inventory = [
 4 |   {
 5 |     categories: ['new arrivals'], name: 'Timber Gray Sofa 2.0', price: '1000', image: '/products/couch1.png', description: 'Stay a while. The Timber charme chocolat sofa is set atop an oak trim and flaunts fluffy leather back and seat cushions. Over time, this brown leather sofa’s full-aniline upholstery will develop a worn-in vintage look. Snuggle up with your cutie (animal or human) and dive into a bowl of popcorn. This sofa is really hard to leave. Natural color variations, wrinkles and creases are part of the unique characteristics of this leather. It will develop a relaxed vintage look with regular use.', brand: 'Jason Bourne', currentInventory: 4 },
 6 |   {
 7 |     categories: ['sofas', 'living room'], name: 'Carmel Brown Sofa', price: '1000', image: '/products/couch5.png', description: 'Stay a while. The Timber charme chocolat sofa is set atop an oak trim and flaunts fluffy leather back and seat cushions. Over time, this brown leather sofa’s full-aniline upholstery will develop a worn-in vintage look. Snuggle up with your cutie (animal or human) and dive into a bowl of popcorn. This sofa is really hard to leave. Natural color variations, wrinkles and creases are part of the unique characteristics of this leather. It will develop a relaxed vintage look with regular use.' , brand: 'Jason Bourne' , currentInventory: 2 },
 8 |   {
 9 |     categories: ['new arrivals', 'sofas'], name: 'Mod Leather Sofa', price: '800', image: '/products/couch6.png', description: 'Easy to love. The Sven in birch ivory looks cozy and refined, like a sweater that a fancy lady wears on a coastal vacation. This ivory loveseat has a tufted bench seat, loose back pillows and bolsters, solid walnut legs, and is ready to make your apartment the adult oasis you dream of. Nestle it with plants, an ottoman, an accent chair, or 8 dogs. Your call.', brand: 'Jason Bourne', currentInventory: 8 },
10 |   {
11 |     categories: ['new arrivals', 'sofas'], name: 'Thetis Gray Love Seat', price: '900', image: '/products/couch7.png', description: 'You know your dad’s incredible vintage bomber jacket? The Nirvana dakota tan leather sofa is that jacket, but in couch form. With super-plush down-filled cushions, a corner-blocked wooden frame, and a leather patina that only gets better with age, the Nirvana will have you looking cool and feeling peaceful every time you take a seat. Looks pretty great with a sheepskin throw, if we may say so. With use, this leather will become softer and more wrinkled and the cushions will take on a lived-in look, like your favorite leather jacket.' , brand: 'Jason Bourne', currentInventory: 10},
12 |   {
13 |     categories: ['on sale', 'sofas'], name: 'Sven Tan Matte', price: '1200', image: '/products/couch8.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.', brand: 'Jason Bourne' , currentInventory: 7 },
14 |   {
15 |     categories: ['on sale', 'sofas'], name: 'Otis Malt Sofa', price: '500', image: '/products/couch9.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.' , brand: 'Jason Bourne', currentInventory: 13},
16 |   {
17 |     categories: ['on sale', 'sofas'], name: 'Ceni Brown 3 Seater', price: '650', image: '/products/couch10.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.' , brand: 'Jason Bourne', currentInventory: 9},
18 |   {
19 |     categories: ['sofas', 'living room'], name: 'Jameson Jack Lounger', price: '1230', image: '/products/couch11.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.', brand: 'Jason Bourne', currentInventory: 24 },
20 | 
21 |   {
22 |     categories: ['sofas'], name: 'Galaxy Blue Sofa', price: '800', image: '/products/couch2.png', description: 'Easy to love. The Sven in birch ivory looks cozy and refined, like a sweater that a fancy lady wears on a coastal vacation. This ivory loveseat has a tufted bench seat, loose back pillows and bolsters, solid walnut legs, and is ready to make your apartment the adult oasis you dream of. Nestle it with plants, an ottoman, an accent chair, or 8 dogs. Your call.', brand: 'Jason Bourne', currentInventory: 43 },
23 |   {
24 |     categories: ['new arrivals', 'sofas'], name: 'Markus Green Love Seat', price: '900', image: '/products/couch3.png', description: 'You know your dad’s incredible vintage bomber jacket? The Nirvana dakota tan leather sofa is that jacket, but in couch form. With super-plush down-filled cushions, a corner-blocked wooden frame, and a leather patina that only gets better with age, the Nirvana will have you looking cool and feeling peaceful every time you take a seat. Looks pretty great with a sheepskin throw, if we may say so. With use, this leather will become softer and more wrinkled and the cushions will take on a lived-in look, like your favorite leather jacket.', brand: 'Jason Bourne' , currentInventory: 2},
25 |   {
26 |     categories: ['on sale', 'sofas'], name: 'Dabit Matte Black', price: '1200', image: '/products/couch4.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.', currentInventory: 14 },
27 | 
28 |   {
29 |     categories: ['on sale', 'chairs'], name: 'Embrace Blue', price: '300', image: '/products/chair1.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.' , brand: 'Jason Bourne', currentInventory: 12 },
30 |   {
31 |     categories: ['on sale', 'chairs'], name: 'Nord Lounger', price: '825', image: '/products/chair2.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.' , brand: 'Jason Bourne', currentInventory: 13},
32 |   {
33 |     categories: ['on sale', 'chairs'], name: 'Ceni Matte Oranve', price: '720', image: '/products/chair3.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.' , brand: 'Jason Bourne', currentInventory: 33},
34 |   {
35 |     categories: ['on sale', 'chairs'], name: 'Abisko Green Recliner', price: '2000', image: '/products/chair4.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.', brand: 'Jason Bourne', currentInventory: 23 },
36 |   { categories: ['on sale', 'chairs'], name: 'Denim on Denim Single', price: '1100', image: '/products/chair5.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.' , brand: 'Jason Bourne', currentInventory: 13},
37 |   { categories: ['on sale', 'chairs'], name: 'Levo Tan Lounge Chair', price: '600', image: '/products/chair6.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.', brand: 'Jason Bourne', currentInventory: 15 },
38 | 
39 |   { categories: ['on sale', 'chairs'], name: 'Anime Tint Recliner', price: '775', image: '/products/chair7.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.', brand: 'Jason Bourne', currentInventory: 44 },
40 |   { categories: ['on sale', 'chairs'], name: 'Josh Jones Red Chair', price: '1200', image: '/products/chair8.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.', brand: 'Jason Bourne', currentInventory: 17 },
41 |   { categories: ['on sale', 'chairs'], name: 'Black Sand Lounge', price: '1600', image: '/products/chair9.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.', brand: 'Jason Bourne', currentInventory: 28 },
42 |   { categories: ['on sale', 'chairs'], name: 'Mint Beige Workchair', price: '550', image: '/products/chair10.png', description: 'You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.', brand: 'Jason Bourne', currentInventory: 31 },  // { 
43 | ]
44 | 
45 | inventory.map(i => {
46 |   i.id = uuid()
47 |   return i
48 | })
49 | 
50 | export default inventory


--------------------------------------------------------------------------------
/utils/inventoryByCategory.js:
--------------------------------------------------------------------------------
 1 | function inventoryByCategory (inventory) {
 2 |   return inventory.reduce((acc, next) => {
 3 |     const categories = next.categories
 4 |     categories.forEach(c => {
 5 |       if (acc[c]) {
 6 |         acc[c].items.push(next)
 7 |       } else {
 8 |         acc[c] = {}
 9 |         acc[c].items = []
10 |         acc[c].items.push(next)
11 |       }
12 |     })
13 |     return acc
14 |   }, {})
15 | }
16 | 
17 | export {
18 |   inventoryByCategory
19 | }


--------------------------------------------------------------------------------
/utils/inventoryForCategory.js:
--------------------------------------------------------------------------------
 1 | import { fetchInventory } from './inventoryProvider'
 2 | import { inventoryByCategory } from './inventoryByCategory'
 3 | 
 4 | async function inventoryForCategory (category) {
 5 |   const inventory = await fetchInventory()
 6 |   const byCategory = inventoryByCategory(inventory)
 7 |   return byCategory[category].items
 8 | }
 9 | 
10 | export default inventoryForCategory


--------------------------------------------------------------------------------
/utils/inventoryProvider.js:
--------------------------------------------------------------------------------
 1 | import inventory from './inventory'
 2 | 
 3 | /*
 4 | Inventory items should adhere to the following schema:
 5 | type Product {
 6 |   id: ID!
 7 |   categories: [String]!
 8 |   price: Float!
 9 |   name: String!
10 |   image: String!
11 |   description: String!
12 |   currentInventory: Int!
13 |   brand: String
14 |   sku: ID
15 | }
16 | */
17 | 
18 | async function fetchInventory() {
19 |   // const inventory = API.get(apiUrl)
20 |   return Promise.resolve(inventory)
21 | }
22 | 
23 | export {
24 |   fetchInventory, inventory as staticInventory
25 | }


--------------------------------------------------------------------------------