This is a todo list single-page application (SPA) written in JavaScript and Flow with React and Redux. It simulates interaction with a mock backend API.
Note that this project utilizes React v16.7 (pre-hook era code), "classic" Redux, and Enzyme. If you want to see an example using React hooks, modern Redux through Redux Toolkit, and React Testing Library, please checkout the *chan example.
Be aware that this was ported from LJAS v0.1.1 is classified as a legacy project. That means it lacks a few features the other projects have (such as Playwright) and will not receive future upgrades for many of its dependencies (like Flow and Yarn).
You can try a live demo of this app here:
https://todo-list-jk0o.onrender.com
Note this uses Render's free service so if the project hasn't been visited in a while, the initial page load may take longer than usual since the service has to be spun up. Also if the budget of free hours has been used up, the project will fail to load.
This project extends the React + Browser starter with the following:
- React (v16.7): Library for user interfaces, uses pre-hook era code
- Flow: Static type checker, alternative to TypeScript
- Redux: React state management with "classic" Redux
- Redux Thunk: Redux middleware used to execute network requests and store responses in Redux store
- Enzyme: React testing utility, alternative to React Testing Library
- Sublime Text: Code editor, alternative to Visual Studio Code
- Yarn: Package manager, alternative to npm
The remaining technologies are inherited from the starter:
- JavaScript: Just plain, vanilla JavaScript
- CSS: The standard language for styling
- Embedded JavaScript (EJS): Templating language used to generate the build's
index.htmldocument - Jest: Testing framework used mainly for unit testing
- Mock Service Worker (MSW): API mocking library used to mock network requests
- webpack: Bundler used to create builds
- Babel: Compiler used with webpack to output cross-browser compatible code
- ESLint: Linter used to identify problems in JavaScript
- Stylelint: Linter used to identify problems in CSS
- Prettier: Formatter used to enforce code style
- Husky + lint-staged: Pre-commit hooks to check for lint and formatting errors before Git commits are made
- Docker: Used for an optional containerized development environment
- npm: Package manager
Please refer to the "Getting Started" section in the React + Browser starter's README.md.
This project was originally created following Dan Abramov's Fundamentals of Redux Course.