🏥 Be Perfect — Health Plus

A professional medical consultation and appointment booking platform — connecting patients with top specialists in plastic surgery and general healthcare.

🌐 Live Demo · 🐛 Report a Bug · ✨ Request a Feature

📋 Table of Contents

About the Project
Screenshots
Key Features
Tech Stack
Getting Started
Available Scripts
Environment Variables
Project Structure
Contributing
License

🩺 About the Project

Be Perfect — Health Plus is a fully responsive, Arabic-first medical platform built with React 18. It enables patients to discover specialist doctors, explore available healthcare services, and book online consultations with ease — all from a clean, modern interface with full right-to-left (RTL) Arabic support.

Whether it's emergency care, heart disease management, or dental services, the platform guides every user through a seamless three-step booking journey:

1. Choose your specialist → 2. Schedule your appointment → 3. Receive your solution

📸 Screenshots

Click to view all screenshots

Hero Section

Information Section

Posts Slider Section

Why Choose Be Perfect?

About Section

Google Map Section

Footer Section

Legal Documents Page

Appointment Form Page

✨ Key Features

📅 Online Appointment Booking — Smart form with full client-side validation (name, phone, gender, date/time, consultation type) and real-time toast notifications upon submission.
🌐 Arabic RTL Support — Fully designed for right-to-left layout with the Cairo Arabic font from Google Fonts.
📱 Fully Responsive Design — Pixel-perfect experience across all devices, from mobile to desktop.
⭐ Interactive Reviews Carousel — Showcases 10+ real customer testimonials with smooth navigation controls.
🏥 Multi-Service Showcase — Dedicated cards for Emergency Care, Heart Disease management, and Dental Care.
📧 Newsletter Subscription — Email newsletter sign-up integrated in the site footer.
🔝 Scroll-to-Top Button — Auto-appears after scrolling 600px for improved UX.
🚀 GitHub Pages Deployment — One-command deployment pipeline via gh-pages.
⚖️ Legal Documents Page — Dedicated page for terms of service, privacy policy, and legal information.

🛠️ Tech Stack

Technology	Version	Purpose
	`18.2.0`	Core UI framework
	`6.14.2`	Client-side routing & navigation
	`6.4.0`	SVG icon library
	`9.1.3`	Toast notification system
	CDN	Cairo Arabic typeface
	`5.0.0`	GitHub Pages deployment utility
	`2.1.4`	Core web performance monitoring

🚀 Getting Started

Prerequisites

Ensure the following are installed on your machine before proceeding:

Node.js >= 14.x — Download here
npm >= 6.x (ships with Node.js), or yarn / pnpm

Installation

1. Clone the repository:

git clone https://github.com/kimooamigo/be-perfect.git

2. Navigate into the project directory:

cd be-perfect

3. Install all dependencies:

npm install
# or
yarn install
# or
pnpm install

4. Start the development server:

npm start

The app will open automatically at http://localhost:3000

📜 Available Scripts

Command	Description
`npm start`	Runs the app in development mode at `http://localhost:3000`
`npm run build`	Bundles the app for production into the `build/` folder
`npm run test`	Launches the test runner in interactive watch mode
`npm run predeploy`	Builds the project in preparation for deployment
`npm run deploy`	Builds and deploys the project to GitHub Pages

🔐 Environment Variables

This is a frontend-only Single-Page Application (SPA) with no backend or external API integrations. No .env file is required to run or build the project locally.

Should you fork this project and extend it with a backend (e.g., real appointment submissions, email confirmations, or analytics), the following variables may be needed:

# Example — NOT required for the current version
REACT_APP_API_BASE_URL=
REACT_APP_EMAIL_SERVICE_KEY=
REACT_APP_ANALYTICS_ID=

📁 Project Structure

be-perfect/
├── public/
│   ├── index.html              # HTML entry point (RTL configured)
│   └── favicon/                # Browser favicon assets
├── src/
│   ├── Assets/                 # Static images (doctor photos, logo)
│   ├── Components/             # Reusable UI components
│   │   ├── Navbar.js           # Top navigation bar
│   │   ├── Hero.js             # Landing hero section
│   │   ├── Info.js             # Services info cards
│   │   ├── InformationCard.js  # Individual service card
│   │   ├── About.js            # "Who We Are" section
│   │   ├── SolutionStep.js     # Step component
│   │   ├── BookAppointment.js  # "Why Choose Us" section
│   │   ├── Reviews.js          # Testimonials carousel
│   │   ├── AppointmentForm.js  # Booking form with validation
│   │   ├── LegalDocs.js        # Legal/policy content
│   │   └── SubscribeNewsletter.js  # Newsletter sign-up
│   ├── Pages/                  # Route-level page components
│   │   ├── Home.js             # Home page (composes all sections)
│   │   ├── Appointment.js      # Appointment booking page
│   │   ├── Legal.js            # Legal documents page
│   │   └── NotFound.js         # 404 error page
│   ├── Scripts/
│   │   └── reviews.js          # Static testimonials data
│   ├── Styles/                 # CSS files (one per component)
│   ├── App.js                  # Root component & route definitions
│   └── index.js                # Application entry point
└── package.json

