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
To start the project run : yarn start
To start storybook run : yarn storybook
Editor’s notes
Nothing to add here 🥰.
