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 email@example.com:carolstran/90th-birthday-extravaganza.git cd 90th-birthday-extravaganza
Next, install the dependencies:
Then execute the following command to launch the survey:
Finally, if you visit
localhost:3000 - you should be able to see the birthday messages
- 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 🤷🏼♀️
- General clean up after adding the video page (
- Responsive video size.
confettifunction out of context.
- Bug: Names as part of a list show a comma in the email section (ie. "Email Mike,:").
- Add more test cases, particularly that address state changes.
- Refactor testing setup so you don't need to import
@testing-library/jest-dominto every file or wrap every component instance in
- Update and add new tests for new video-related components (
- Fix TypeError that occurs when testing elements using canvas-confetti.
- Disable confetti when reduced motion preferences are set.
- Improve screen reader experience, including potentially changing the
Headingelements in the
- Improve spacing on mobile navigation (
- Anonymize data in the
birthdayMessages.jsfile or hide completely.
- Use the Wix API to automatically fetch any new messages and add them to the beginning of the
- Add a
Newbadge to new messages he hasn't seen yet.
- Disable search engine indexing (
- Make the site password protected.