🤝 Contributing

Contributions are welcome! To get started:

Fork the repository
Create your feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add some amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Please open an issue first for major changes so we can discuss the approach.

📄 License

Distributed under the MIT License. See LICENSE for more information.

Made with ❤️ by Dr. Mohamed Donia | drmohamedonia.com

🏥 بي بيرفيكت — هيلث بلس

منصة احترافية للاستشارات الطبية وحجز المواعيد — تربط المرضى بأفضل المتخصصين في جراحة التجميل والرعاية الصحية العامة.

🌐 الموقع المباشر · 🐛 الإبلاغ عن مشكلة · ✨ اقتراح ميزة جديدة

🩺 عن المشروع

بي بيرفيكت — هيلث بلس هي منصة طبية متكاملة وكاملة الاستجابة، مبنية بتقنية React 18 وموجّهة للمحتوى العربي بشكل أساسي. تُتيح للمرضى الاطلاع على الأطباء المتخصصين، واستكشاف خدمات الرعاية الصحية المتاحة، وحجز الاستشارات عبر الإنترنت بسهولة تامة — وكل ذلك من خلال واجهة مستخدم عصرية ونظيفة تدعم بالكامل الكتابة من اليمين إلى اليسار (RTL).

سواء كان الأمر يتعلق بالطوارئ، أو أمراض القلب، أو طب الأسنان، توجّه المنصة كل مستخدم عبر رحلة حجز مكوّنة من ثلاث خطوات:

١. اختر متخصصك ← ٢. حدد موعدك ← ٣. استلم حلّك

📸 لقطات الشاشة

انقر لعرض جميع لقطات الشاشة

قسم الترحيب الرئيسي

قسم المعلومات والخدمات

قسم عرض المقالات

لماذا تختار بي بيرفيكت؟

قسم "من نحن"

قسم خرائط Google

ذيل الصفحة

صفحة الوثائق القانونية

صفحة نموذج حجز الموعد

✨ الميزات الرئيسية

📅 حجز المواعيد عبر الإنترنت — نموذج ذكي مع التحقق الكامل من صحة البيانات (الاسم، رقم الهاتف، الجنس، التاريخ والوقت، نوع الاستشارة) مع إشعارات فورية عند الإرسال.
🌐 دعم اللغة العربية (RTL) — مُصمَّم بالكامل للتخطيط من اليمين إلى اليسار مع خط Cairo العربي من Google Fonts.
📱 تصميم متجاوب بالكامل — تجربة مستخدم متقنة على جميع الأجهزة، من الهاتف المحمول حتى سطح المكتب.
⭐ عرض تقييمات تفاعلي — يعرض أكثر من 10 تقييمات حقيقية من العملاء مع أدوات تنقل سلسة.
🏥 عرض متعدد الخدمات — بطاقات مخصصة لخدمات الطوارئ وأمراض القلب وطب الأسنان.
📧 الاشتراك في النشرة البريدية — نموذج اشتراك إلكتروني مدمج في ذيل الصفحة.
🔝 زر العودة لأعلى الصفحة — يظهر تلقائياً بعد التمرير 600 بكسل لتحسين تجربة الاستخدام.
🚀 نشر على GitHub Pages — خط نشر بأمر واحد عبر حزمة gh-pages.
⚖️ صفحة الوثائق القانونية — صفحة مخصصة لشروط الاستخدام وسياسة الخصوصية والمعلومات القانونية.

🛠️ التقنيات المستخدمة

التقنية	الإصدار	الغرض
	`18.2.0`	إطار العمل الأساسي للواجهة الأمامية
	`6.14.2`	التوجيه والتنقل بين الصفحات (Client-side)
	`6.4.0`	مكتبة الأيقونات بصيغة SVG
	`9.1.3`	نظام الإشعارات الفورية (Toast)
	CDN	خط Cairo العربي
	`5.0.0`	أداة النشر على GitHub Pages
	`2.1.4`	قياس مؤشرات أداء الموقع الأساسية

🚀 البدء والتشغيل

المتطلبات الأساسية

تأكد من وجود الأدوات التالية على جهازك قبل البدء:

