Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: <Newsletter /> with react-form #58

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: <Newsletter /> with react-form #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5327ece
feat: <Newsletter/> react-hook-form (#56)
Vroomfrondal Aug 15, 2023
4239249
refactor: disable newsletter
Vroomfrondal Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@ A fully-responsive, infinitely scrolling NASA photo gallery complete with all CR

## Technologies

Built with:
Frontend built with:

- TypeScript
- [Tailwind](https://tailwindcss.com/)
- [React](https://react.dev/)
- [Vite](https://vitejs.dev/)

Backend built with:

- [Express](https://github.com/Vroomfrondal/NASA-CRUD-PROXY) Proxy server handling HTTP requests, email CORS policies, and hiding API keys.

### Libraries & Features

- First PR was the base project complete with all vanilla react and typescript code. Each PR thereafter contains production library integrations by using:
Expand All @@ -23,13 +27,13 @@ Built with:
- [Cypress](https://www.cypress.io/) and [Cypress Testing Library](https://testing-library.com/docs/cypress-testing-library/intro/) for CRUD operation e2e testing (with [MSW](https://www.npmjs.com/package/msw) to mock API calls).
- [react-i18next](https://react.i18next.com/) - multi-language support (English, Spanish currently).
- [Framer Motion](https://www.framer.com/motion/) - animation.
- Github actions, [LogRocket](https://ecg.atlassian.net/wiki/spaces/ECGFE/pages/1033207980/Project+2+Simple+CRUD+App#:~:text=PR%20approved%20with-,LogRocket,-integration), and [Vercel](Vercel) - CI, analysis, web-hosting & more.
- Github actions, [LogRocket](https://logrocket.com/), and [Vercel](Vercel) - CI, analysis, web-hosting & more.

## Dev Notes

### Spinning up locally

- Create a '.env' file inside the root of the folder and paste your API key from [NASA's Website](https://api.nasa.gov/).
- [Method1] Create a '.env' file inside the root of the folder and paste your API key from [NASA's Website](https://api.nasa.gov/).

```
VITE_NASA_API_KEY = "YOUR_SECRET_KEY_HERE"
Expand All @@ -47,6 +51,12 @@ Built with:

- Continious integration E2E & Component tests utilizing [Cypress](https://www.cypress.io/), [Cypress Testing Library](https://testing-library.com/docs/cypress-testing-library/intro/), and a Github Actions pipeline. See above scripts.

### Backend Proxy Server

I wrote a small express backend for handling HTTP requests for the <NewsLetter/> functionality and hiding keys. You can view that code [here](https://github.com/Vroomfrondal/NASA-CRUD-PROXY).

Sanitized via front-end input validation as well as rate limiting on backend.

### NASA API Load Time Optimization

The UI utilizes a custom date-pagination-hook implemented to optimize the API call - because NASA's API takes 4 seconds for 7 days of images; you can't just pass in a huge date range to the API. Each time the last element on page is detected, we update the start and end date, and recall the API.
Loading