February 6, 2023

Introduction

There are two programming areas that I never really explored, namely Testing and Mocking. This project helped me learn one, FE mocking. Yes, it took me this long to learn. Regardless, it is never to late right ? right ?😭😭😭😭

Student Management App

This is a simple CRUD application that can be used to manage a list of students.

Libraries

  • Typescript
  • React
  • Redux
  • Material-UI
  • Graphql
  • Mock service Worker
  • Storybook
  • Formik

Below is an overview of the project. So all the components are initially developed and styled in storybook. Afterwards the components are directly imported and used in the actual application.

Since the UI components were complete, I moved unto establishing the actions and data handling. Meaning redux reducers, slicers and graphql queries as well as mutations. Once that was done, I finalized the implementation by creating the mock handlers. This handlers will serve as my “FAKE” backend service in the DEV environment.

Pseudo code  for mocking setup

  • FE sends queries &  mutations without caring about BE
  • service worker intercepts requests and handles it
  • worker sends requests to mock server
  • mock server uses the msw db to handle the data
  • mock data is hard coded under the mock folder as json file

FE Mock data handling

Project

To start the project run : yarn start

To start storybook run : yarn storybook

Editor’s notes

Nothing to add here 🥰.

References

mswjs/data

Mock Service Worker

Material-UI (MUI)

Apollo GraphQl

Redux

Zen FlowChart

Storybook