TAMAM Web Portal is a modern Next.js web application that provides customers with a comprehensive online platform to access multi-vendor delivery services across Kurdistan and Iraq. The portal offers a seamless desktop and mobile web experience for food ordering, grocery shopping, and service booking.
- Desktop Users: Comprehensive shopping experience on larger screens
- Office Workers: Workplace meal and grocery ordering
- Web-First Customers: Users who prefer browser-based applications
- Accessibility Users: Screen reader and keyboard navigation support
- Multi-device Users: Seamless experience across devices
- Responsive Design: Optimal experience on all screen sizes
- Advanced Search: Powerful filtering and search capabilities
- Product Galleries: High-quality image displays with zoom
- Comparison Tools: Side-by-side product and restaurant comparison
- Bulk Ordering: Efficient multi-item selection for offices
- Fast Loading: Server-side rendering for optimal performance
- Progressive Web App: App-like experience in the browser
- Keyboard Navigation: Full keyboard accessibility support
- Screen Reader Support: WCAG 2.1 AA compliance
- Multi-tab Support: Maintain cart across browser tabs
- Real-time Updates: Live order tracking and status updates
- Social Integration: Share favorites and reviews on social media
- Print-friendly Pages: Optimized printing for order confirmations
- Bookmark Support: Save favorite restaurants and products
- Browser Notifications: Web push notifications for order updates
- Next.js 14+: React framework with SSR and SSG
- React 18+: Modern React with concurrent features
- TypeScript: Type-safe development
- Styled Components: CSS-in-JS styling solution
- Redux: State management for complex interactions
- Server-Side Rendering: Fast initial page loads
- Static Generation: Pre-built pages for better performance
- Image Optimization: Next.js automatic image optimization
- SEO Optimization: Meta tags, structured data, sitemaps
- Core Web Vitals: Optimized for Google's performance metrics
- Hot Reloading: Instant development feedback
- Bundle Analyzer: Optimize bundle sizes
- ESLint & Prettier: Code quality and formatting
- Husky: Pre-commit hooks for code quality
- CI/CD Pipeline: Automated testing and deployment
TamamWebApp/
├── pages/ # Next.js pages and routing
│ ├── _app.js # App configuration
│ ├── _document.js # HTML document structure
│ ├── index.js # Home page
│ ├── restaurants/ # Restaurant pages
│ ├── products/ # Product catalog pages
│ ├── cart/ # Shopping cart
│ └── order/ # Order management
├── src/
│ ├── components/ # Reusable UI components
│ ├── contexts/ # React context providers
│ ├── redux/ # State management
│ ├── api-manage/ # API integration layer
│ ├── styled-components/ # Styled component definitions
│ ├── assets/ # Static assets and images
│ ├── language/ # Internationalization
│ ├── utils/ # Utility functions
│ └── theme/ # Design system and theming
├── public/ # Static files
└── scripts/git/ # Multi-user git workflow
- Node.js 18 or higher
- npm or yarn package manager
- Git for version control
- Modern browser for testing
# Clone the repository
git clone [repository-url]
cd TamamWebApp
# Install dependencies
npm install
# or
yarn install
# Set up environment variables
cp .env.example .env.local
# Run development server
npm run dev
# or
yarn dev
# Build for production
npm run build
npm run start
# Static export
npm run export# .env.local
NEXT_PUBLIC_API_URL=https://api.tamam.krd
NEXT_PUBLIC_FIREBASE_CONFIG={}
NEXT_PUBLIC_GOOGLE_MAPS_KEY=your_maps_key
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id- Arabic (ar): Complete RTL layout with cultural adaptations
- English (en): Left-to-right layout for international users
- Kurdish Sorani (ckb): Native Kurdish language support
- WCAG 2.1 AA Compliance: Web accessibility guidelines
- Screen Reader Support: ARIA labels and semantic HTML
- Keyboard Navigation: Full keyboard accessibility
- High Contrast Mode: Support for visual accessibility
- Text Scaling: Responsive text sizing for readability
- Meta Tags: Dynamic meta descriptions and titles
- Structured Data: Schema.org markup for search engines
- Sitemap Generation: Automatic XML sitemap creation
- Open Graph: Social media sharing optimization
- Canonical URLs: Proper URL canonicalization
// Theme configuration
const theme = {
colors: {
primary: '#FF6B35',
secondary: '#2D3748',
success: '#48BB78',
warning: '#ED8936',
error: '#F56565'
},
typography: {
fontFamily: 'Inter, sans-serif',
sizes: {
sm: '14px',
md: '16px',
lg: '18px',
xl: '24px'
}
}
}- Atomic Design: Atoms, molecules, organisms pattern
- Consistent Spacing: 8px grid system
- Responsive Breakpoints: Mobile-first design approach
- Dark Mode Support: Automatic and manual theme switching
- Animation Library: Smooth micro-interactions
- Lighthouse Score: 95+ performance score target
- Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
- Bundle Size: Optimized JavaScript bundles
- Image Optimization: WebP format with fallbacks
- Caching Strategy: Efficient browser and CDN caching
- Google Analytics: User behavior and conversion tracking
- Custom Events: Cart additions, order completions
- Performance Monitoring: Real user monitoring
- Error Tracking: Client-side error reporting
- A/B Testing: Feature flag and experiment support
- HTTPS Enforcement: Secure connections only
- CSP Headers: Content Security Policy implementation
- XSS Protection: Cross-site scripting prevention
- CSRF Tokens: Cross-site request forgery protection
- Secure Cookies: HttpOnly and Secure cookie flags
- GDPR Compliance: European privacy regulation
- Cookie Consent: User consent for tracking cookies
- Data Minimization: Collect only necessary user data
- Right to Deletion: User data deletion capabilities
- Privacy Policy: Comprehensive privacy documentation
- Vercel Deployment: Optimized Next.js hosting
- Docker Containers: Containerized deployment option
- CDN Integration: Global content delivery network
- Progressive Deployment: Gradual rollout strategies
- Rollback Capabilities: Quick rollback for issues
# Example GitHub Actions workflow
name: Deploy TAMAM Web Portal
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
- name: Setup Node.js
- name: Install dependencies
- name: Run tests
- name: Build application
- name: Deploy to Vercel- Frontend Development:
datacode-mobile(kurdapp.com@gmail.com) - Backend Integration: Laravel API development team
- UI/UX Design: Web design and user experience specialists
- Quality Assurance: Cross-browser and accessibility testing
- DevOps Engineering: Deployment and infrastructure management
Professional multi-user git workflow system:
# Smart commit workflow
./scripts/git/smart-commit.sh
# Automated capabilities:
# - Frontend team user attribution
# - Intelligent commit message generation
# - Conventional commit format compliance
# - Automated code quality checks- App Manifest: Native app-like installation
- Service Worker: Offline functionality and caching
- Push Notifications: Web push notification support
- Background Sync: Offline action synchronization
- App Shell: Fast loading app shell architecture
- Add to Home Screen: Native installation prompt
- Offline Support: Basic functionality without internet
- Update Notifications: Automatic app update prompts
- Cross-platform: Works on desktop and mobile browsers
- Voice Search: Voice-powered product search
- AR Menu Views: Augmented reality food previews
- Live Chat Support: Real-time customer service
- Social Commerce: Social sharing and group orders
- Advanced Personalization: ML-powered recommendations
- Next.js 15: Framework upgrades and new features
- React Server Components: Enhanced server-side rendering
- Edge Computing: Edge function implementations
- WebAssembly: Performance-critical computations
- GraphQL: Advanced API query capabilities
- Help Documentation: Comprehensive user guides
- Video Tutorials: Interactive help videos
- Live Chat: Real-time support integration
- FAQ Section: Common questions and answers
- Contact Forms: Direct support communication
- API Documentation: Backend integration guides
- Component Storybook: Interactive component library
- Development Guidelines: Code standards and practices
- Deployment Guides: Step-by-step deployment instructions
- Troubleshooting: Common issues and solutions
TAMAM Web Portal - Delivering a comprehensive, accessible, and performant web experience for Kurdistan and Iraq's premier delivery platform, connecting communities with local businesses through cutting-edge web technology.