Authentacat Front End for Cat Wrangler

This project provides a web user interface for CatWrangler (V2). Users can browse and RSVP for events, for example:

Users can see a Markdown description of the event, and RSVP for date-time alternatives. Each date-time possibility displays a general-interest (Italian flag) indicator showing the number of positive, negative, and neutral responses. Administrators can expand the interest indicator to get reports on which users plan to attend or not, as well as sectional interest.

Updates from the initial version include:

• Administrator event editing from the web.
• ical/ics event downloading.
• Textual event filtering.
• Filter events by upcoming.
• Rideshare board.
• Using MUI Core web components, instead of home-rolled ones built on yo-yo. The resulting product renders more consistently on smaller screens and conforms to wider usability and accessibility standards.
• Using TypeScript.

Deployment

• In config.ts
  • Update config.serverName in config.ts to point to an end point handled by the Cat-Wrangler back end.
  • Edit config.homeHref to an homepage URL within your organization suitable for a logo.
  • Edit config.logoAltTxt to a text description of your logo.
• Update/add the homepage field in package.json if the endpoint is not at the top-level.
• Setup a Cognito identity pool using AWS amplify, which will write authentication configuration to src/aws-exports.js.
• Update favicon.ico and logo*.png' in public(or inbuild` if you skipped to the next step.)
• Run npm run build and copy or link the the contents of build/ to your webserver.

Ridesharing coordination

There is an optional feature to display participants who wish to carpool to events for use with CatWrangler (v2) 0.2 and later. Enable the feature on the front end by setting showRideShare to true in src/index.tsx.

With the rideshare feature, users can click on the shuttle icon next to the venue address in the event details description to display lists of attendees needing rides and willing to provide rides, as well as a neighborhood description. The user can add her name to either list.

Authentacat nor the backend application handle any further coordination. Users must contact each other to arrange transport.

Demo Mode

Whether you'd like to see what the front-end looks like for development or demonstration outside of the application data, Authentacat can be displayed by setting the demoMode variable in index.ts. Set passwordless to true, also in index.ts, to short-circuit authentication in the demo. Then run npm run start and point your browser to http://localhost:3000.