React Todo

React Todo front-end client that consumes the API provided Spring Todo Application. This project was initially bootstrapped with Create React App and changed to use Material-UI components using React Hooks.

Features

• User Authentication
• User account creation
• Todo CRUD
• Search Todo
• Mobile friendly UI

How to run application

git clone {repo}
cd react-to-do
npm install
npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Running npm run build builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

How to deploy application

Running npm run deploy would deploy to the Github gh-pages of the repository. Ensure repository exits and change the homepage on package.json to your Github username if deploying to own github account.

Improvements

• First time building a React App with Hooks. I'm imagine there are areas of the code that do not follow conventions.
• User CRUD actions makes an additional call to re-fetch all todos to refresh listing instead of just affecting state.
• Likely do not need to have a global state for todos if hooks were used correctly

Reference Documentation

• State Management with React Hooks
• React Hooks Tutorial for Beginners
• Manage global state with React Hooks
• Material-UI

Authors:

Kevin Fan (KevFan)

Version/Date:

16th June 2019