markaphillips / react-app-starter

React Starter application built on Apollo Client for GraphQL - WIP

React App Starter

Introduction

React starter application using React Apollo Client for GraphQL (WIP)

CSS using styled components.

Unit tests using Jest.

CI provided by circleci.com

Prerequisites

Install Docker

Running with Docker

Run container and build images

docker-compose up

Stopping and removing containers

docker-compose down

Unit Tests

Run tests:

npm test

Run tests in watch mode:

npm test:dev

Run tests with coverage:

npm test:coverage

react-app-starter's Issues

Add checkbox to toggle a todo as completed or open

strikethrough if completed

Deploy via Circle CI to Google Cloud

https://circleci.com/docs/2.0/deployment-integrations/#google-cloud

Review Docker further in relation to creation of images and containers

Ensure that on the client any changes are made are automatically updated

Add cypress e2e test for adding Todos

Add filters for SHOW ALL and HIDE COMPLETED

Create selectors for these filters

Style layout for view, buttons and controls

Upgrade Styled Components - check global styles

Implementation changed in latest version - review

Implement Apollo client for GraphQL

https://www.apollographql.com/docs/

Upgrade all dependencies

Add Delete functionality on hover of a todo

Add validation framework when adding todos

1. Required field
2. Text should not already exist

Replace Redux thunk middleware with Redux Sagas

Add Hooks implementation to application

Release in React version 16.8.1 - need to check if this works with enzyme

Add TodoAddItem functionality to application

Follow TDD - create simple input field and add button that adds todo item
Does not display todo list
Uses redux store and redux saga
Create cypress e2e test.

Add additional unit tests for TodoListItem props

Review enzyme and jest docs to cover the additional features add to this component

Clear input text when a todo is added

Review used of Recompose

On update of React replace with hooks

Update Webpack to latest version

Display a list of Todos on the view

Display a list of todos on load and when adding a todo

Improve and review layout and design of application

Review axios implementation and simplify

Review axios parameters

https://kapeli.com/cheat_sheets/Axios.docset/Contents/Resources/Documents/index

Upgrade to latest version

Remove Redux and Saga dependencies in application

With the introduction of Apollo client remove the need for redux and sagas.
Review the use of the Context API to manage local state

Remove all dependencies in package.json
Remove unit tests
Remove all associated code in application