WOD: Sey Coffeee (React Version)

Sey Coffee is a coffee roaster in New York. For this WOD, you will create a web page using Bootstrap 5 and React inspired by their home page. When completed, it should look like this (click the image to see full size):

Note that you will find your code from Experience Island Snow React and the Murphy’s (React) inclass practice WOD to be very helpful.

Here are the steps:

Task 0: Download the Bootstrap 5 mockup

Please download the Bootstrap 5 Sey Mockup Source zip file. Uncompress it, and double-click on the index.html file to display the mockup of Sey’s home page. Your task is to convert this Bootstrap 5 Mockup to React for this WOD. You can use your own CSS from last week if you prefer, but I recommend that you use this one.

Task 1: Set up your development environment.

Create a private GitHub repo called sey-react and initialize it with a README.

Clone it to your local workspace (preferably using GitHub Desktop). Use GitHub desktop to open the project in IDEA.

Create a .gitignore file, and ignore node_modules, *.iml and .idea.

Task 2: Create your skeleton Sey’s React app.

Change directory into sey-react/ and invoke npx create-react-app my-app. (This may take a few minutes.) You can ignore the npm vulnerabilities.

Change directory into my-app/.

Install Bootstrap 5 by typing npm install react-bootstrap react-bootstrap-icons bootstrap --save

Remove all the files in the src/ directory (rm -f src/*)

Create an empty file called style.css in the src/ directory.

Create an index.js file with the following contents:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './style.css';

const Sey = () => (
  <div>
    <h1>Sey Coffee</h1>
  </div>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sey />);

(You can switch to JSX if IntelliJ asks. Also, you can disable ESLint for this week.)

Now run npm start in your shell. If all goes according to plan, you should see the following appear at http://localhost:3000

Task 3: Build the page

Now, take a look at the Bootstrap 5 mockup’s index.html file. You can see that the home page consists of three sections: a top menu, middle image element, and a footer. Each of them are implemented as a div HTML element.

What you need to do is implement two React Component classes for each of the three parts of the page and include them in your top-level Sey Coffee component. Let’s name these components:

• TopMenu
• CenterImage
• BottomFooter

The image that you will be using is: https://www.seycoffee.com/cdn/shop/files/elida_5760x.jpg?v=1613535023

For the logo, copy and paste this:

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="96"
    height="36"
    viewBox="0 0 96 36"
    alt="SEY logo"
>
    <path
        d="M20.63 26.49c0 5.185-3.827 9.51-10.444 9.51-3.472 0-7.18-.781-10.035-2.708v-6.055c2.821 2.856 5.917 4.285 9.984 4.285 3.124 0 5.766-1.498 5.766-4.562 0-3.748-4.792-6.07-8.71-8.41C4.015 16.65 0 14.06 0 9.332 0 3.723 4.848 0 10.915 0c2.935 0 5.75.746 8.333 2.226V7.73c-2.652-2.167-5.26-3.252-8.303-3.252-3.03 0-6.316 1.257-6.316 4.11 0 2.617 2.233 4.007 5.473 5.851 5.531 3.148 10.529 5.849 10.529 12.052zm19.636-6.339h13.556v-4.504H40.266V4.931h14.06V.453H35.235v35.094h19.57v-4.478H40.266V20.151zM89.223.453l-9.533 13.11L70.285.453h-6.074L77.193 18v17.597h5.157V18L95.33.453h-6.107z"
        fill="#000000"
    ></path>
</svg>

Here are some hints:

The TopMenu component will return a <Navbar expand="lg" bg="light">. Inside the Navbar is a Container give it a little y padding. Inside that is three Navs. The first Nav has the logo. The second Nav has Coffees, Subscriptions, About, Cafe, and Wholesale. The third Nav has the Log In and Cart. The links do not have to work.

The CenterImage component will return an image that fills up the entire width of the page.

The BottomFooter should return a footer.

Note: you must use the React/Bootstrap 5 framework and its component-based versions of Bootstrap 5 for this WOD. You can’t just copy over the HTML from the index.html file in the Sey Coffee mockup zip file.

Task 4: Finish

When you can preview your application and it looks equivalent to the screen image at the top of the page, commit and push your repo to GitHub.

Note that you might see a warning in the console related to a “cookie associated with a cross-site resource.” You can ignore this.

Check to make sure it is present on GitHub.

Post in the main room of the WOD that you are done.

Rx: <20 min Av: 20-25min Sd: 25-55 min DNF: 55+ min

Submission instructions

You don’t need to submit this WOD.