Eugenia Invitations

Jan 2023
PersonalJan 20236 technologies13 features

About this project

An invitation management application built as a monorepo with React 18 (Vite, Tailwind CSS, Framer Motion) and a Node.js Express API connected to MySQL. Uses Redux Toolkit for session state and TanStack React Query for server-state caching with automatic invalidation.

Users register with department association and create invitations with host name, arrival date, and expiration date. Each invitation is visualized with a dynamically generated QR code encoding guest details and validity status.

The dashboard shows the user's invitations in a paginated table (10 per page) with clickable rows opening detail modals for QR viewing, inline editing, and deletion. Features a complete password recovery system, form validation via a custom useForm hook, animated modal transitions, and comprehensive loading/error/empty states throughout. All invitation operations are scoped to the authenticated creator.

Features

User registration with name, email, password, and department selection
JWT-based authentication with Redux Toolkit session management and localStorage persistence
Invitation CRUD fully scoped to the authenticated creator
Dashboard with paginated invitation table (react-paginate, 10 items per page)
QR code generation per invitation (react-qr-code) encoding guest and validity data
Invitation expiration with client-side date validation (arrival vs expiration)
Inline invitation editing via detail modal with form pre-population
Password recovery flow with email-sent time-limited JWT reset links via Nodemailer
Custom useForm hook for form validation with configurable callbacks
Animated modal transitions using Framer Motion AnimatePresence
TanStack React Query for server-state caching, refetching, and invalidation
Comprehensive loading, empty, and error UI states throughout
Responsive dark-themed UI built with Tailwind CSS

Tech Stack

Node.jsExpress.jsMySQLReactTailwind CSSTanStack Query