Photo of the Day [POTD]

With API and Photos by Unsplash

ℹ️ Actually, "Photo of Yesterday" or "Photo of the Day before" would be accurate. The photo collection used as source is an archive of POTD images and therefore always one day behind.

To keep things simple, this app uses the most recent image (from yesterday) as the current POTD but shows the date it was POTD on unsplash.com. Assuming a new photo is added to their collection every single day 🤞

⚠️ In the current state, this project goes against the Unsplash usage guidelines and is only meant for testing and demonstration purposes. Which is why this project stays in "demo mode" with an API rate-limited of 50 requests per hour (which should never be reached when (re)generating statically).

Current Metrics	Social Share Image (demo)

Contains

• Next.js setup with TailwindCss + SCSS
• Best Practice:
  • SEO, Meta Tags, JsonLD, OpenGraph
  • Icons, SVG (soon)
• Improved next/image handling (still simple but with predictable behaviour... W.I.P.)
• Some testing/debugging comments - free of charge :)

TODOs / Further Improvements

• Dark-Mode toggle (light switch?) + styles
• Change url slugs to e.g. /2nd and /3rd (something more meaningful than /1 /2).
• Version with multiple images on the wall and loading more images when "walking" along (as a single page app).
• Cleanup/refactor meta tags, JsonLD, OpenGraph implementation.
• Known Issue #1+2: Revalidate (at most once a day) after a new photo has been added to the collection.
• Known Issue #3: Should be resolved after some more research on the matter.
• Upgrade to React v18
• Finish next/image research of all possible combinations and pitfalls (will be resolved with another project).
• Compare/replace @ctrl/tinycolor with colord
• ...

Known issues

1. It's unknown at what time a new photo will be added (manually?) to the POTD archive collection.
   This could be improved by periodically checking the API for a new image.
2. It's unknown on which dates those photos where added to said collection.
3. Currently, there are some icon display problems (padding) on android home screens.

---

Setup

1. Create an Unsplash Account and create a new Unsplash Application
   1. Provide an application name and description
   2. Add generated "Access Key" to .env.local as UNSPLASH_CLIENTID.
2. Create a new GitHub Repository Secret (Repo Settings > Secrets > Actions > Repository secrets)
   1. Use the name GH_REPO_SECRET_KEY and add the value to .env.local as GH_REPO_SECRET_KEY.
      P.S. You have to generate or type in a custom key (avoid $ if possible or escape it [\$] in .env.local).

Installation

• yarn install

  With sharp to optimize images (squoosh is used otherwise which is enough and default for Next.js on DEV; sharp is installed by default on Vercel servers)

• yarn install --ignore-optional

  Without sharp

Run locally

yarn dev

Deploy your own

---

Docs / Links

• /docs/...
• Unsplash API
  • imgix API which the Unsplash API is based on.
• Revalidation / Regeneration
  • Incremental Static Regeneration
  • Demo Repo
• CronJob with Auth
• GitHub Workflows
• Open Graph
• Twitter Cards 1 / Twitter Cards 2
• JsonLD