The Pacific Event Wizard application is a common platform for all the UOP students to get the details of all the on-campus events organized by various clubs and departments altogether. It can be accessed using this link.

• Targeted Users for this application

  • All the University of the Pacific students who want to explore the different activities/ events on the campus.
  • All the representatives of various clubs inside University of the Pacific can use this application
  • All the faculty members who are representatives of various departments.
  • Students out of the University of the Pacific can not use it.

• Features/Functionalities Supported

  • Populate Users with different roles

    Various users with various roles, such as Superadmin, Admin, and Student, will be pre-populated in the app header to bypass login functionality. The role of the chosen user will determine how the application operates. For instance, if a person is selected with the role of Admin, they can create a new event, but if the user is selected with the role of Student, they won't be able to see the option to create an event.

    

  • Listing all the events

    On the landing page, all the events will be listed with the club's image, date, time and venue of the Event. On click on event it will open up a new page that will display all the remaining details of the event.

    

  • Create new event (Access only to Superadmin and Club Admin)

    A new event creation option is available in the app header for users with the roles of superadmin or admin. A new form will be opened when the create event option is clicked, allowing the user to enter new event information. The required fields for creating any event are Title, Location, and Email. If these fields are not properly filled out, the user will receive an error and cannot continue with the event creation. If user selects start date greater than end date, it will show the error notification and restrict user to create a new event

    

    

  • Event's Detail Page

    Any event name can be clicked to open a new page with all the event's other details, including type, location, email, food availability, etc. User will have a few action buttons at the bottom to mark any event as 'Attend', 'May be', 'No' and 'Attend Online'

    

  • Populate Attendee's details per event (Access only to Superadmin and Club Admin)

    If the user is either super admin or admin, he will be able to access the list of people attending as well as the event information, as seen in the image above. If the user is a student, the only thing he can see is how many people are attending the event, as shown in the picture below.

    

  • Create a club (Access only to Superadmin)

    If the user is a superadmin then he can create a new club. On click of Create club option from app header, it will open up a new form to create a new club.

    

  • Attend Event

    The user can mark the event as Attending by clicking the Attend button at the bottom of the Event Detail page. It will include the user's name in the attendee's list.

  • Application Notifications

    When a user successfully creates an event, or club, or marks an event as 'Attending,' they will receive several notification messages.

  • Search Event

    User can type any name he is looking for inside the searchbox on the listing page and get the matching results as soon as he types. On the click of a clear icon or manual text clearing, the app will re-populate the list of all the events again. By default, all the events will be sorted descending based on the start date of the event.

    

  • Filtering of Events

    On the event listing page, quick filtering options such as 'Today,' 'Tomorrow,' 'This Month,' and 'Next Month' are available. Using this filter, the user can filter the event list as well as use the search feature in conjunction with the filter results. Aside from that, there are some additional filters available, such as type, location, food, and date range. When you click the filter button, it will open a new modal that will accept the filter input and filter the events depending on the filters you have selected. Users can clear all the pre-selected values on the modal by clicking the clear button. If user selects any start date, by default it will populate next day as end date ( +24 hours). Also, if user selects the end date less than start date then it will automatically adjust the start date as previous day ( -24 hours).

    

    

  • Reset Filters

    Users can reset all the applied filters by clicking on the Reset button on the event listing page.

    

  • About Page

    On clicking the About menu from the application header, it will redirect to the about page. It gives overall information about the application such as purpose and targeted audience.

    

• Features/Functionalities Missing

  • Login Functionality
  • Mark Events with other Statues like May be, No, Attend Online

• Technologies/libraries used

  The front end is developed using React.js, Javascript, HTML, CSS, React Bootstrap, and Material UI. The Backend is developed using MongoDb, Express, Node and Javascript. Apart from this main technological stack, I have used react-datetime for implementing date and time picker. For Rendering differnt icons I have used React Icons

• How to download run the project ?

  • STEP 1: Dowload or clone the repository using command git clone https://github.com/comp227/final-dipti.git
  • STEP 2: Create two .env files inside root folder and front-end folder respectively.
  • STEP 3: Add REACT_APP_DATABASE= mongodb OR REACT_APP_DATABASE= firebase inside .env file form front-end folder. Application will point to the respective database based on the values provided (i.e. mongodb or firebase)
  • STEP 4: Add MONGODB_URI, PORT inside .env file from the roor folder. It will point to specified mongoDB database.
  • STEP 5: Go to the root folder (i.e. Pacific-Event-Wizard) and run npm install
  • STEP 6: To run backend code execute command npm start. It will start the server at http://locahost:3001
  • STEP 7: To run front-end code go to the folder front-end and run npm install.
  • STEP 8: Execute command npm start. It will start the application at http://locahost:3000