In this excercise I developed a React application for managing business customers using an API provided by the course instructor. Navigation between different pages within the application is done using react-router-dom routing library. User-specific functions for interacting with the api are collected in JSX Kit called UserKit. Dynamic parts of the application are updated using useState and useEffect React hooks.

🏆 Customer list, active user information and other data is provided to multiple pages by using useContext provider.

See App.js

      <BusinessContext.Provider
        value={{
          activeUser,
          setActiveUser,
          customerList,
          fetchCustomerList,
          checkIfAuthorized,
          emailToVerify,
          setEmailToVerify
        }}
      >
        <Switch>
          <Route path="/edit-customer/:customerId" render={props => <EditCustomerPage {...props} />} />
          <Route path="/customer/:customerId" render={props => <CustomerDetailsPage {...props} />} />
          <Route path="/login" exact component={LoginPage} />
          // and so on ...

All styling for this project was written from scratch.

There is one exception to this with react-super-responsive-table npm package which requires it's own basic style sheet to be loaded in order for the project to compile. To enforce my own styling on the customer table I created an override scss file that is loaded immediately after the dependency:

See CustomerTable.jsx

import "react-super-responsive-table/dist/SuperResponsiveTableStyle.css";
import "./../../styles/sass/_customer-table-override.scss";

A collection of basic component styles was created in styles.js file. Most components in the application use this collection.

import styled from "styled-components";

const FlexContainer = styled.div`
  display: flex;
  flex-direction: column;
`;

const ColumnForm = styled.form`
  ${FlexContainer};
  button,
  input,
  select {
    width: 100%;
  }
`;

🏆 Some components create their own styled elements by inheriting properties from a basic component and adding own properties on top.

const CustomerSheet = styled(styles.InfoSheet)`
  width: 100%;
  margin: 0 auto;
  border: 1px solid lightgray;
  @media only screen and (min-width: 800px) {
    max-width: 420px;
  }
`;

In order to use the system you need to register an account. Registration form can be found at the root link of the application (/). From there it is also possible to navigate to login page if you already have an account. Input field properties are set up to conform to API requirements for a new user.

If registration process succeeds user is asked to verify their new account by following an activation link that is sent to their email adress.

If account registration or activation is rejected by the server user is redirected to a relevant error page. This might happen if you attempt to register with an email adress that has already been used or attempt to use an expired activation link.

Once your new account is activated you can log in to the system from the /login page. If your credentials are accepted by the server you will be redirected to the /home page where you will see a dashboard containing your account details, a table of your current customers as well as a form for creating new customers.

I have created object representations (templates) of all input fields. This allows me to build registration forms programmatically without hardcoding all of the form tags. See InputField.jsx

  const customerInputFields = [
    { label: "Name", value: name, callback: setName, required: true, minLength: 1, maxLength: 50 },
    { label: "Organisation nr", value: organisationNr, callback: setOrganisationNr, maxLength: 30 },
    {
      label: "Vat nr",
      value: vatNr,
      callback: setVatNr,
      placeholder: "SE##########",
      maxLength: 12,
      pattern: "SE[0-9]{10}"
    },
    // and so on

🏆 If you choose to supply a vat number for your new customer the form will only accept a string that starts with "SE" followed by 10 digits.

If you click on the id of any customer you will be redirected to a "customer details" page where you will see all available information about that customer.

🏆 From this page it is also possible to change information about the customer as well as delete this customer record entirely.
🏆 Deleting or updating a customer will redirect you back to the /home page where a new list of customers will be loaded from the API to reflect any changes you have made.

• react-router-dom
• styled-component
• react-super-responsive-table

🏆 - extra credit requirement