โ ๏ธ DISCLAIMER: This is a demo project for learning, testing, and simulation purposes only. This is NOT a real or official government portal. All content, services, and functionality are completely fictional and for educational/demonstration purposes.
A futuristic government services portal that reimagines Lebanon's public sector as a fully digital, user-centric experience. This project showcases how digital transformation could eliminate paperwork, long queues, and inefficiency in Lebanese government services.
This project is designed for:
- Learning modern web development techniques
- Testing UI/UX concepts for government portals
- Demonstrating digital transformation possibilities
- Educational purposes and portfolio showcasing
This is NOT affiliated with any real Lebanese government entity or official institution.
- Civil Registry: National ID renewal, birth certificates, marriage certificates
- Ministry of Finance: Tax returns, tax clearance certificates
- Electricitรฉ du Liban (EDL): Electricity bill payments
- NSSF: Social security registration, medical reimbursements
- Transportation: Vehicle registration, driving license renewal
- Clean, intuitive interface designed for Lebanese citizens
- Responsive design that works on all devices
- Lebanon flag-inspired color scheme and branding
- Modern animations and smooth transitions
- Full Arabic and English support
- Right-to-left (RTL) layout for Arabic
- Culturally appropriate fonts (Tajawal for Arabic, Inter for English)
- Context-aware language switching
- Secure login system with form validation
- Demo mode for easy testing
- User profile management
- Session persistence
- Real-time application tracking
- Progress indicators for multi-step processes
- Notification system
- Quick actions for popular services
- Statistics and analytics
- Service-based architecture for easy ministry addition
- Reusable UI components
- TypeScript for type safety
- Zustand for state management
- Simulated service outages ("temporarily unavailable")
- Maintenance mode for certain services
- Document requirement notifications
- Processing delays to feel authentic
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/ramyatrouny/online-lebanon.git cd online-lebanon -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
For quick testing, you can use:
- Email: Any valid email address
- Password: Any password with 6+ characters
- Quick Demo: Click "Quick Demo Login" for instant access
- Modern landing page with Lebanon flag colors
- Service overview and ministry listings
- Multilingual navigation
- Personalized welcome with Arabic/English names
- Application tracking with progress bars
- Quick actions for popular services
- Recent notifications panel
- Comprehensive service catalog
- Status indicators (Online, Maintenance, Limited, Offline)
- Ministry categorization
- Fee and processing time information
The portal simulates these Lebanese institutions:
-
Ministry of Interior and Municipalities ๐๏ธ
- Civil Registry services
- Municipal permits
-
Ministry of Finance ๐ฐ
- Tax collection and returns
- Financial clearances
-
Electricitรฉ du Liban (EDL) โก
- Electricity bill payments
- Service connections
-
National Social Security Fund (NSSF) ๐ก๏ธ
- Health insurance
- Social benefits
-
Ministry of Public Works and Transport ๐
- Vehicle registration
- Driving licenses
- Next.js 14 - React framework with App Router
- TypeScript - Type safety
- Tailwind CSS - Styling and responsive design
- Heroicons - Icon system
- React Hot Toast - Notifications
- Zustand - Lightweight state management
- Local Storage - Session persistence
- Custom components - Reusable UI elements
- Animation - Smooth transitions
- Accessibility - WCAG compliant
- Mobile-first - Responsive design
src/
โโโ app/ # Next.js 13+ App Router
โ โโโ auth/ # Authentication pages
โ โโโ dashboard/ # User dashboard
โ โโโ services/ # Service pages
โ โโโ globals.css # Global styles
โ โโโ layout.tsx # Root layout
โ โโโ page.tsx # Homepage
โโโ components/ # Reusable UI components
โ โโโ ui/ # Base UI components
โโโ data/ # Mock data and APIs
โโโ lib/ # Utilities and helpers
โ โโโ store.ts # Zustand store
โ โโโ utils.ts # Helper functions
โโโ types/ # TypeScript type definitions
- Lebanon Red:
#E4002B(Lebanese flag) - Lebanon Green:
#009A17(Lebanese flag) - Cedar Brown:
#8B4513(Cedar tree reference) - Primary Blue:
#3b82f6(Modern accent)
- Arabic: Tajawal (Google Fonts)
- English: Inter (Google Fonts)
The application supports:
- English (LTR layout)
- Arabic (RTL layout)
- Automatic direction switching
- Localized date/time formatting
- Currency formatting (USD/LBP)
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLintThe modular architecture allows easy addition of:
- New government services
- Additional ministries
- Custom workflows
- Integration with real APIs
This project demonstrates the potential for digital government transformation in Lebanon. Contributions that enhance the realistic simulation are welcome.
This is a fictional demonstration project created for learning and testing purposes only:
- โ NOT a real government portal
- โ NOT officially endorsed by any Lebanese institution
- โ NO real government services provided
- โ NO real data collection or processing
- โ Educational and demonstration purposes only
- โ Learning modern web development
- โ Testing UI/UX concepts
- โ Portfolio showcase project
This project is for demonstration, learning, and testing purposes only, showcasing modern web development techniques applied to government service digitalization simulation.
- Lebanese citizens who deserve better digital services
- The vision of a more efficient, transparent government
- Modern web development practices and tooling
Digital Lebanon - Towards a better digital future for government services in Lebanon ูุจูุงู ุงูุฑูู ู - ูุญู ู ุณุชูุจู ุฑูู ู ุฃูุถู ููุฎุฏู ุงุช ุงูุญููู ูุฉ ูู ูุจูุงู