Awesome Todo App
A Best-Practice React, Redux & Typescript Todo App.Live version
This app was made as an example for writing modern web apps with stable best-practices solutions.
This project follows a custom structure that combines the following:
Reactas the view layer of the app;
Redux-Toolkitfor managing the app's state;
Antdas the UI library;
Webpackas the main build tool for this app;
... and some more stuff.
Setting up the project
Clone the repository and run the following:
$ npm install
Running the dev server
Running the following will start the dev server and will automatically open the webapp in your default browser:
$ npm start
In order to build the app for production, run the build script:
$ npm run build
Everything goes under the
./src folder. Distribution-ready file will wait in the
As you can see in
webpack.config.ts, we have 3 entry files. Webpack will go though them, try to figure out the dependencies for each one of them, and will output plain JS files in the
./dist folder. But not only JS files! Webpack will also copy some required assets (like the
manifest.json file), and will extract CSS bundles for CSS dependencies (yes, we can also
import CSS files!).
Redux is basically a state container. The basic concept is that all of the app's data is contained within a single store, which can hold any piece of data. The only component in the application that can modify the store's state is a "reducer": a function that takes the current state and an "action" that dispatched by another component in the app, and returns the next state of the store.
At it's core, only a single reducer can be applied. But since the reducer is simply a function, we can combine (or "compose") multiple reducers into one! Each "reducer" will be called a "slice", and will handle a single part in the store's state.
We're using the awesome Redux-Toolkit library, which provide a (very) little abstraction over common Redux "boilerplate" code, while following common best-practices.
We use React as a framework for building & rendering our app.
Antd allows us to use pre-defined UI components that look and feel great.
MIT © Itai Lavie