A Dashboard Frontend with REST API and indexedDB.

Build out a Frontend with React and SCSS, with indexedDB/LocalStorage to persist user data, as well as a mock API to get all users.

Please follow the table of contents below as a guide through the application.

• Installation
• Usage
• Example
• Contributors
• LICENSE

This project is distributed via npm which is bundled with node and should have all dependencies installed:

npm install  

or using Yarn

yarn add  

This package also depends on react. Please make sure you have it installed as well. 👍

Upon running the project, you can spin up the server by running the following code:

npm start  

or using Yarn

yarn start  

Upon running the project, you will first be greeted with the login page, according to the UI design.

The form will not be submitted till you input some data. This is only to demonstrate form validation on the page. The details put in, don't matter.

On the dashboard page, we click the three dots on the users item to open the details modal, as per the UI design. We also click the table header to open the filter dropdown.

To start the test cases, simply run the test script below:

npm run test 

[Ensure to use in a separate terminal]

import React from "react";
import ReactDOM from "react-dom";
import Input from "../index";
import {render, cleanup,screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect"

afterEach(cleanup)
it("renders input without crashing", () => {
  const div = document.createElement("div");

  ReactDOM.render(
    <Input
    placeholder={"Test"}
    required 
    inputType={"text"}
  ></Input>,div
  );  
});

it("renders input correctly", () => {
    render( <Input
      placeholder={"Test"}
      required 
      inputType={"text"}
  />)
  expect( screen.getByTestId('input-component')).toHaveClass("input_container")
     
  });

The Tests are set up to have the positive cases active. To check on negative test cases, you will see the commented code in each test file. You can comment out the positive test code and uncomment the negative test case, then save to restart the test server

No Current Contributors:

Contributions of any kind are welcome!

MIT

You can check out the live project at live-demo