Party managing system for off-campus homeloners
POV: Aster met off campus home loner who holds the home party. Aster is amazed to realize that he/she quite often feels burdened to talk about subtle upset, regarding home party. So, it’d be game-changing for Aster to convey messages (home party manner), preventing conflicts in human relationship.
React for component-based coding
Material-ui for convenient ui build
Bootstrap for grid system
Firebase to save data
React-router-dom for routing
React-custom-roulette for roulette implement
file path: HCI_Pacific/react-app/src/components/
PageHome.js
Role of the page
- Homepage, where you signup or login.
Components
Description
- You can signup and login to your page.
- It shows our logo and explains our project.
PageOpen.js
Role of the page
- Opening party by typing in information and sending invitations to selected guests.
Components
Description
- Set your party name, date/time, location and additional information, and select your guests.
- You can ‘Open Only’ or ‘Open and Send’ to your friends.
PageEdit.js
Role of the page
- Editing information about the party.
Components
Description
- Edit the information if you had made mistakes or typos.
PageParties.js
Role of the page
- View all parties you have, both previous and upcoming.
- Click ‘+’ to open a new party.
Components
Description
- View the parties with cards containing party name, date/time, number of guests, etc.
- You can sort by ‘all’, ‘previous’, and ‘upcoming’.
- Also, you can search party by its name.
PageParty.js
Role of the page
- Manage each party and party guests.
Components
Description
- You can go to edit information, add new guests, and send more invitations.
- Also, click ‘+’ below the guest to give them coins.
PageGuestbook.js
Role of the page
- View all the list of guests you have.
- Add new guests.
Components
Description
- It shows all your guests, along with each guest’s coins.
- You can click onto each guest to manage more.
PageGuestInfo.js
Role of the page
- Managing each guest.
Components
Description
- You can play the roulette when the guest has enough coins.
- The present they won will be tracked on the right.
- You can also manage their coins on the bar below the guest.
PageMypage.js
Role of the page
- Create your default settings of notices, location, and wishlist.
Components
Description
- The presets set here will be shown when opening a new party.
file path: HCI_Pacific/react-app/src/components/
Auth.js
- Login of the website
- (Logout not yet implemented)
HomeHeader.js
- Header with ‘signup’ and ‘login’
Header.js
- Navigator header, where you can go to ‘home’, ‘parties’, ‘guests’, and ‘mypage’
- It is on every page, exept for the homepage before login
OpenPartyInfo.js
- Type in your party name, date/time, location, and memo
- You can also pick date/time from date-time picker on the right
OpenPartyNotices.js
- Check/uncheck whether you want to send your wishlist
- Check/uncheck your default notices, or edit it
- Also you can add new notice
OpenPartyGuests.js
- Select guests from the guestbook, or add new guests directly to invite to your party
- You can also uncheck the pre-selected guests, if you have clicked wrong
EditPartyInfo.js
- Editing area of party date/time, location and memo
EditPartyNotices.js
- Editing area of party notices and whether to send wishlist
Parties.js
- Showing all parties you have
Single_party.js
- Returns the party card of each party, with party name, date/time, number of guests, preview of guests, and whether it is ‘previous’ or ‘upcoming’ party
Empty_party.js
- ‘+’ button to click on to add new party
PartiesMain.js
- Area displaying party information and containing button to edit the information or to send the invitation
Guests.js
- Showing all guests you have
SelectGuestDialog.js
- Popup accordion enabling you to select guests
- You can choose from the guestbook by searching and selecting them, or directly adding new guests
Single_guest.js
- Returns each guest with their blob(shape), name, and coin managing bar
Empty_guest.js
- ‘+’ button to click on to add new guest
Roulette.js
- Roulette component which you can use when exchanging coins to real life gifts
- (We will later manage to implement the roulette setting in mypage)
Mypage.js
- Where you can make your own presets of notices, location, and wishlist (Preset for the roulette will later be implemented)
Firebase.js
- Code used in several files in order to get access to firebase database
App.js
- Where our page routing code code is
- file path: HCI_Pacific/react-app/src/
Hosting Information
- Firebase Hosting: We used firebase and react. Therefore, we managed to ues Firebase for hosting