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
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 |
- JavaScript
MERN stack:
- MongoDB / Mongoose
- Express
- React
- Node.js
Also:
- Material UI - helps with layout and multi-step
- Formik - easier form management
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
- 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?
- 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
- 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"?
- 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
- 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