https://github.com/cesarolvr/react-gatsby-github-api-app
A frontend aplication integrating with Github's API: https://cesar-oliveira-web.vercel.app/
https://github.com/cesarolvr/react-gatsby-github-api-app
cypress hooks-api-react jest react-hook-form reactjs sass toastify-js typescript vercel
Last synced: 11 months ago
JSON representation
A frontend aplication integrating with Github's API: https://cesar-oliveira-web.vercel.app/
- Host: GitHub
- URL: https://github.com/cesarolvr/react-gatsby-github-api-app
- Owner: cesarolvr
- Created: 2022-09-17T18:08:19.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-26T16:40:03.000Z (over 3 years ago)
- Last Synced: 2025-03-22T20:26:02.290Z (11 months ago)
- Topics: cypress, hooks-api-react, jest, react-hook-form, reactjs, sass, toastify-js, typescript, vercel
- Language: TypeScript
- Homepage: https://cesar-oliveira-web.vercel.app
- Size: 16.9 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Just testing Github public API
This test consists of a page with 2 major components: one to search data in the Github API and another to render the result.
### Demo
https://cesar-oliveira-web.vercel.app/
### What was used
- **React** - Because it's interface library I have more knowledge/experience.
- **Gatsby** - To generate static files and serve it as a SSG application. I choose this approach because it would be a simple page and I would like it to be fast.
- **TypeScript** - To type the code.
- **React Context** - To create a "store" and feed any component in application without cascade props manually.
- **React Hooks** - To be more simple and create a stateless environment.
- **SASS** - As a styles pre-processor.
- **react-hook-form** - To abstract form states for me. I could do it manually, but RHF it's a lightweight and very simple library, so worth it.
- **react-toastify** - To show the error message. Only because it's simple and pretty.
- **react-helmet** - To do some interactions in the browser tab.
- **Jest** - To run my tests pipeline and create some unit tests.
- **Testing Library** - To have more possibilities when testing the UI.
- **Cypress** - To create a E2E test
- **GitHub Actions** - To run the tests automatically when updating main or opening new PR.
- **Vercel** - To deploy and serve.
### Getting started
**Run:**
```javascript
yarn
yarn start
```
This will start application in development mode.
**Build and serve:**
```javascript
yarn build
yarn serve
```
This will generate static files and serve in a local server.
**Run the tests:**
The tests pipeline will be triggered automatically when you push the branch `main` in GitHub. But it's also possible to run them locally.
*Unit and component tests:*
```shellscript
yarn test:jest
```
*E2E test:*
```shellscript
test:cypress
```
***Extra**: Check the tests coverage:*
```shellscript
yarn coverage
```
**How to deploy new version:**
Just push in the branch `main`.