tote (time + quote) displays a changing background color based on the current time of day. Every minute, a new quote appears on the screen.

• Next.js
• Tailwind CSS
• Headless UI
• ESLint
• Prettier
• Husky
• Lint-Staged
• Jest
• React Testing Library
• Cypress
• Vercel

1. Clone the project

git clone https://github.com/macho-catt/tote.git

2. Install dependencies

npm install

3. Run locally

npm run dev

This project was initially inspired by What colour is it, a similar website that mapped the current time to a color. However, this website does not exist anymore, so I made a similar project that also shows an inspirational quote.

The math for mapping the current time to color is based on the calculations used on Calvin Walton's (kepstin) GitHub Project, and the quotes are obtained through an API request to zenquotes.io.

• Incorporate testing with Github Actions after a push / pull request
• Loading screen