Event Management Platform

Event Management Platform (National Scale)

Company: Payam Mashregh

Enterprise / Confidential Projects

Internal System

Enterprise Project

UI representation – actual system screenshots cannot be shared

This project was developed exclusively for a national-level organization. Due to security policies and organizational ownership, public links or system screenshots cannot be shared.

This project was developed exclusively for a national-scale organization. Due to security policies and organizational ownership, sharing links or screenshots of the system is not possible. The platform is designed to create, manage, and monitor events with high operational complexity, covering everything from participant registration to payment, judging, and issuing event cards. The main focus of the project was on building a scalable front-end, managing complex forms, controlling multi-step workflows, and maintaining performance under high volumes of concurrent data and users.

Technologies

React 18.2TypeScript 5.2Vite 5React Router DOMZustandReact QueryAnt DesignTailwind CSS 3.4AxiosReact Hook FormZodDay.js / Moment.js@dnd-kitREST APIs

Features

Multi-step event management wizards
User management with search and edit functionality
Dynamic registration system
Event services and item management
SMS notification system
Advanced reporting
Judging system
Payment system with discount codes
Event card generation

My Role in Project

Front-End Developer (React / TypeScript) Responsible for designing and implementing the front-end layer, managing state, building forms and wizards, connecting to APIs, optimizing performance, and enforcing UI-level access control.

Challenges & Focus

Implementing complex multi-step wizards with inter-step dependenciesManaging dynamic forms with variable validation rulesRole-based access control (RBAC) across different parts of the systemHandling large volumes of data in user listsregistrationsand reportsEnsuring UI stability in sensitive operations such as paymentsSMS notificationsand event workflows

Technical Decisions

React Hook Form + Zod for form management

Chosen for better performance compared to controlled forms and the ability to define complex, type-safe validations. This combination was especially critical for dynamic and multi-step forms.

Zustand for global process state

Wizard data, step status, and temporary cross-page data were managed without Redux overhead, with better readability and simplicity.

React Query for API interactions

Used for caching, retries, preventing duplicate requests, and managing async states in registrations, reporting, and payments.

Ant Design + Tailwind CSS

Ant Design was used for enterprise-level components and complex forms. Tailwind CSS allowed UI customization, precise layout control, and DOM optimization in high-traffic sections.

@dnd-kit for drag & drop interactions

Used for reordering services, steps, or movable items with precise performance and UX control.

Solutions and Optimizations

Separating temporary form states from global state to reduce coupling
Using memoization and lazy rendering in wizard steps to minimize re-renders
Implementing RBAC at both route and component levels to prevent unauthorized access and rendering
Standardizing data contracts with the back-end to reduce errors in payment and judging workflows
Controlled use of Day.js and Moment.js for API compatibility

Trade-offs and Engineering Considerations

To reduce risk in payment processes, some validation logic was shifted to the back-end, keeping the front-end lightweight
Simplified UX in some wizards to reduce state complexity and potential errors
Instead of a fully generic form system, custom implementations were applied in sensitive sections to maintain precise form behavior control

Outcome

This project provided hands-on experience in designing and implementing front-end systems for complex operational platforms, where the main focus was not just on feature implementation but also on workflow control, risk reduction, stability, and long-term maintainability.

Back