Welcome to the Hog store

Author: grgur

.gitignore

@@ -1,5 +1,5 @@
 # Node modules
-node_modules
+/node_modules
 
 # .env files
 .env.*
@@ -21,7 +21,20 @@ node_modules
 
 # Use either yarn.lock or package-lock.json
 # Uncomment one of them to mainain a single lockfile
-# package-lock.json
+package-lock.json
 # yarn.lock
 
 ## Project-specific files
+# dependencies
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,63 +1,49 @@
-# Project Name
+# Hog Store
 
 [![MIT Licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](./LICENSE)
-[![Powered by Modus_Create](https://img.shields.io/badge/powered_by-Modus_Create-blue.svg?longCache=true&style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIwIDMwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOTguODI0IDE0OS40OThjMCAxMi41Ny0yLjM1NiAyNC41ODItNi42MzcgMzUuNjM3LTQ5LjEtMjQuODEtODIuNzc1LTc1LjY5Mi04Mi43NzUtMTM0LjQ2IDAtMTcuNzgyIDMuMDkxLTM0LjgzOCA4Ljc0OS01MC42NzVhMTQ5LjUzNSAxNDkuNTM1IDAgMCAxIDQxLjEyNCAxMS4wNDYgMTA3Ljg3NyAxMDcuODc3IDAgMCAwLTcuNTIgMzkuNjI4YzAgMzYuODQyIDE4LjQyMyA2OS4zNiA0Ni41NDQgODguOTAzLjMyNiAzLjI2NS41MTUgNi41Ny41MTUgOS45MjF6TTY3LjgyIDE1LjAxOGM0OS4xIDI0LjgxMSA4Mi43NjggNzUuNzExIDgyLjc2OCAxMzQuNDggMCA4My4xNjgtNjcuNDIgMTUwLjU4OC0xNTAuNTg4IDE1MC41ODh2LTQyLjM1M2M1OS43NzggMCAxMDguMjM1LTQ4LjQ1OSAxMDguMjM1LTEwOC4yMzUgMC0zNi44NS0xOC40My02OS4zOC00Ni41NjItODguOTI3YTk5Ljk0OSA5OS45NDkgMCAwIDEtLjQ5Ny05Ljg5NyA5OC41MTIgOTguNTEyIDAgMCAxIDYuNjQ0LTM1LjY1NnptMTU1LjI5MiAxODIuNzE4YzE3LjczNyAzNS41NTggNTQuNDUgNTkuOTk3IDk2Ljg4OCA1OS45OTd2NDIuMzUzYy02MS45NTUgMC0xMTUuMTYyLTM3LjQyLTEzOC4yOC05MC44ODZhMTU4LjgxMSAxNTguODExIDAgMCAwIDQxLjM5Mi0xMS40NjR6bS0xMC4yNi02My41ODlhOTguMjMyIDk4LjIzMiAwIDAgMS00My40MjggMTQuODg5QzE2OS42NTQgNzIuMjI0IDIyNy4zOSA4Ljk1IDMwMS44NDUuMDAzYzQuNzAxIDEzLjE1MiA3LjU5MyAyNy4xNiA4LjQ1IDQxLjcxNC01MC4xMzMgNC40Ni05MC40MzMgNDMuMDgtOTcuNDQzIDkyLjQzem01NC4yNzgtNjguMTA1YzEyLjc5NC04LjEyNyAyNy41NjctMTMuNDA3IDQzLjQ1Mi0xNC45MTEtLjI0NyA4Mi45NTctNjcuNTY3IDE1MC4xMzItMTUwLjU4MiAxNTAuMTMyLTIuODQ2IDAtNS42NzMtLjA4OC04LjQ4LS4yNDNhMTU5LjM3OCAxNTkuMzc4IDAgMCAwIDguMTk4LTQyLjExOGMuMDk0IDAgLjE4Ny4wMDguMjgyLjAwOCA1NC41NTcgMCA5OS42NjUtNDAuMzczIDEwNy4xMy05Mi44Njh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+)](https://moduscreate.com)
+[![Powered by Modus_Create](https://img.shields.io/badge/powered_by-Modus_Create-blue.svg?longCache=true&style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIwIDMwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOTguODI0IDE0OS40OThjMCAxMi41Ny0yLjM1NiAyNC41ODItNi42MzcgMzUuNjM3LTQ5LjEtMjQuODEtODIuNzc1LTc1LjY5Mi04Mi43NzUtMTM0LjQ2IDAtMTcuNzgyIDMuMDkxLTM0LjgzOCA4Ljc0OS01MC42NzVhMTQ5LjUzNSAxNDkuNTM1IDAgMCAxIDQxLjEyNCAxMS4wNDYgMTA3Ljg3NyAxMDcuODc3IDAgMCAwLTcuNTIgMzkuNjI4YzAgMzYuODQyIDE4LjQyMyA2OS4zNiA0Ni41NDQgODguOTAzLjMyNiAzLjI2NS41MTUgNi41Ny41MTUgOS45MjF6TTY3LjgyIDE1LjAxOGM0OS4xIDI0LjgxMSA4Mi43NjggNzUuNzExIDgyLjc2OCAxMzQuNDggMCA4My4xNjgtNjcuNDIgMTUwLjU4OC0xNTAuNTg4IDE1MC41ODh2LTQyLjM1M2M1OS43NzggMCAxMDguMjM1LTQ4LjQ1OSAxMDguMjM1LTEwOC4yMzUgMC0zNi44NS0xOC40My02OS4zOC00Ni41NjItODguOTI3YTk5Ljk0OSA5OS45NDkgMCAwIDEtLjQ5Ny05Ljg5NyA5OC41MTIgOTguNTEyIDAgMCAxIDYuNjQ0LTM1LjY1NnptMTU1LjI5MiAxODIuNzE4YzE3LjczNyAzNS41NTggNTQuNDUgNTkuOTk3IDk2Ljg4OCA1OS45OTd2NDIuMzUzYy02MS45NTUgMC0xMTUuMTYyLTM3LjQyLTEzOC4yOC05MC44ODZhMTU4LjgxMSAxNTguODExIDAgMCAwIDQxLjM5Mi0xMS40NjR6bS0xMC4yNi02My41ODlhOTguMjMyIDk4LjIzMiAwIDAgMS00My40MjggMTQuODg5QzE2OS42NTQgNzIuMjI0IDIyNy4zOSA4Ljk1IDMwMS44NDUuMDAzYzQuNzAxIDEzLjE1MiA3LjU5MyAyNy4xNiA4LjQ1IDQxLjcxNC01MC4xMzMgNC40Ni05MC40MzMgNDMuMDgtOTcuNDQzIDkyLjQzem01NC4yNzgtNjguMTA1YzEyLjc5NC04LjEyNyAyNy41NjctMTMuNDA3IDQzLjQ1Mi0xNC45MTEtLjI0NyA4Mi45NTctNjcuNTY3IDE1MC4xMzItMTUwLjU4MiAxNTAuMTMyLTIuODQ2IDAtNS42NzMtLjA4OC04LjQ4LS4yNDNhMTU5LjM3OCAxNTkuMzc4IDAgMCAwIDguMTk4LTQyLjExOGMuMDk0IDAgLjE4Ny4wMDguMjgyLjAwOCA1NC41NTcgMCA5OS42NjUtNDAuMzczIDEwNy4xMy05Mi44Njh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+)](https://moduscreate.com?utm_source=labs&utm_medium=github&utm_campaign=hog-store)
 
-Project description - one or two paragraphs. The enemy is dark and creates major problems. The solution is now available and the World can rejoice.
-
-- [Getting Started](#getting-started)
-- [How it Works](#how-it-works)
-- [Developing](#developing)
-  - [Prerequisites](#prerequisites)
-  - [Testing](#testing)
-  - [Contributing](#contributing)
-- [Modus Create](#modus-create)
-- [Licensing](#licensing)
+Hog store is a sample application used for best-practice demonstrations on [Modus Create's YouTube Channel](https://youtube.com/moduscreate).
 
 # Getting Started
 
-{Minimal steps required for a quick software trial.}
-
-```js
-import { Fantastico } from '@modus/awesome-solution';
-
-const amazing = new Fantastico();
+Use NPM or Yarn to install dependencies.
 
-export default amazing;
+```bash
+npm install
 ```
 
-# How it works
-
-{Describe how it works. Include images if possible.}
-
-# Developing
-
-{Show how engineers can set up a development environment and contribute.}
+```bash
+yarn
+```
 
-## Prerequisites
+This app is bootstraped with Create React App (CRA). All the usual CRA commands work.
 
-{Explain the prerequisites}
+Useful scripts (npm/yarn):
 
-## Testing
+- `yarn start` - start dev server
+- `yarn build` - build the app
+- `yarn test` - test runner
 
-{Notes on testing}
+# Running in production
 
-## Contributing
+Ensure you have `serve` installed globally.
+You need to build before running in production.
 
-{How can the community contribute}
+```bash
+serve -s build
+```
 
 # Modus Create
 
-{replace PROJECT_NAME in links below with the name of this project}
-
 [Modus Create](https://moduscreate.com) is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.
 
-<a href="https://moduscreate.com/?utm_source=labs&utm_medium=github&utm_campaign=PROJECT_NAME"><img src="https://res.cloudinary.com/modus-labs/image/upload/h_80/v1533109874/modus/logo-long-black.svg" height="80" alt="Modus Create"/></a>
+<a href="https://moduscreate.com/?utm_source=labs&utm_medium=github&utm_campaign=hog-store"><img src="https://res.cloudinary.com/modus-labs/image/upload/h_80/v1533109874/modus/logo-long-black.svg" height="80" alt="Modus Create"/></a>
 <br />
 
-This project is part of [Modus Labs](https://labs.moduscreate.com/?utm_source=labs&utm_medium=github&utm_campaign=PROJECT_NAME).
+This project is part of [Modus Labs](https://labs.moduscreate.com/?utm_source=labs&utm_medium=github&utm_campaign=hog-store).
 
-<a href="https://labs.moduscreate.com/?utm_source=labs&utm_medium=github&utm_campaign=PROJECT_NAME"><img src="https://res.cloudinary.com/modus-labs/image/upload/h_80/v1531492623/labs/logo-black.svg" height="80" alt="Modus Labs"/></a>
+<a href="https://labs.moduscreate.com/?utm_source=labs&utm_medium=github&utm_campaign=hog-store"><img src="https://res.cloudinary.com/modus-labs/image/upload/h_80/v1531492623/labs/logo-black.svg" height="80" alt="Modus Labs"/></a>
 
 # Licensing
 

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "chunky",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "framer-motion": "^1.6.8",
+    "lodash-es": "^4.17.15",
+    "react": "^16.10.2",
+    "react-burger-menu": "^2.6.11",
+    "react-dom": "^16.10.2",
+    "react-lazy-named": "^1.0.0",
+    "react-lorem-ipsum": "^1.4.3",
+    "react-scripts": "3.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/favicon.ico

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>The Hog Store</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Lato|Oswald&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/index.html

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/manifest.json

@@ -0,0 +1,3 @@
+#main main {
+  padding: 0.825rem;
+}

src/App.css

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React from 'react';
+import Menu from './components/Menu';
+import Hero from './components/Hero';
+import Sidebar from './components/Sidebar';
+import Products from './components/Products';
+import BoringContent from './components/BoringContent';
+import Footer from './components/Footer';
+import './App.css';
+
+const App = () => (
+  <>
+    <Menu />
+    <Sidebar />
+    <div id="main">
+      <Hero />
+      <main>
+        <Products />
+        <BoringContent />
+      </main>
+    </div>
+    <Footer />
+  </>
+);
+
+export default App;

src/App.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/App.test.js

@@ -0,0 +1,21 @@
+export const delay = 1.6;
+
+export const spring = {
+  type: 'spring',
+  damping: 20,
+  stiffness: 300,
+};
+
+export const logoAnimation = {
+  scale: [0.5, 1, 1, 1, 0.5],
+  rotate: [0, 0, 10, 270, 0],
+  rotateX: [90, 0, 0, 0, 90],
+  opacity: [0.5, 1, 1, 1, 0.5],
+};
+
+export const logoTransition = {
+  duration: delay + 0.1,
+  times: [0, 0.09, 0.4, 0.95, 1],
+  loop: Infinity,
+  repeatDelay: delay,
+};

src/components/Animation/animation.config.js

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { shuffle } from 'lodash-es';
+import { ReactComponent as Logo } from './logo.svg';
+import {
+  delay,
+  spring,
+  logoAnimation,
+  logoTransition,
+} from './animation.config';
+import s from './styles.module.css';
+
+const initialColors = [
+  ['#FF008C', '#FFF0FC'],
+  ['#D309E1', '#A3F9A1'],
+  ['#9C1AFF', '#F1FA0F'],
+  ['#7700FF', '#77E0FF'],
+];
+
+function Animation() {
+  const [colors, setColors] = useState(initialColors);
+
+  useEffect(() => {
+    setTimeout(() => setColors(shuffle(colors)), delay * 1000);
+  }, [colors]);
+
+  return (
+    <section className={s.animated}>
+      <ul>
+        {colors.map(([background, fill], idx) => (
+          <motion.li
+            key={background}
+            layoutTransition={spring}
+            style={{ background, '--logo-color': fill }}
+          >
+            <motion.div
+              animate={logoAnimation}
+              transition={{ ...logoTransition, delay: idx * (delay / 2) }}
+            >
+              <Logo className={s.logo} />
+            </motion.div>
+          </motion.li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export default Animation;

src/components/Animation/index.js

@@ -0,0 +1,49 @@
+.logo {
+  height: 5rem;
+  pointer-events: none;
+}
+
+.logo g {
+  fill: var(--logo-color);
+}
+
+.animated {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+.animated ul,
+.animated li {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.animated ul {
+  position: relative;
+  display: flex;
+  width: 300px;
+  flex-wrap: wrap;
+}
+
+.animated li {
+  border-radius: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  width: 140px;
+  height: 140px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 300px;
+  background: #fff;
+}

src/components/Animation/logo.svg

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import React from 'react';
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+const BoringContent = () => (
+  <section>
+    <h2>Terms and Conditions</h2>
+    <LoremIpsum avgWordsPerSentence={12} p={10} />
+  </section>
+);
+
+export default BoringContent;