This repo includes:
- a single, simple API endpoint (
/api/v1/quotes
) - a single React component (
<App />
) - an example database module (
server/db/quotes.js
) - an API client module (
client/apis/quotes.js
) - configuration for Jest and testing library
- a single client-side test (
client/components/App.test.js
) - CSS will be rendered using Tailwind and Headless UI. PostCSS will do the CSS compiling work
- Tests are setup in their own folders
__tests__
to keep things more organised - React Router is installed to handle client side routes
- A sample
App.test.js
is provided
- When the page loads, I want to see a beautiful photograph fade-in
- After a few seconds, I want a random, thought-provoking quote to fade-in overlaid on the photo. The quotes will come from a local database.
- After a few more seconds, I want the question "How do you want to start your day?" to fade in. This will have a drop down that the user can select from to choose mindfulness or journaling
- Selecting mindfulness should direct me to a page containing a meditation timer where the user can select how long they want to meditate. The timer will count down and ring with a pleasing tone when it reaches zero.
- Selecting journaling should lead the user to a page where they can write a journal entry that will be stored in a local database
- The top-right corner of the page should display the weather. The location can be pre-determined for MVP
- The design should be mobile first: optimised from a tablet perspective.
- As a user, want to be able to view, edit, and delete my previous journal entries.
- I would like to be able to use Markdown syntax to create and update posts and have them display as rich text.
- The weather information should display as numbers and icons only
- The weather information will be location aware
- I want to be able to click on the author of a quote to see if there others by the same author.
- I want to be able to add my own quotes.
- The design should be responsive to both phone and desktop.
- The image should change based on the weather forecast
- Users will be able to log in and out via Auth0
- Open Weather API: Weather Forecast
- Unsplash Api: For beautiful images
- Tailwind CSS: A 'utility-first' CSS framework
- Tailwind Headless UI: A simple, stylable UI component library
- Optional: Use Timer- "Simple timer turned into React Hooks"
- markdown-it: For displaying markdown formatted journal entries
- Helpful VSCode Extensions
- Tailwind CSS IntelliSense
- PostCSS Language Support