Non-Profit Matchmaking Platform – Registration & Organization Interface (NDA Project)

Note: This project is under active development and covered by NDA. This README is a portfolio summary; no source code is shared.

🌱 Project Overview

This platform supports a global non-profit initiative focused on connecting technical leaders (mentors, advisors, consultants) with non-profit organizations in need of tech expertise. It provides structured onboarding and matching processes to ensure the best fit between parties.

👨‍💻 My Role

I’m currently working as one of two frontend developers on this ongoing project. My responsibilities include:

• Building and maintaining interactive, multi-step registration forms for new users

• Implementing organization management interfaces, including data entry, review, and approval flows

• Ensuring advanced form validation using react-hook-form in combination with Zod schemas

• Integrating logic and state with MobX where required

• Working closely with designers and backend developers to align implementation with specs and API structure

• As one of two frontend developers, I regularly worked with the product owner and backend developers to shape form logic and user flows. I had direct and ongoing contact with the client, including participation in demo sessions, collaborative discussions, and feedback analysis. I was actively involved in proposing technical solutions to new or unexpected requirements, helping translate ideas into feasible implementations within tight timelines.

The project followed Agile methodology with Jira, and collaboration flowed continuously through Figma, Notion, and Slack. My clear communication, strong ownership, and proactive time management were essential in delivering complex, multi-step forms and the organization management interface with consistency and flexibility.

The platform was designed with a complete Figma-based UI system, which we follow closely in development.

🛠️ Tech Stack

Core Framework

• React 18
• Vite + TypeScript

State & Form Handling

• React Hook Form + Zod – advanced schema-based validation
• MobX – state management where reactive stores are required

UI Framework

• Mantine UI – component library used throughout the project
• Toast UI – WYSIWYG editor for rich text submissions
• Day.js, clsx, qs

Developer Tooling

• Storybook – component isolation and documentation
• Jest, Testing Library, Vitest – test environments
• ESLint, Prettier, SVGO, vite-plugin-svgr

🧠 Challenges Addressed

• Built complex forms with conditional rendering, nested validation, and field arrays
• Ensured accessibility and mobile responsiveness across all key views
• Collaborated with UX/UI team to clarify and resolve edge cases in design logic

🚀 Status

The platform is actively used by internal testers and is undergoing iterative rollout. Development continues with a focus on polish, onboarding automation, and admin tooling.

---

Want to talk about how to architect dynamic form-based flows with Zod and React Hook Form? I'm happy to dive into real-world examples.