jamespro / eventregi

EventReg - Event Registration Platform - Register for Mystery Convention!

EventReg - Register for MysteryCon 2022!

Link to live demo: EventRegi Demo

This project uses an API I am developing in another repo for data management. Link to my API repo: EventRegAPI Repo

About this Project

Initial scope:

• Register as an attendee for an event--Mystery Convention 2022.

• Multi-step checkout process using React, with Formik and Material UI, and MongoDB.

Join us at MysteryCon 2022: For True Fans of Mystery!

Landing Page

Contact Info

Item Selection

Tech used

• JavaScript

MERN stack:

• MongoDB / Mongoose
• Express
• React
• Node.js

Also:

• Material UI - helps with layout and multi-step
• Formik - easier form management

Roadmap

Future features may include:

• Multi-page registration
  • Demographic information
  • • Conditional Demos
  • Items
  • Sessions
  • Visa (and print a visa letter in PDF)
  • Invite a friend (referral)
  • Payment
• Registrant admin: Update record
• Upgrade / Add items
• Exhibitor booth staff registration
• Event admin
  • Use "react-admin" as admin code?
  • Create, View, Edit, Delete
• Reporting with graphic packages

TODO - Currently Working On

• Review step:
  • Need to finish defining/setting up the Review route and files
  • Compare Items to Review
  • Items save to DB, user redirected to review step.
  • CREATING ReviewReginfo and ReviewItems to get the content onto the Review page... defining getUser in api.js to get the user info... Go over to the API now
  • Retrieve items
  • Display on page
  • Show prices
  • UUID is in the URL, so can develop the "retrieve from abandonment"
• Use state or context to keep the UUID, maybe other info?

TODO - MVP v1

• FILL IN README
• Header: Add graphic banner
• Nav: make future steps not clickable (or switch to use MUI stepper)
• v2? DB connect code, move to separate file and include
• FORMS/Formik: put MaterialUI onto form components incl. buttons
• Reginfo: Make State and Country use select inputs
• FORMS/FORMIK: Use form components from separate files
• Items: Add initial items
• Items: Add price on-page; align right
• FORMS/FORMIK: Add Radio buttons form component (might not need to right now)
• Items (FORMIK/MaterialUI): Add deselect conflicting items (FormGroup?)
• Items: Add separate records for each item, referenced back by uuid to registrant.
• Items: each one needs recordstatus (temp or purchased for example, or removed, or waiting list?)
• Item: Do I need one schema for ITEM? And another for ITEMS?
• Item: Need to loop through adding items, unlike when adding one user?
• FORMS/Formik: initial values, what to do for this? e.g. uuid
• FORMS/Formik: passing by
• Get uuid from localStorage, or if not in localstorage, then URL params
• v2 put UUID into route so you can track progress, return to step
• Route: /attendee/demo/uuid = demos - should it grab the showcode from the UUID record? or put into URL?
• v2 Reginfo: Get showcode from URL, to insert into default hidden field (and other uses)
• Reginfo: Feedback after submit... that you were successful
• Reginfo: Feedback after submit...duplicate email
• Reginfo: Success, redirect to Items
• v2 Reginfo: if duplicate email, highlight field and make you change it
• v2 Reginfo: AJAX check for duplicate email in db (AND ACTIVE)
• v2 DEMOS ARE V2
• ITEMS: Add step where you choose 1 of three items
• Review: Show items you chose
• Payment: Save Order Total with order
• Payment: Show you order total
• Payment: when submit, change regStatus to active
• Payment: Why did layout change? seems odd. it changed when I added Country/ State dropdowns
• Confirm step: return an ordernumber, order details after submit successfully

TODO - MVP v2

• Showcode: Have pages show something specific based on showcode
• Header & Nav: Replace Nav with MaterialUI Stepper?
• Layout: MUI: Make fields area "bigger"? Remove border? (maybe postpone this)
• Reginfo: add more user fields
• Reginfo: Remove "use address for payment details"?

DONE

• ADD SIZZLE
• DESIGN: LANDING PAGE (Add a step with just image and arrow?) (https://www.mongodb.com/live)
• Change TITLE, metadata, favicon
• Hook up to database
• Database: Save submitted information to MongoDB
• Fix browser error on step 1
• Reginfo: Pull Countries from a data source
• Make API url configurable to use remote when on hosting and local api when localhost
• Confirm: Link to return to start
• UUID library - node: Check out this package and add
• Move checkout code to its own repo
• Set up routes on default screen so that checkout is moved to separate route
• Route: / make it a landing page with link to AT reginfo
• Route: /attendee/reginfo/showcode = reginfo
• Header: Remove AppBar
• Reginfo: send just user fields
• Reginfo: add field for regStatus - temp, active, or inactive
• Reginfo: put showcode into user record so we know what event they are registering for
• Reginfo: when checking email address, also check against same showcode

Improvements / Optimizations

• Nav: put text below step, to save space?
• Layout: wider, taller? Test on mobile
• Payment: Accept/validate other types of credit cards
• Database: split data into User, Order, Item, Payment
• Reginfo: Zipcode should accept Canada and other forms of zipcode
• Reginfo: Have State populate only if country = United States of America (Requires state management?)
• Reginfo: Add Canada provinces and Mexico states, and only load for each of those countries
• Reginfo: Make the Country and State data source MongoDB?
• Reginfo: Can Formik pre-fill fields such as Country?
• Reginfo: Can Formik get settings for fields from a data source?
• Database: save submitted changes as you go?
• Database: Get form info from database (e.g. fields)
• Should I take out Material UI to make it easier to use Formik features? Like having fields dependent on other fields.
• Send confirmation email
• Auth: Add final step to ask user if they want to add a username and email, for authentication and future login
• Reginfo: Zipcode, lookup and set state and maybe country