A fun side project to design and develop a simple, yet fully-featured, single-page wedding website from scratch.
chandraejoao.com
chandraejoao.com.mp4
- 📆 Event information with Google Calendar link to easily add to calendar and Google Maps link to easily locate the place
- 🗒 A small note from the bride and groom
- 🥃 Food and drink menu
- 🎁 Gift list with:
- Pre-defined gifts or pay-what-you-want
- Minicart to keep track of users' items and continue to checkout
- Checkout modal with payment integration (Pix with native integration via qrcode-pix and credit card via Mercado Pago)
- 📩 RSVP with Google Sheets integration via Zapier
- 🤔 FAQ
- Synthetic javascript events to make the heads in the logo wobble in reaction to user's actions
- CSS animations to make interface interactions smoother while keeping everything lightweight
- The site is statically generated (SSG) at build time and integrates with the payment layer via Next API routes
- Environment variables for storing secrets and creating distinct behaviors in development and production
- React's basic concepts: context, reducer, memo, state, effect etc
- Git Hooks for type checking, linting and formatting before every push
🔗 Report from Sep 28, 2023, 6:50:41 PM
Note: accessibility is not 100 because the colors don't have enough contrast (the constrast ratio is 2.5:1, while the requirement for level AA is 4.5:1 and for AAA is 7:1. This could be remedied with a new color palette when the user has prefers-contrast set to more.
yarn
yarn dev
Server will be running at http://localhost:3000/
- Love ❤️
- Figma
- T3 Stack
- Next.js
- Tailwind CSS
- Typescript
- Deployed on Vercel
📐 Design: João Pesce and Chandra Drummond
💻 Programming: João Pesce
📝 Copy: Chandra Drummond
June 2023