Full Stack platform using react and native php for the deaf
تفاصيل العمل
Full Stack Platform for the Deaf – Sign Language Learning & Medical Directory
Project Overview
A fully responsive, multilingual web platform built using React.js for the front end and Native PHP for the backend. The system is designed to serve the deaf community by providing an interactive sign language learning platform, categorized video lessons, and an integrated medical directory for doctors, hospitals, and clinics that specialize in serving the deaf and hard-of-hearing.
The platform includes role-based access, content management, and real-time interaction features to ensure accessibility and usability for all users.
Core Features
1. Authentication & User Management
User registration/login with JWT authentication.
Multi-role system:
Admin – Full control over platform content and users.
Content Manager – Can upload/edit videos and sign meanings.
Medical Staff – Can manage their profiles and appointment availability.
End User – Can learn, interact, and search for services.
Profile management with avatars and personal info.
Password recovery via email.
2. Sign Language Learning Module
Video lessons for different categories (Names, Verbs, Adjectives, Numbers, etc.).
Each video contains:
Title
Description
Sign meaning in text
Related signs
Search & filter lessons by category.
Progress tracking for logged-in users.
3. Medical Directory
Listings for Doctors, Hospitals, and Clinics.
Advanced search and filtering by:
Location
Specialty
Availability
Each listing includes:
Name
Profile photo
Contact info
Description
Map location (Google Maps API integration).
4. Accessibility Features
High-contrast mode for visually impaired users.
Larger font toggle for better readability.
Video subtitles for all lessons.
Keyboard navigation support.
5. Admin Panel
Dashboard showing:
Total users
Number of videos
Number of medical listings
Manage categories, lessons, and videos.
Manage doctors, hospitals, and clinics.
User management with ability to suspend/activate accounts.
Content approval workflow for uploaded videos.
6. Notifications & Communication
Email notifications for new account creation and password reset.
In-platform announcements for upcoming events or new lessons.
Contact form for support requests.
Technical Stack
Frontend
React.js with Hooks and Context API for state management.
React Router DOM for navigation.
Axios for API requests.
Tailwind CSS for responsive and accessible UI.
React Player for embedded video playback.
Google Maps API for medical directory location display.
Backend
Native PHP (OOP) with MVC architecture.
RESTful API endpoints for all resources.
PDO for secure database interaction (prepared statements to prevent SQL injection).
Custom routing system for clean URLs.
Authentication using JWT tokens.
File upload handling for videos and images.
Input validation and sanitization.
Database
MySQL relational database.
Main tables include:
users – User accounts and roles.
roles – Role definitions and permissions.
categories – Lesson categories.
lessons – Video lessons and descriptions.
medical_listings – Doctors, hospitals, clinics.
appointments – Scheduling system (optional future upgrade).
notifications – Platform messages.
settings – System configurations.
Security
JWT-based authentication for API security.
CSRF protection for forms.
XSS protection using htmlspecialchars in PHP.
Password hashing using password_hash() and password_verify().
File upload validation to prevent malicious content.
Performance
Optimized MySQL queries with indexes for faster search.
Caching static assets for faster load time.
Lazy loading for videos to reduce initial page size.
Deployment & Hosting
Deployed on Apache/Nginx server.
SSL/TLS encryption enabled.
File structure separated into frontend and backend directories.
.env configuration for sensitive credentials.
Extra Highlights
Fully mobile-responsive (tested on iOS and Android browsers).
SEO-friendly with meta tags and structured data for better search visibility.
Built with scalability in mind – can be extended to include:
Real-time chat for users with translators.
AI-based sign recognition in the future.
Mobile app version using React Native.