Contact Manager

Features to implement

• List Contacts
• View Contact
• Add Contact
• Delete Contact
• Edit Contact
• Clean routing i.e '/contact/:id'
• Use material-ui for components

Bonuses

• Use xstate to manage app state.
• Connect to the graphql endpoint http://localhost:3001 by using create-react-app proxy feature
• Use the graphql endpoint to get/create/update/delete

Contact

• Name eg 'John Smith'
• Email eg '[email protected]'
• Date Modified eg '31-01-2018 15:04'
• Date Created eg '31-01-2018 15:04'

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run gql

Runs the graphql server.

Open http://localhost:3001 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode.

See the section about running tests for more information.

TODO

1. Add loaders when fetching data
2. Connect DB to the GraphQL
3. Implement better design
4. Cover all any's with models
5. Use Xstate
6. Add loading and collection properties to the state and migrate it to Object from the Array
7. Add shapes to all Objects props
8. Write tests