https://github.com/sharjeelsafdar/project9b-diary-app
This diaries web app is built to learn and demonstrate the use of Redux Toolkit in a practical real world project. The app is developed with react using typescript, redux for state management, Material-UI for UI, and MirageJS for fake API/backend.
https://github.com/sharjeelsafdar/project9b-diary-app
api-mocking async-thunk material-ui miragejs react redux reduxtoolkit typescript
Last synced: about 2 months ago
JSON representation
This diaries web app is built to learn and demonstrate the use of Redux Toolkit in a practical real world project. The app is developed with react using typescript, redux for state management, Material-UI for UI, and MirageJS for fake API/backend.
- Host: GitHub
- URL: https://github.com/sharjeelsafdar/project9b-diary-app
- Owner: SharjeelSafdar
- Created: 2020-12-08T18:03:24.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-22T19:08:37.000Z (over 4 years ago)
- Last Synced: 2025-02-09T07:43:02.065Z (3 months ago)
- Topics: api-mocking, async-thunk, material-ui, miragejs, react, redux, reduxtoolkit, typescript
- Language: TypeScript
- Homepage: https://project9b-diary-app.netlify.app/
- Size: 799 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Project 9B: Diaries App Using React and Redux Toolkit with TypeScript
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). It was created for submission in Pana Cloud Bootcamp 2020.
### Link to Web App
The web app has been deployed to Netlify, and can be accessed [here](https://project9b-diary-app.netlify.app/).
### Features
The following are some of the features of this project:
- Uses [Redux](https://redux-toolkit.js.org/) for state management
- Uses [Async Thunks](https://redux-toolkit.js.org/api/createAsyncThunk) in redux slices for handling API requests
- Uses [MirageJS](https://miragejs.com/) as a fake API for the app
- CI/CD pipeline with Github Workflows
- Completely typed with Typescript
- Completely interactive and responsive design with [Material-UI](https://material-ui.com/) components.
### Learning Outcomes
The following are some of the learning outcomes of this project:
- Using [Redux](https://redux-toolkit.js.org/) for state management
- Creating an API mocking server with [MirageJS](https://miragejs.com/)
- Separating API calls from components making them more readable and concise using [Async Thunks](https://redux-toolkit.js.org/api/createAsyncThunk) in slices
- Using [Formik](https://formik.org/docs/overview) to create forms without boiler plate code
- Using [Yup](https://github.com/jquense/yup) for form validation in a concise and declarative way
- Using Typescript to develop a typed web app
- Building a web app with React.JS, [React Icons](https://react-icons.github.io/react-icons/), [Material-UI](https://material-ui.com/), [Redux Toolkit](https://redux-toolkit.js.org/) etc.