Node.js الإصدار >= 14.x — تنزيل Node.js
npm الإصدار >= 6.x (مُدرَج مع Node.js)، أو yarn / pnpm

خطوات التثبيت

١. استنساخ المستودع:

git clone https://github.com/kimooamigo/be-perfect.git

٢. الانتقال إلى مجلد المشروع:

cd be-perfect

٣. تثبيت جميع الحزم والتبعيات:

npm install
# أو
yarn install
# أو
pnpm install

٤. تشغيل خادم التطوير:

npm start

سيُفتح التطبيق تلقائياً على http://localhost:3000

📜 الأوامر المتاحة

الأمر	الوصف
`npm start`	تشغيل التطبيق في وضع التطوير على المنفذ `3000`
`npm run build`	بناء التطبيق للإنتاج داخل مجلد `build/`
`npm run test`	تشغيل الاختبارات في وضع المراقبة التفاعلية
`npm run predeploy`	إعداد وبناء المشروع تمهيداً للنشر
`npm run deploy`	بناء المشروع ونشره مباشرةً على GitHub Pages

🔐 متغيرات البيئة

هذا المشروع عبارة عن تطبيق واجهة أمامية فقط (SPA) ولا يعتمد على أي خادم خلفي (Backend) أو تكاملات API خارجية. لا يتطلب تشغيل المشروع أو بناؤه أي ملف .env.

إذا قمت بتفريع المشروع (fork) وأضفت إليه خادماً خلفياً — مثلاً لإرسال بيانات الحجز أو تأكيدات البريد الإلكتروني أو التحليلات — فقد تحتاج إلى متغيرات من هذا القبيل:

# مثال — غير مطلوب في الإصدار الحالي
REACT_APP_API_BASE_URL=
REACT_APP_EMAIL_SERVICE_KEY=
REACT_APP_ANALYTICS_ID=

📁 هيكل المشروع

be-perfect/
├── public/
│   ├── index.html                  # نقطة دخول HTML (مُهيَّأة لـ RTL)
│   └── favicon/                    # أيقونات المتصفح
├── src/
│   ├── Assets/                     # الصور الثابتة (صور الأطباء، الشعار)
│   ├── Components/                 # المكونات القابلة لإعادة الاستخدام
│   │   ├── Navbar.js               # شريط التنقل العلوي
│   │   ├── Hero.js                 # قسم الترحيب الرئيسي
│   │   ├── Info.js                 # بطاقات معلومات الخدمات
│   │   ├── InformationCard.js      # مكوّن بطاقة الخدمة الفردية
│   │   ├── About.js                # قسم "من نحن"
│   │   ├── SolutionStep.js         # مكوّن خطوة الحل
│   │   ├── BookAppointment.js      # قسم "لماذا تختارنا"
│   │   ├── Reviews.js              # عرض التقييمات الدوّار
│   │   ├── AppointmentForm.js      # نموذج الحجز مع التحقق من البيانات
│   │   ├── LegalDocs.js            # محتوى الصفحة القانونية
│   │   └── SubscribeNewsletter.js  # نموذج الاشتراك في النشرة البريدية
│   ├── Pages/                      # مكونات الصفحات (مستوى الراوتر)
│   │   ├── Home.js                 # الصفحة الرئيسية (تجمع جميع الأقسام)
│   │   ├── Appointment.js          # صفحة حجز الموعد
│   │   ├── Legal.js                # صفحة الوثائق القانونية
│   │   └── NotFound.js             # صفحة الخطأ 404
│   ├── Scripts/
│   │   └── reviews.js              # بيانات التقييمات الثابتة
│   ├── Styles/                     # ملفات CSS (ملف لكل مكوّن)
│   ├── App.js                      # المكوّن الجذر وتعريفات الراوتر
│   └── index.js                    # نقطة بداية التطبيق
└── package.json

🤝 المساهمة

المساهمات مرحب بها! للمشاركة في تطوير المشروع اتبع الخطوات التالية:

افرع المستودع (Fork)
أنشئ فرعاً لميزتك: git checkout -b feature/amazing-feature
احفظ تغييراتك: git commit -m 'Add some amazing feature'
ادفع إلى الفرع: git push origin feature/amazing-feature
افتح طلب سحب (Pull Request)

يُرجى فتح إشكالية (Issue) أولاً قبل إجراء أي تغييرات جوهرية لمناقشة الأسلوب المناسب.

📄 الرخصة

موزَّع تحت رخصة MIT. راجع ملف LICENSE للاطلاع على التفاصيل الكاملة.

صُنع بـ ❤️ بواسطة د. محمد دنيا | drmohamedonia.com

Name		Name	Last commit message	Last commit date
build		build
public		public
src		src
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation