90th Birthday Extravaganza 👴🏻

A little website that shows birthday messages from all around the globe to my Grandpa. He turned 90 earlier this month!

What's in this README

• Instructions for running locally
• Key features
• What it's built with
• Known (but requested) issues
• Future improvements

Instructions for running locally

To run this website locally, you first need to clone the project and move into it from your terminal:

git clone git@github.com:carolstran/90th-birthday-extravaganza.git
cd 90th-birthday-extravaganza

Next, install the dependencies:

yarn

Note: I'm using Yarn as my primary package manager but you could also use NPM.

Then execute the following command to launch the survey:

yarn start

Finally, if you visit localhost:3000 - you should be able to see the birthday messages 🎊

Key features

• Ability for my Grandpa to navigate between messages.
• Counter to show what message he's on and how many there are total.
• Email of the sender is displayed so he can get in touch and say thank you.
• Page with a recording of his birthday Zoom call with our family.
• Page with video messages that were sent in by family members.
• Top-level navigation to go between these pages.
• The entire experience (with one exception) is WCAG 2.0 Level AA accessible.

What it's built with

• Create React App with TypeScript
• Reach router
• State management with React Hooks and the Context API
• Chakra-UI design system with the default theme
• Jest and React Testing Library for testing components
• canvas confetti for a little flare 🎉
• YouTube for hosting the videos and Canva to create the thumbnails
• Deployed with Netlify (see the live site)

Yes, it's over-engineered but I needed something to show in interviews 😆

Known (but requested) issues

• Red color used for buttons doesn't meet Level AA contrast requirements (but my Grandpa chose it).
• There's no local storage implemented - so if you leave the page and come back, you'll start from the first message again. Apparently this is how he wanted it 🤷🏼‍♀️

Future improvements

Code quality:

• General clean up after adding the video page (e10246e).
• Responsive video size.
• Move confetti function out of context.
• Bug: Names as part of a list show a comma in the email section (ie. "Email Mike,:").

Testing:

• Add more test cases, particularly that address state changes.
• Refactor testing setup so you don't need to import @testing-library/jest-dom into every file or wrap every component instance in ThemeProvider.
• Update and add new tests for new video-related components (d0a01e0)
• Fix TypeError that occurs when testing elements using canvas-confetti.

Accessibility:

• Disable confetti when reduced motion preferences are set.
• Improve screen reader experience, including potentially changing the Heading elements in the Message component to Text.
• Improve spacing on mobile navigation (64d295d).

Data:

• Anonymize data in the birthdayMessages.js file or hide completely.
• Use the Wix API to automatically fetch any new messages and add them to the beginning of the birthdayMessages array.
• Add a New badge to new messages he hasn't seen yet.
• Disable search engine indexing (e5dd92e).
• Make the site password protected.