Clinic Marketer
Project Overview
This project targets the number of visits to a specific website, along with the percentage you will receive based on the number of entries resulting from your access to this site.
React.js - JavaScript
Arabic - English
Key Objectives
- 01
Design a dashboard that tracks the number of visits to a specific website.
- 02
Enable users to monitor performance based on traffic and calculate commission percentages.
- 03
Build a dynamic form system to support marketing operations for clinics and influencers.
Challenges Solved
- 01
Worked with new libraries and unfamiliar tools such as React Flow (for visual flows) and React Quill (for rich text editing), learning them from scratch and integrating them seamlessly.
- 02
Built a dynamic form builder that supports conditional rendering and input validation based on configuration.
- 03
Managed complex state updates and syncing between different form stages using Redux and custom hooks.
- 04
Solved layout issues for printable reports (optimized for A4), ensuring all data fits cleanly in PDF export.
- 05
Developed an admin vs. influencer separation logic, allowing each user role to access and edit different fields dynamically.
- 06
Handled deep form nesting and error management, especially with dynamically added inputs.
From concept to production — built to perform and designed to impress.
Responsibilities
- -
Developed the dashboard UI and marketing form builder from the ground up using React.js and Tailwind CSS.
- -
Integrated React Flow to visually display marketing flows and user journeys.
- -
Customized React Quill for rich text entry with tailored formatting options and field validations.
- -
Designed reusable and flexible form components that support various input types, conditions, and styles.
- -
Ensured state persistence across form steps using Redux Toolkit and form-driven configuration files.
- -
Handled route-based logic to differentiate form visibility and access control based on user role (admin/influencer).
- -
Created a summary table that dynamically calculates percentages based on traffic and performance.
- -
Built a multi-section layout that’s printable and exportable as PDF using print-specific Tailwind classes.
Key Features
Dynamic Form System
Allows administrators to create, edit, and preview custom marketing forms.
Role-based Views
Differentiated access and UI for influencers and admins.
Visual Flow Integration
Uses React Flow to map out marketing user journeys visually.
Rich Text Support
Embedded React Quill editor for flexible content input.
Real-time Calculations
Summary section that auto-updates performance percentage based on inputs.
Responsive & Print-Ready Design
Optimized for both screen and PDF/A4 printing.
Component Reusability
Built highly modular form components to support text, dates, dropdowns, and more.
Multistep Flow Support
Smooth navigation between form steps with persistent state and validation.
Toolkit
A modern, production-grade stack chosen for performance, type safety, and developer experience.
Key Outcomes
- 01
Delivered a highly flexible form builder system used by marketers and clinics with zero need for dev intervention.
- 02
Reduced manual setup time for campaigns by 60% through reusable form templates.
- 03
Successfully incorporated new tools (like React Flow and React Quill) to enhance functionality and UX.
- 04
Enabled team members to visualize flow logic, improving internal marketing strategy discussions.
- 05
Ensured marketing data was clear, clean, and print-ready, which improved client reporting and delivery.
Other Projects
Let's work together
Have an idea, a project, or a challenge you want to bring to life? Let’s turn your vision into a modern, high-performing digital experience that looks great, feels effortless to use, and is built to make a lasting impact.