diff --git a/src/pages/Cart.js b/src/pages/Cart.js
new file mode 100644
index 000000000..fa5bec1fa
--- /dev/null
+++ b/src/pages/Cart.js
@@ -0,0 +1,65 @@
+import React, {useEffect, useState} from 'react';
+import Link from 'next/link';
+
+export default function Cart() {
+ const [cart, setCart] = useState([]);
+
+ useEffect(() => {
+ const stored = localStorage.getItem('cart');
+ if (stored) setCart(JSON.parse(stored));
+ }, []);
+
+ function removeFromCart(index) {
+ const newCart = cart.slice();
+ newCart.splice(index, 1);
+ setCart(newCart);
+ localStorage.setItem('cart', JSON.stringify(newCart));
+ }
+
+ return (
+
+
Your Cart
+
+ Back to Store
+
+ {cart.length === 0 ? (
+
Your cart is empty.
+ ) : (
+
+ {cart.map((item, idx) => (
+ -
+
+
+
{item.name}
+
${item.price.toFixed(2)}
+
+
+
+ ))}
+
+ )}
+
+ );
+}
diff --git a/src/pages/Store.js b/src/pages/Store.js
new file mode 100644
index 000000000..8b7abe69d
--- /dev/null
+++ b/src/pages/Store.js
@@ -0,0 +1,79 @@
+import React, {useState, useEffect} from 'react';
+import Link from 'next/link';
+
+const products = [
+ {
+ id: 1,
+ name: 'React Conf 2019 Mug',
+ description: 'A stylish mug from React Conf 2019.',
+ image: '/images/home/conf2019/nat.jpg',
+ price: 12.99,
+ },
+ {
+ id: 2,
+ name: 'React Conf 2019 T-shirt',
+ description: 'Comfy T-shirt from React Conf 2019.',
+ image: '/images/home/conf2019/sophie.jpg',
+ price: 19.99,
+ },
+ {
+ id: 3,
+ name: 'React Conf 2019 Sticker',
+ description: 'Sticker pack from React Conf 2019.',
+ image: '/images/home/conf2019/tae.jpg',
+ price: 4.99,
+ },
+];
+
+export default function Store() {
+ const [cart, setCart] = useState([]);
+
+ useEffect(() => {
+ const stored = localStorage.getItem('cart');
+ if (stored) setCart(JSON.parse(stored));
+ }, []);
+
+ function addToCart(product) {
+ const newCart = [...cart, product];
+ setCart(newCart);
+ localStorage.setItem('cart', JSON.stringify(newCart));
+ }
+
+ return (
+
+
Store
+
+ Go to Cart ({cart.length})
+
+
+ {products.map((product) => (
+
+

+
{product.name}
+
{product.description}
+
${product.price.toFixed(2)}
+
+
+ ))}
+
+
+ );
+}