A simple skeleton To Do app ready to be implemented. It serves as a good introduction to the various frameworks and tools in use at TabTabgo.
The app was setup using Create React App and follows the standard folder structure
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── services
| ├── TasksService.js
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── assets
└──img
└──jss
├── reducers
└──stores
└──rootReducer.js
├── views
└──components
└──[modules*]
├── App.js
├── App.test.js
├── index.css
├── index.js
└── reportWebVitals.js
└── setupTests.js
The app relies on the following main packages / frameworks
- Material-UI – The main UI library with the default CSS-in-JSS styling solution. Keep in mind that the current version in use is version 4 and not 5.
- Redux – For state management along with Redux Thunk as the middleware.
- Formik – For handling forms and Yup for schema validation.
- Axios – The HTTP client library
- Yarn – The package manager
To get started please fork and clone the repository.
- Install dependencies and run the app
The following changes are required
Implement the add task functionality which requires a form, the correponding action, and reducer functions. No backend is required for this app so keep the data in the app state for now.
To get started, review the Todo module under views/Todo
Add a list component to show added tasks and add ability to delete a task
Using your design intuitions, adjust the layout and styling of the app. You may use the theme and make broad changes to the color pallete
You might have also noticed the logo in the header isn't showing. Investigate the issue and fix it.
Using Task service to get list of tasks, add task and remove task