A simple client made with Gatsby to perform requests to the geek-store-api REST API.
Run npm run production, (which will run npm run build and npm run serve) locally on your machine to start app in production mode. You'll need Node.js and Gatsby installed locally on your machine for this to work.
This script will run tests, then build the app with Gatsby and then serve it locally on http://localhost:9000.
Run npm start to start on development mode. App will run at port http://localhost:8000.
All the important code can be found within /src folder.
At root /src folder you will find some important configuration files that enable Redux and Sagas with Gatsby. AppWrapper provides a HOC to wrap the application with Redux, which uses configureStore.js file to provide a Redux Store.
This file injects inital rootReducer.js reducer and rootSaga.js saga as middleware. Other root files such as constants, actions and selectors can be found at the same level.
/utils directory contains two files that enable reducers/sagas injection (reducerInjectors.js and sagaInjectors.js). To actually inject a reducer and a saga at any component, then call src/utils/injectReducer.js and /utils/injectSaga.js, providing an initial object with a key for the reducer/saga, and the actual reducer/saga:
{ key: 'yourKey', reducer/saga }
This app uses material-ui to provide theming and styling. You can configure the theme at src/utils/theme.js.
Each component resides at its own folder inside /src/components directory. Each component may include the following files:
index.jsThe actual component.constants.jsIntended to store Redux constants.actions.jsRedux actions.reducer.jsRedux reducer.saga.jsSaga to work with async flows.selectors.jsSelectors to handle Store data inside components and sagas.Loadable.jsfor lazy loading usingSuspense. This actually does not work with the production build of Gatsby, so this only works for development.
This app uses axios to handle API requests. src/axios/axios.js contains an axios instance configuration. This instance is used for all requests. You can format axios requests on src/axios/response.js file. src/axios/providers directory contains providers to handle requests to the geek-store-api REST api.
This is a SPA in which you can fetch products by category, but you can also fuzzy search products. Try to search for example for jedi. This is an example of fuzzy search by tags since products stored on database contain tags. You can also search by name.
Mobile support includes a slidable app Drawer component, which you can activate by tapping the hamburguer menu icon or swiping from the left of the screen.
Another drawer is included, to handle search queries. This is accessible by tapping the search icon or swiping from the right of the screen.