This site is a testbed that show how Gatsby works and a fun project to play around with Pokémon. This site is a Progressive Web App (PWA) so you can install in on your device (if supported).
A demo of this project is available on https://pokedex.xavie.mirmon.co.uk
Node – 15.8.0
Yarn — 1.22.10
-
Clone the repo.
Run the following in the directory that you wish to run the project from
# clones the git repo git clone https://github.com/xaviemirmon/pokedex.git -
Start developing.
First you need to install your packages
cd pokedex/ yarn installNavigate into your new site’s directory and start it up.
gatsby develop
-
Open the source code and start playing!
Your site is now running at
http://localhost:8000!Note: You'll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.
This site is hosted on Gatsby Cloud. You can fork this repo and to your Gatsby Cloud accuont to host it.
Should you wish to build and server it else run the following:
gatsby build
gatsby serve-
/src/components/Footer.js: This file contains all of the logic for theFootercomponent including the links and text. -
/src/components/Header.js: This file contains all of the logic for theHeadercomponent including the Pokédex logo and link. -
/src/components/Layout.js: This file contains all of the logic for theLayoutcomponent which is shared across all pages. -
/src/components/PokemonCard.js: This file contains all of the logic for thePokemonCardcomponent which contains all the styles and layout for the individual Pokémons on the site's hompage search experience. -
/src/components/PokemonFull.js: This file contains all of the logic for thePokemonFullcomponent which contains all the styles and layout for the individual Pokémons when you navigate from the homepageIndexPageto a specific Pokémon. -
/src/components/SearchList.js: This file contains all of the logic for theSearchListcomponent which contains all the styles, states, form elements and layout search expirience on the homepage. -
/src/components/Seo.js: This file contains all of the logic for theSeocomponent provided by thegatsby-default-starterthat contains all of the<head>SEO information. -
/src/image: This directory contains necessary images for the app. -
/src/pages/index.js: This file contains all of the logic for theIndexPagecomponent for the homepage which loads in theSearchListcompoange. -
/src/pages/404.js: This file contains all of the logic for the 404 page. -
/src/templates/pokemon.js: This file contains all of the logic for thePokemonPagecomponent for the individual Pokémons which is generated by the query ingastby-node.jsand renders thePokemonFulldata. -
README.md: A text file containing useful reference information about this project. -
gatsby-config.js: The file where all the plugin settings are configured including the mapping for the graphql endpoint.
-
@theme-ui/presets: Provides theme-ui presets so that we can load in and extendSwiss. -
gatsby: Loads in Gatsby. -
gatsby-link: Gatsby Link prefetches pages and loads in changes extremely quick! -
gatsby-plugin-gatsby-cloud: Provides enhancements for the Gatsby Cloud platform. -
gatsby-plugin-image: Creates image derivatives and lazy loads images using the new Gatsby 3.x updates. -
gatsby-plugin-manifest: Provides a manifest.json for the PWA. -
gatsby-plugin-offline: Provides offline support for the PWA. -
gatsby-plugin-react-helmet:react-helmetintegration to bubble up information such as<title>,<description>, etc. information to the<head>. -
gatsby-plugin-sharp: Transforms the images forgatsby-plugin-image. -
gatsby-plugin-theme-ui: Provide Gatsby integration fortheme-ui. -
gatsby-source-filesystem: Allows Gatsby to source local files as nodes and use them in the GraphQL layer. -
gatsby-source-graphql: Allows Gatsby to source GraphQL and use them in the GraphQL layer. -
gatsby-transformer-sharp: Transforms the images forgatsby-plugin-image. -
prop-types: Allows you to specify property types in your components. -
react: React...nuff said! -
react-dom: React's virtual DOM where all the fancy tree updates happen. -
react-helmet: Bubbles up information such as<title>,<description>, etc. information to the<head>. -
theme-ui: Provides a themeing layer based on Emotion.
-
jest: provides examples of unit tests. Runyarn test:jestto perform the tests in the__tests__directories. -
cypress: provides examples of e2e tests. Runyarn test:cyto perform the tests in thecypressdirectory which also perform accessiblity checks using the axe library. Note: you need have the site running in development modegatsby develop. -
Google Lighthouse: Google Lighthouse is performed on each deploy Gatsby Cloud. The latest deployment has a 99 performance score!
-
Alogia: provide a more robust filtered search with Algolia. -
Typescript: Move code over to TS using Gatsby's new TS support.