haroenv/wedding-website

A website for @abisummers & my wedding

Wedding website

A website for our wedding, using the following stuff:

• SendGrid for emails
• mjml for email bulletproofing
• Netlify for hosting
• React for "templating"
• Reach router for different paths
• Airtable as a data store
• TypeScript via checkJS (easier for setup)

This project was bootstrapped with Create React App.

Environment variables

For properly running this app you will need to set the environment variables in .env

AIRTABLE_API_KEY= # retrieve from airtable.com/account
AIRTABLE_BASE= # retrieve from airtable.com/api
SENDGRID_API_KEY= # retrieve from sendgrid.com/settings/api_keys

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.

See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!

See the section about deployment for more information.

yarn emails

Sends RSVP emails (for now), using SendGrid. Make sure you are using Node v12 here.

wedding-website's Issues

Domain name

• choose domain
• wait for DNS to propagate
• redirect netlify link
• fully works

Needs a favicon

Can be whatever, options are:

• A & H in white on black background.
• a lovely ring
• something signifying #4 (wine, baguette, Eiffel Tower)

Real amazing picture

Our real "proposal" should be done in front of the Eiffel Tower with a baguette and candy ring. We need a picture of both of us proposing, where it will animate between them (fade/in-out). This will replace the placeholder picture used now

read invitee data from airtable

Check out the Airtable API & Netlify functions if no read-only API key can be made (note it has to be throttled too, if necessary)

review title fonts & sizes

Doesn't look very natural now, maybe order should be switched

Write responses to form somewhere

This can be either be:

• directly in Airtable (probably preferred) using the API
• Netlify forms where it sends it to Airtable
• Netlify forms where it sends us an email to a dedicated address
• carrier pigeon (ideally)

More explanatory text

The text now looks kinda lonely, it would be nice if some more bullshit is posted there

Make html email to ask people to fill in

This shouldn't be too interactive, but should also be:

• white on black
• include a picture
• individual link
• names filled in

Language switcher

1. extract away all strings into a main object
2. put placeholder translations
3. Wrap main app in a translation component which keeps state of which language is selected
4. read from translation map based on current state (passed through)
5. translate for real
6. read default language from Airtable (depends on #1), Always English except language column includes "Dutch"

HTML & CSS for radio buttons

1. wrong id or name is sent for some reason, should be rsvp=yes etc
2. sibling selector magic is too magic (please fix)
3. margin / padding is flipped around, label should take up all space between it & the <hr>s, maybe need to be wrapped in a div (probably not)