Skip to content

carolstran/90th-birthday-extravaganza

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

90th Birthday Extravaganza πŸ‘΄πŸ»

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

Screenshot of the main page. Below the top-level navigation, you see a banner with the number of messages, the message content and a contact email. Underneath that is a Previous and Next button.

What's in this README

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

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.

About

πŸ‘΄πŸ» Little website that shows birthday messages to my Grandpa

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published