A site that serves a random picture of my cat. That's about it. Built mostly as a re-familiarization exercise with JS/CSS.
Built using NodeJS, Netlify Functions, and years of curated cat pictures.
See it live here
- A reasonably recent version of Node - I'm using v19 but 17 and 18 and probably anything after 14 or so should work too.
- A Netlify account - free tier is fine
functions
- Contains Netlify Functions code
- At this time there's only one function (
cat.js
) that picks + serves a random image
- At this time there's only one function (
cats/
- This is a directory of the random images to serve
- Contains Netlify Functions code
public
- This is a static site calling the random cat function and displaying its results
- Check out the repo
npm install
npm run auth
npm run dev
- From there you should have the site running in a browser.
- Optional: You may want to configure your editor/IDE with Prettier and ESlint
- They can also be run via
npm run lint
andnpm run fix
- They can also be run via
- Fork it and use it for your cat or dog or something
- There are some small enhancements I'd like to make eventually, but I don't intend to bloat the scope of this.
- Don't let the function return the same image twice in a row
- Suggestions: Pass the current image in subsequent requests to the same endpoint, filter it out of results before returning
- Change to git LFS/Netlify Large Media instead of checking in the full cat pictures to version control
- Make the transition when loading a new picture a little less jarring - the full page repaint can look janky in some browsers
- Add tests... I'm a professional software engineer, I swear
- Don't let the function return the same image twice in a row