Капительный проект организатора вечеринок

Допустим, у вас скоро знаменательный день рождения или вы наконец-то получили повышение на работе. Может быть, вы закончили медицинский колледж или только что оформили развод. Какой бы ни была ваша причина устроить вечеринку, у вас есть настроение отпраздновать! Но почему проведение вечеринок должно быть таким хлопотным делом? Между поиском адресов и попытками уследить за тем, кто что принесет, ко дню празднования вы слишком вымотаны, чтобы веселиться. Если бы только был более простой способ спланировать вечеринку!

Теперь он есть! Благодаря нашему проекту, RSVParty, планирование вечеринки может быть таким же веселым, как и сама вечеринка! Это fullstack-приложение позволяет организатору вечеринки создать домашнюю страницу вечеринки, отправить приглашения гостям по электронной почте, предоставить гостям детали вечеринки и подготовить список необходимых для нее принадлежностей.

На этом веселье не заканчивается! Когда человек получает письмо с приглашением на вечеринку, встроенная ссылка переводит его прямо на страницу регистрации RSVParty, где он может создать свой аккаунт. Выбрав аватар животного,

они смогут перейти на главную страницу вашей вечеринки.

Там они найдут все детали вечеринки,

часы обратного отсчета,

список гостей, чтобы узнать, кто еще приглашен на вечеринку,

раздел комментариев для всех ваших гостей,

а также раздел поставок, созданный хозяином, который мгновенно обновляется, как только предмет востребован гостем!

Как только вы создадите профиль, приложение поможет вам отслеживать все ваши вечеринки, независимо от того, являетесь ли вы хозяином или гостем.

Но как это работает?

Волшебно! Ну, не совсем. В приложении используется React.js (ниже приведена часть кода компонента Supplies),

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 и Supabase для создания полнофункциональной полностековой работы. Ниже приведена схема нашей базы данных Supabase

Кроме того, мы использовали несколько пакетов для обеспечения дополнительной функциональности проекта. Мы использовали EmailJS, emoji-picker-react и react-countdown. (Ниже приведен пример функции для отправки электронных писем с использованием 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();
  };

Итак, дайте волю своему внутреннему зверю вечеринки уже сегодня! В следующий раз, когда у вас будет мероприятие или вечеринка, позвольте RSVParty помочь с планами, пока вы будете веселиться!

Создатели:
Сиара Клауд
Страница Киары на GitHub
Аккаунт Сиары в LinkedIn

Сантос Гутьеррес
Страница Сантоса на GitHub
Учетная запись LinkedIn Сантоса

Рэйли Розье
Страница Рэйли на GitHub
Аккаунт Рэйли в LinkedIn

Джейсон Райхерт
Страница Джейсона на GitHub
Аккаунт Джейсона в LinkedIn