Skip to content

SonicSync is an inclusive web platform built with React, TypeScript, and Supabase to empower the Deaf and hard-of-hearing community. It enables users to learn sign language through video-based courses, explore inclusive job opportunities, and connect via community forums.

Notifications You must be signed in to change notification settings

hassanrrraza/sonicsync

Repository files navigation

SonicSync

Empowering the Deaf Community Through Inclusive Education & Technology

SonicSync Banner


🌐 Live Demo

🎯 Try it now at: https://sonicsync.app

πŸ”— Fully deployed and live no installation required. Explore the complete experience in your browser!


πŸ“ Description

SonicSync is a comprehensive platform designed specifically for the Deaf and hard-of-hearing community, providing inclusive education, meaningful connections, and accessible career opportunities. Our mission is to bridge communication gaps through sign language education and create an empowering digital space where everyone can learn, grow, and thrive.

Who it's for:

  • Deaf and hard-of-hearing individuals seeking educational resources
  • Sign language instructors wanting to share their expertise
  • Employers committed to inclusive hiring practices
  • Anyone interested in learning sign language and Deaf culture

πŸ“Έ Screenshots

➑️ Click through each section to view app screens

🏠 Landing Page

Landing Page
Beautiful, accessible landing page with clear navigation and call-to-action.

πŸ“š Course Library

Course Library
Collection of sign language courses with progress tracking.

πŸ’Ό Job Board

Job Board
Curated job listings from deaf-friendly employers.

πŸ’¬ Community Forum

Community Forum
Interactive space for discussions and questions.

πŸ“Š Dashboard

User Dashboard
User dashboard showing learning progress and recommendations.


✨ Features

πŸŽ“ Education & Learning

  • πŸ“Ή Video-based Sign Language Courses - Expert-led Sign Language Courses
  • πŸ“ˆ Progress Tracking - Monitor your learning journey with detailed analytics
  • πŸ”– Course Bookmarking - Save courses for easy access
  • πŸ† Completion Certificates - Track achievements and milestones

πŸ’Ό Career Opportunities

  • πŸ” Smart Job Matching - AI-powered resume analysis for personalized recommendations
  • πŸ“„ Resume Management - Upload and manage your professional documents
  • πŸ’Ύ Job Bookmarking - Save interesting opportunities
  • 🏒 Deaf-Friendly Employers - Verified inclusive workplace listings

πŸ‘₯ Community & Networking

  • πŸ’¬ Interactive Forum - Share experiences, ask questions, and connect
  • ❀️ Social Features - Like, comment, and engage with community content
  • πŸ”” Real-time Notifications - Stay updated on community activity
  • πŸ‘€ User Profiles - Showcase your learning journey and achievements

🎨 User Experience

  • β™Ώ Accessibility First - Designed with deaf and hard-of-hearing users in mind
  • πŸ“± Responsive Design - Seamless experience across all devices
  • πŸŒ™ Modern UI/UX - Clean, intuitive interface with smooth animations
  • πŸ” Secure Authentication - Multiple sign-in options including Google OAuth

πŸ‘¨β€πŸ« For Instructors

  • πŸ“€ Course Upload System - Share your expertise with the community
  • πŸ“Š Instructor Dashboard - Manage courses and track student engagement
  • ⭐ Instructor Verification - Verified expert status for credibility
  • πŸ’° Monetization Options - Offer premium courses for advanced content

πŸ›  Tech Stack

Frontend

  • βš›οΈ React 18 - Modern UI library with hooks
  • πŸ”· TypeScript - Type-safe development
  • 🎨 Tailwind CSS - Utility-first styling framework
  • πŸš€ Vite - Lightning-fast build tool
  • 🧭 React Router - Client-side routing

Backend & Database

  • 🐘 Supabase - Backend-as-a-Service platform
  • πŸ—„οΈ PostgreSQL - Robust relational database
  • πŸ” Supabase Auth - Authentication & user management
  • πŸ“ Supabase Storage - File storage for videos, images, and documents
  • ⚑ Supabase Edge Functions - Serverless backend logic

Additional Libraries

  • πŸ“… date-fns - Date manipulation and formatting
  • 🎯 Lucide React - Beautiful icon library
  • πŸ“‹ React Hook Form - Efficient form management
  • 🎨 OGL - WebGL library for advanced visual effects
  • πŸ“„ PDF.js - PDF parsing for resume analysis

Development & Deployment

  • 🌐 Netlify - Hosting and deployment platform
  • πŸ”§ ESLint - Code linting and quality
  • πŸ“¦ npm - Package management

πŸš€ Getting Started

Prerequisites

  • Node.js 18+ installed
  • npm or yarn package manager
  • Supabase account (for backend services)

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/sonicsync.git
    cd sonicsync
  2. Install dependencies

    npm install
  3. Environment Setup

    # Copy the example environment file
    cp .env.example .env
    
    # Add your Supabase credentials
    VITE_SUPABASE_URL=your_supabase_project_url
    VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
  4. Start the development server

    npm run dev
  5. Open your browser

    Navigate to http://localhost:5173
    

πŸ—„οΈ Database Setup

  1. Create a new Supabase project
  2. Run the provided SQL migrations in the supabase/migrations folder
  3. Configure Row Level Security (RLS) policies
  4. Set up storage buckets for videos, images, and resumes

πŸ§‘β€πŸ’» Usage

For Learners

  1. πŸ“ Sign up for a free account
  2. 🎯 Browse courses in the course library
  3. ▢️ Start learning with video-based lessons
  4. πŸ“Š Track progress on your dashboard
  5. πŸ’¬ Join discussions in the community forum

For Job Seekers

  1. πŸ“„ Upload your resume in your profile
  2. πŸ” Browse job listings with smart recommendations
  3. πŸ’Ύ Save interesting positions for later review
  4. 🀝 Connect with deaf-friendly employers

For Instructors

  1. ⭐ Apply for instructor status through admin approval
  2. πŸ“Ή Upload course content with detailed descriptions
  3. πŸ“Š Monitor student engagement through your dashboard
  4. πŸ’° Offer premium courses for advanced content

🀝 Contributing

We welcome contributions from the community! Please read our contributing guidelines and feel free to submit pull requests, report bugs, or suggest new features.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

πŸ“„ License

This project and all associated code is owned by the SonicSync Team. All rights reserved.

For licensing inquiries, please contact: info@sonicsync.app


🌟 Acknowledgments

  • Powered by Supabase for backend infrastructure
  • Deployed on Netlify for reliable hosting
  • Icons provided by Lucide

πŸ“ž Contact & Support


⭐ If you find SonicSync helpful, please consider giving it a star! ⭐

Made with πŸ’™ for the Deaf community

About

SonicSync is an inclusive web platform built with React, TypeScript, and Supabase to empower the Deaf and hard-of-hearing community. It enables users to learn sign language through video-based courses, explore inclusive job opportunities, and connect via community forums.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published