alif-munim / graphql-start Goto Github PK

Details

Create README.md containing documentation for customer-server, apollo-react, and graphql-pokemon.

Description

Add a short description about a selected pokemon in the PokemonInfo component. Update the pokemonSpecies query to retrieve flavor_text fields.

Description

Install the required packages and set up a local express server with GraphQL. Create basic object types and hard code some data to test.

Packages:
npm install express express-graphql graphql nodemon

Details

Use a spinner from antd and replace default loading text.

Details

Change site header from standard h1 tag to a Logo image to make it more recognizable.

Description

Integrate React into the project and run alongside the graphql server using concurrently.

Add color-coding based on whether or not missions were a success or failure.

Write some notes about what GraphQL is, differences from a REST API, how to use it, etc.

Details

Search and the numerical filter are currently displayed on all site components, including PokemonInfo, where they are not functional. Move these into a separate component and render that from App.js instead.

Details

Search is currently case-sensitive. Ignore case.

Details

See title.

Details

The search form on the site homepage is currently left-aligned. Align center.

Details

Update styling for the statistics section of the PokemonInfo component from default bootstrap list.

Details

Import the AutoComplete component from antd and populate with pokemon names.

Details

Create SinglePokemon component with a gql query that retrieves the name, sprite, and type. Map each element of the data received in the query of MultiPokemon to a SinglePokemon. Display cards with name, sprite, and type.

Details

Use react useState and useEffect hooks to create a button to show search bar. Enable live-searching by using value entered in search box to display matching pokemon.

Details

There is currently no way to navigate back to the homepage other than the Back button at the bottom of the PokemonInfo component, which is not always immediately noticable. Use react-router-dom.Link to wrap the site header in a Link back to the homepage using the "/" route.

Details

Update default bootstrap badge styling for pokemon types. Assign a new color indicator for each type.

Create a simple express server with GraphQL, along with a schema for requesting a list of pokemon as well as individual pokemon and their respective properties.

Prepare required build scripts, code changes, files, and directories and deploy to Heroku.

Description

Apply GraphQL knowledge to make requests to the SpaceX API and retrieve data about launches and rockets.

Details

Create a PokemonInfo component to display detailed pokemon information. Use react-router-dom to link between different site pages.

Details

1. Use the useState react hook in the App component to track component state inside of a form that takes numerical input. Pass this input as props to the MultiPokemon component, which is rendered through react-router-dom's render property.
2. Use the useEffect react hook in the MultiPokemon component so that the number of SinglePokemon components rendered reacts to the value of the num prop.
3. Rewrite the gql query inside of the MultiPokemon component so that it takes an Integer variable. Use the num prop that was passed through App to MultiPokemon as a variable in the Query component.

Details

1. Create a new pokemonSpecies query that retrieves an API endpoint for an evolution chain
   • https://pokeapi.co/api/v2/pokemon-species/1/
2. Create an new evolutionChain query that retrieves a nested chain of pokemon evolutions:
   • https://pokeapi.co/api/v2/evolution-chain/1/
3. Create a Species component to make a pokemonSpecies query and house an EvolutionChain component. This component will be passed a url from its parent PokemonInfo component.
4. Create an EvolutionChain component to make an evolutionChain query and render a SinglePokemon component for each evolution.

Details

1. Build react app using from the client folder:
   • npm run build
2. Rename build folder to public and move to root.
3. Change ApolloClient uri, add process.env.PORT, add client proxy
4. Login to heroku, create app, and add remote
5. Push subdirectory to heroku:
   • git subtree push --prefix graphql-pokemon heroku master

Details

The EvolutionChain component currently causes the app to crash when a pokemon has no evolution. Fix this bug.

Details

Extend graphql singlePokemon query to include pokemon id numbers. Add id numbers to the SinglePokemon and PokemonInfo components.

Create a Launch component that returns further launch details on button press.

Details

The AutoComplete should only display options for pokemon that are currently displayed, based on the displayNum property. Currently, it provides options for all 900 pokemon.