https://github.com/boweihan/offline-demo
Adding offline functionality to a React/Redux application
https://github.com/boweihan/offline-demo
Last synced: 2 months ago
JSON representation
Adding offline functionality to a React/Redux application
- Host: GitHub
- URL: https://github.com/boweihan/offline-demo
- Owner: boweihan
- Created: 2019-10-22T15:36:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-31T04:00:28.000Z (over 2 years ago)
- Last Synced: 2025-01-31T09:45:44.573Z (4 months ago)
- Language: JavaScript
- Size: 14.1 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-redux-workshop
### Motivation
This is a simple application to manage our product library allowing users to check out and check in books. Learn React and Redux by coding along as we add functionality. The goal is to fully setup your dev environment with React related tooling and familiarize yourself with how data flows through the application.
Accompanying slides & background - https://docs.google.com/presentation/d/1EqyvDZCd9dfrkhUk5D5mq1bPyx2eWXnxi2hBdpGjXAs/edit?usp=sharing
### Installation
Prerequisites: Node 8.x
0. Clone the project
`git clone [email protected]:boweihan/react-redux-workshop.git`
1. Install dependencies
`npm install`
2. Run the json api server
`npm run server`
3. Run the Webpack dev server
`npm start`
### Development Tools
React and Redux devtools are useful for development. These particular links are for the Chrome extensions but they are available in any popular browser and as a standalone application.
React Developer Tools - https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Redux Devtools - https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
### Project Structure
Components - `src/components`
Action Creators - `src/actions`
Reducers - `src/reducers`
DB file - `server/db.json`
### Workshop Structure
1. React/Redux overview
2. Project overview
3. Checkout functionality code-along exercise
4. Checkin functionality pair programming exercise
### Bonus Challenges
1. Display user names for checked out books
2. Add checkout time information and due dates
3. Implement validation so that a user can only check out one book at a time
4. Implement loading UI for asynchronous requests
5. Fully normalize the redux store
6. Implement middleware that catches errors in the redux flow and log. Implement middleware that catches errors in the redux flow and logs them to console
### Notes
This project was bootstrapped with create-react-app.