RSVQuick: Online Invitation App Made Using Refine
Tags: refinehackathon, refine
Published: 2023-07-16 02:49:46

## What I built 
I created an online RSVP invitation application that allows _users_ to quickly create and send out invitations (in the form of cards) on the internet and _attendees_ to accept (or reject) the invitations even faster.

This application provides simple customizable options so that your RSVP cards can be created quickly while also still be infinitely unique. After creation, cards can be sent out by either sending your potential guests the link to the invitation cards or by using the automatically provided barcode which you can copy as images.

With RSVQuick, you can also ask any arbitrary questions with arbitrary options (answers) to gauge extra information about your attendees. For example, in a wedding, you may want to ask how many of your guests will be vegetarian and prepare the wedding meal menu accordingly. You can attach that exact survey in your RSVP card and assess the results after your guests have responded and determine how much vegetarian food you should order. 

### Category Submission: 
- Most Visually Pleasing
- Best Project built using Supabase as the main data provider for the refine app.
- Best Project built using Material UI as the main UI framework for the refine app.

### App Link
You can find the [live app](https://rsvquick.netlify.app/) here.

### Screenshots 
#### Landing Page
![Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ca8u6cir3e7sw18v9p3.png)

#### RSVP List Page
![Request List Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4zbg16rrzqqohhdlf7o.png)

#### RSVP Create Page
![Create Request Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gc3epf4vp5b6maabpnz4.png)

#### RSVP Show Page
![Request Show Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdtfnk06nxvsh1hf7as9.png)

#### Questions/Survey Section
![Request Questions Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7z8ec0bchcki45jl488i.png)

#### What the Attendees Will See
![Requests from a responders point of view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x1akeo4qcq4z9e1d8e7.png)

### Description 
A web application for quickly creating and sending customizable online RSVP invitations with attachable surveys/questions to ask potential attendees.

### Link to Source Code 
Here is the [link to the Github repository](https://github.com/AnsellMaximilian/rsvquick).

### Permissive License 
MIT

## Background (What made you decide to build this particular app? What inspired you?) 
I was casually browsing through this site when I found out about the Refine hackathon, and it had already started for a few days. I was very unfamiliar with Refine at the time, and with a late start, I actually didn't consider participating.

However, I was still intrigued by what Refine was and what it could offer. After reading through the documentation and seeing a few examples, I realized that Refine's rapid development could help mitigate my late start, and so I started coming up with ideas.

I tried to come up with something unique or at least something that offers some unique features while also benefitting from Refine's principles. So, finally I came up with RSVQuick.

It's an online invitation card creator that will be used by both sides (inviters and invitees), which means I would need to focus on the visuals and user experience, thus allowing me to benefit from Refine's principle to allow developers to forget about repetitive tasks.

It also offers a unique feature, which is to allow users to create any arbitrary multiple-choice questions for potential guests. Developing this feature was also made easy and quick thanks to the Refine framework.


### How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?) 
I utilized Refine to rapidly develop a starting point for my application. From a few commands in the command line, I was presented with a working basic application with Supabase and Material UI. All I had to do was provide it with two Supabase variables.

I also used Refine more generally by using its built-in hooks, like `useCreate`, `useDelete`, etc. One of my favorite simple features of Refine are its built-in CRUD buttons, especially the `DeleteButton` component. All I need is to provide the resource name and the `id`; all else will be provided by Refine (confirmation modal, notification, etc.)

During development learned the value of using frameworks like Refine. It allows me to focus on the important parts of developing applications.

### Additional Resources/Info
- [Refine](https://refine.dev/)
- [Dev.to](https://dev.to/)
- [Supabase](https://supabase.com/)
- [Material UI](https://mui.com/material-ui/)