This app was made as an example for writing modern web apps with stable best-practices solutions.
![](https://raw.githubusercontent.com/itailv/awesome-todo-app/master/.github/Todos-Preview.png)
This project follows a custom structure that combines the following:
TypeScript
for extending JavaScript to be typed.React
as the view layer of the app;Redux-Toolkit
for managing the app's state;Antd
as the UI library;Webpack
as the main build tool for this app;
... and some more stuff.
Clone the repository and run the following:
$ npm install
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 ./dist
folder.
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.
TypeScript extends JavaScript by adding types.
By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.
Antd allows us to use pre-defined UI components that look and feel great.
MIT © Itai Lavie