An Arabic educational platform dedicated to teaching computer repair through comprehensive lessons and practical applications.
صينلي is a graduation project from the Faculty of Education, Assiut University. This platform provides step-by-step tutorials in Arabic for common computer repair and maintenance tasks. The content is curated from reliable sources to help Arabic-speaking users learn essential computer troubleshooting skills.
- ✅ 9 Comprehensive Lessons covering Windows troubleshooting, installation, and optimization
- ✅ Fully RTL (Right-to-Left) layout optimized for Arabic readers
- ✅ Step-by-step guides with detailed images and explanations
- ✅ Modern, responsive design that works on all devices
- ✅ Search functionality to quickly find lessons
- ✅ Static site generation for fast performance
- 🔵 BSOD - How to Fix Blue Screen of Death
- 🧹 Cleanup - Free Up Space on Drive C
- 💿 Install Windows - Complete Windows 10 Installation Guide
- ⚙️ BIOS - Access BIOS on Any PC
- 🔄 Reset - Reset Windows 10 to Factory Settings
- 🔧 Rufus - Create Bootable USB Drives
- 🔍 Scan - Scan Windows 10 for Errors
- ⚡ Speed - Speed Up a Slow Windows Computer
- 🦠 Virus - Remove Shortcut Virus
This project is built with modern web technologies:
- Next.js 15 - React framework with App Router
- React 19 - UI component library
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Beautiful icon library
- Custom Font: KO Okies (via next/font)
synli/
├── app/
│ ├── home/ # Landing page
│ ├── about/ # About page (team info)
│ ├── explore/ # Browse all lessons
│ ├── lessons/ # Individual lesson pages
│ │ ├── bsod/
│ │ ├── cleanup/
│ │ ├── install-windows/
│ │ ├── bios/
│ │ ├── reset/
│ │ ├── rufus/
│ │ ├── scan/
│ │ ├── speed/
│ │ └── virus/
│ └── layout.tsx # Root layout (RTL support)
├── components/
│ ├── Landing.tsx # Home page component
│ ├── About.tsx # About section
│ ├── Explore.tsx # Lessons browser with search
│ └── Lesson.tsx # Reusable lesson template
└── public/ # Static assets (images, logos)
Make sure you have Node.js (v18 or higher) installed on your machine.
-
Clone the repository:
git clone <repository-url> cd synli
-
Install dependencies:
npm install # or yarn install # or pnpm install # or bun install
-
Run the development server:
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open your browser: Navigate to http://localhost:3000 to see the application.
npm run build
npm start- Primary Green:
#064E3B- Headers, hero sections - Dark Green:
#022C22- Cards, accents - White:
#FFFFFF- Text on dark backgrounds - Gray:
#A3A3A3- Secondary text, icons
- Primary Font: KO Okies (custom Arabic font)
- All text is right-aligned for RTL layout
- Semantic heading hierarchy
This project was developed by:
- محمد حمدى - Developer
- يوسف حسين - Developer
- محمود عبد العظيم - Designer
- أحمد وحيد - Editor
Lesson content is adapted from WikiHow and translated/localized for Arabic-speaking audiences. All images are sourced from WikiHow with proper attribution.
Note: This is an educational project. Content has not been fully reviewed. Focus is on the technical implementation and platform architecture.
This project is deployed on Vercel for optimal Next.js performance.
For more details, check the Next.js deployment documentation.
This project is created as a graduation project from the Faculty of Education, Assiut University.
- Assiut University - Faculty of Education
- WikiHow - Source content provider
- Next.js Team - Amazing framework
- Vercel - Hosting platform