https://github.com/sharjeelsafdar/project8-spacex-app
The web app informs users about all the launches by SpaceX and its rockets. It queries SpaceX's GraphQL API for the data. API responses are dynamically cached within service-worker with stale-while-revalidate approach. It's a PWA: is installable and works offline. It's developed using TDD approach and is completely typed with TypeScript.
https://github.com/sharjeelsafdar/project8-spacex-app
apollo-client caching graphql jest offline pwa react react-router-dom rtl serviceworker spacex stale-while-revalidate tdd typescript
Last synced: 2 months ago
JSON representation
The web app informs users about all the launches by SpaceX and its rockets. It queries SpaceX's GraphQL API for the data. API responses are dynamically cached within service-worker with stale-while-revalidate approach. It's a PWA: is installable and works offline. It's developed using TDD approach and is completely typed with TypeScript.
- Host: GitHub
- URL: https://github.com/sharjeelsafdar/project8-spacex-app
- Owner: SharjeelSafdar
- Created: 2020-09-10T08:04:33.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-16T08:09:37.000Z (over 4 years ago)
- Last Synced: 2025-02-09T07:43:02.465Z (4 months ago)
- Topics: apollo-client, caching, graphql, jest, offline, pwa, react, react-router-dom, rtl, serviceworker, spacex, stale-while-revalidate, tdd, typescript
- Language: TypeScript
- Homepage: https://spacex-p8.netlify.app/
- Size: 1.55 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Project 8: SpaceX App (PWA)
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). It was created for submission in Pana Cloud Bootcamp 2020.
### Link to Web App
The web app has been deployed to Netlify, and can be accessed [here](https://spacex-p8.netlify.app/).
### Features
The following are some of the features of this project:
- Uses GraphQL to query data
- Query responses cached in service-worker using Caches API with Stale-While-Revalidate approach
- Developed with Test Driven Development (TDD) approach (85+ tests)
- CI/CD pipeline with Github Workflows
- Automated tests in CI/CD pipeline
- PWA- Installable on all OS (Android, iOS, Windows, etc.)
- Compliant with Lighthouse Audits
- Completely typed with Typescript
- Completely interactive design with CSS transitions
- Completely responsive design with CSS media queries
### Learning Outcomes
The following are some of the learning outcomes of this project:
- Using GraphQL to query APIs with [Apollo Client](https://www.apollographql.com/docs/react/)
- Intercepting and caching query responses dynamically in service-worker
- Using stale-while-revalidate approach for caching to get speed as well as updated data
- Using Test Driven Development (TDD) approach for developing web apps
- Using [React Testing Library (RTL)](https://testing-library.com/docs/react-testing-library/intro) to write tests for React components
- Using [Jest](https://jestjs.io/) for assertions and running tests
- Testing react-router integration
- Creating a PWA with ServiceWorkers and Manifest
- Using Typescript to develop a typed web app
- Building a web app with React.JS, React Icons, React Router DOM, etc.
### API Used
[SpaceX GrapgQL API](https://spacexdata.herokuapp.com/graphql)