https://github.com/vicentematus/chilean-birds-nextjs-typescript

Chilean Bird explorer using Next.js 13, Typescript, Tailwind CSS and Tailwind UI. Using Chileanbirds API.
https://github.com/vicentematus/chilean-birds-nextjs-typescript

getstaticpaths getstaticprops next next-13 nextjs ssr typescript vercel

Last synced: 4 days ago
JSON representation

Chilean Bird explorer using Next.js 13, Typescript, Tailwind CSS and Tailwind UI. Using Chileanbirds API.

• Host: GitHub
• URL: https://github.com/vicentematus/chilean-birds-nextjs-typescript
• Owner: vicentematus
• Created: 2022-10-29T23:40:26.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-02-28T04:46:53.000Z (12 months ago)
• Last Synced: 2024-02-28T05:37:21.674Z (12 months ago)
• Topics: getstaticpaths, getstaticprops, next, next-13, nextjs, ssr, typescript, vercel
• Language: TypeScript
• Homepage: https://chilean-birds-nine.vercel.app
• Size: 221 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Chilean Birds

A Chilean Bird explorer using Next.js 13, Typescript, Tailwind CSS and Tailwind UI. Using [aves.ninja.cl API](https://github.com/joyofpw/chileanbirds-api). Focused on performance: instead of using SSR for each time an user makes a request, I used getStaticProps and getStaticPaths so it builds the ahead of time.

## Installation

First install `pnpm` as package manager so we avoid dependencies problems.

```bash

npm i -g pnpm

```

Then install the packages

```

pnpm install

```

And run dev server with

```

pnpm run dev

```

## Deploy

For production just use `next build`. It's gonna take some time because we need to render almost 200+ subpages for each bird available on the API.

```

pnpm run build

```

# Future Work

- [ ] Make search run on server, not on client.

- [ ] Add local storage to save favorite bird.

- [ ] Improve rendering of the 250 birds with virtual list or infinite scroll. Limitations are the api that send you all the birds, there's no way of querying it like `limit=50`

# Limitations

- [ ] Gallery preview renders with `` html5 element. Not with Next Image component, so there will be CLS(Cumulative Layout Shift) almost in every page detail render.

- [ ] React Audio player breaks on production when we run `next build` (?).