Amifauzi.com Open
I built this website for my personal wedding using Remix and Google Sheets API
Overview:
amifauzi.com is a personal wedding website created by the author. It serves as a platform to provide information and updates about their wedding. The website incorporates various features such as a welcome modal, hero section with a responsive background picture, bride and groom section, countdown until the marriage date section, agendas section, Google map section, pre-wedding gallery section, message section connected to Google Sheet, submit button guarded by Google Sign In, Digital Envelope section, and a background music player.
Features:
- Welcome Modal: A modal connected to Google Sheet to provide a warm welcome to visitors.
- Hero Section: A section with a responsive background picture that creates an attractive visual introduction to the wedding website.
- Bride and Groom Section: A section dedicated to providing information about the bride and groom, including their names, photos, and a brief description.
- Countdown Until Marriage Date Section: A section that displays a countdown timer indicating the time remaining until the marriage date.
- Agendas Section: A section that outlines the schedule and agenda of the wedding events.
- Google Map Section: A section that integrates Google Maps to provide directions to the wedding venue.
- Pre-wedding Gallery Section: A section that showcases a collection of pre-wedding photos.
- Message Section: A section connected to Google Sheet that allows users to leave messages. The submit button is guarded by Google Sign In to ensure authenticity.
- Digital Envelope Section: A section that simulates giving a digital envelope as a means of sending greetings or gifts.
- Background Music Player: A feature that allows background music to be played throughout the website.
Summary:
amifauzi.com is a personal wedding website featuring various useful and engaging sections. From a welcome modal to a countdown timer, it offers an immersive experience for visitors. The integration of features like Google Sheets, Google Sign In, and Google Maps adds functionality and convenience. By providing comprehensive information about the wedding and enabling users to leave messages and greetings, amifauzi.com serves as an effective platform for wedding updates and interactions.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Remix
Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.