The Party-Planner's Capstone Project
Tags: webdev, programming, fullstack, react
Published: 2022-05-03 12:45:09

Let's say you have a milestone birthday coming up, or you finally snagged that promotion at work.  Maybe you graduated medical school or you just finalized your divorce.  Whatever your reason for throwing a party, you are in the mood to celebrate!  But, why do throwing parties have to be such a hassle?  Between looking up addresses and trying to keep track of who is bringing what, by the day of the celebration you are too pooped to party.  If only there was an easier way to plan a party.....


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnuzeoib4y5qyiw0eoxz.png)



Well, now there is!  Thanks to our capstone project, RSVParty, planning a party can be as much fun as the party itself!  This fullstack application allows the party-starter to create a party homepage, send invitations to guests via email, provide the guests the party details, and prepare a list of supplies needed for the party.  

The fun doesn't stop there!  When a person receives an email inviting them to your party, an embedded link takes them right to RSVParty's sign-in page where they can create an account.  After picking their animal avatar, 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wbd51pmkekhwmex15k2.png)

they can then navigate to your party's homepage.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1estd6tbg5xh5z0mef91.png)

There they will find all of the party details, 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwhtpjhabjtw46xmoewm.png)

a party countdown clock, 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4y2zbuem5ut3pfgm2fj.png)


the guest list to see who else is invited to the party,


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jc2ushmaajkjv7c668ll.png)

a comments section for all of your guests, 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s92ruirpn51zh480z0rs.png)

and a host generated supply section that instantly updates once an item is claimed by a guest!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhjroitlmle1ww2love4.png)

Once you have a profile created, the application helps you keep track of all of your parties, whether you are the host or the guest.  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdyc1xpajl9yxr2pl33d.png)

**But, how does it work?**

Magic!  Well, not quite.  The application uses React.js (below is a portion of the Supplies Component code), 

```
export default function Supplies(props) {
  const dispatch = useDispatch();
  const party = useSelector((state) => state.party);
  const guest = useSelector((state) => state.guest);
  const [newSupplies, setNewSupplies] = useState(false);

  const claimItem = (e) => {
    let itemName = e.target.name;
    let updateItem = party.supplies;
    let updatedSupplies = party.supplies;
    updatedSupplies = updatedSupplies.filter((data) => data.item !== itemName);
    updateItem = updateItem.filter((data) => data.item === itemName);
    updateItem[0].guest = {
      firstName: guest.firstName,
      lastName: guest.lastName,
      guestId: guest.guestId,
    };
    updateItem[0].claimed = true;
    updatedSupplies.push(updateItem[0]);
    dispatch({ type: SET_ALL_SUPPLIES, payload: updatedSupplies });
    setNewSupplies(true);
  };
  const deleteItem = (e) => {
    let itemName = e.target.name;
    let updatedSupplies = party.supplies;
    updatedSupplies = updatedSupplies.filter((data) => data.item !== itemName);
    dispatch({ type: SET_ALL_SUPPLIES, payload: updatedSupplies });
    setNewSupplies(true);
  };

  useEffect(() => {
    if (newSupplies) {
      partyUpdateSupplies(party.partyId, party.supplies);
      setNewSupplies(false);
    }
  }, [newSupplies]);
```
React-Redux.js, React-Router, Redux-Persist, and Supabase to create a fully functional full-stack operation. Below is a diagram of our Supabase database schema  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjc1sh9x5ewmlzffpat3.jpg)

In addition, we used a few packages to help provide some additional functionality to the project.  We used EmailJS, emoji-picker-react, and react-countdown. (below is a sample of the function to send emails employing EmailJS),

```
const sendEmails = () => {
    let forms = document.querySelectorAll(".guestForm");
    for (const form of forms) {
      emailjs
        .sendForm("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", form, "YOUR_PUBLIC_KEY")
        .then(
          (result) => {
            console.log(result.text);
          },
          (error) => {
            console.log(error.text);
          }
        );
    }
  };
  const saveAndSend = () => {
    sendEmails();
    saveParty();
  };
```

So, release your inner party-animal today! The next time you have an event or a party, let RSVParty help with the plans while you have all the fun!

Creators:
Ciara Cloud
[Ciara's GitHub Page](https://github.com/ciaracloud) 
[Ciara's LinkedIn Account](https://www.linkedin.com/in/ciaracloud/)

Santos Gutierrez 
[Santos's GitHub Page](https://github.com/San-toast)
[Santos's LinkedIn Account](https://www.linkedin.com/in/santos-gutierrez-a0465b233/)

Rayleigh Rozier
[Rayleigh's GitHub Page](https://github.com/rayleighrozier)
[Rayleigh's LinkedIn Account](https://www.linkedin.com/in/rayleighrozier/)

Jason Reichert
[Jason's GitHub Page](https://github.com/JAReichert)
[Jason's LinkedIn Account](https://www.linkedin.com/in/jason-reichert-03b44b230/)