Project Description
Live Site: ghazirestaurant.com
Project Type: Food Delivery & Restaurant Management System
Role: Technical Lead / Senior Full Stack Developer
Contribution: 40% coding, 60% team leadership and project managementA feature-rich banking application tailored specifically for corporate users, enabling efficient and secure financial operations within the country
🧑💻 Programming Languages Used
| Language | Purpose |
|---|---|
| JavaScript (ES6+) | Core language for frontend (React, Redux) and backend (Node.js) logic |
| TypeScript | Type-safe development for backend (NestJS) and scalable frontend apps |
| HTML | Structural foundation for UI components |
| CSS / SCSS (SASS) | Styling and responsive design of components |
| JSON | API data formatting and configuration (package.json, tsconfig.json) |
🚀 Tech Stack Overview
| Category | Technology / Tool | Purpose |
|---|---|---|
| Frontend Framework | React.js | Building dynamic and responsive user interfaces |
| State Management | Redux Toolkit / Context API | Managing global app state |
| Routing | React Router | Client-side routing/navigation |
| Styling | TailwindCSS, SCSS | UI design, responsive layout, and utility-based styling |
| Backend Framework | NestJS (Node.js + TypeScript) | Scalable, modular server-side architecture and REST API development |
| Database | MongoDB (with Mongoose) | NoSQL database for storing application data |
| API Communication | Axios / Fetch API | Making HTTP requests between frontend and backend |
| Authentication | JWT, Passport.js | Secure user authentication and authorization |
| Realtime/Chat | Firebase / Socket.IO | Real-time messaging, notifications, and presence |
| Charts & Analytics | Recharts / Chart.js | Admin dashboard data visualization |
| Maps Integration | Google Maps API | Address selection, geolocation, delivery tracking |
| DevOps/Deployment | Docker, GitHub Actions, AWS EC2 | CI/CD, containerization, and cloud hosting |
✅ Summary
Frontend: React.js, TailwindCSS, SCSS, Redux, React Router
Backend: NestJS (Node.js + TypeScript), MongoDB, JWT Auth
Styling: TailwindCSS, SCSS
Languages Used: JavaScript, TypeScript, HTML, CSS/SCSS, JSON
APIs & DevOps: Axios, Firebase, Google Maps API, Docker, AWS
👨💼 My Role & Contribution
I served as the Technical Lead on this project, responsible for both hands-on development and overall project direction:
🧠 60% – Team Leadership & Project Management:
- Defined architecture and module breakdown
Managed task assignments and sprint planning
Conducted code reviews and ensured code quality
Coordinated with the design and backend teams
Oversaw integrations (Firebase, Google Maps, POS)
🧠 💻 40% – Code Contributions:
Built key frontend modules in Vue 3
Integrated TailwindCSS with Laravel Mix
Implemented multilingual support and state management
Worked on dashboard graphs, chat system, and reporting tool.
🛠️ Tech Stack
The platform is built using a modern, scalable, and efficient technology stack, optimized for performance and user experience:
💻 Packages in Frontend:
Vue 3: Modern progressive JavaScript framework for building UI
Vue Router: For routing and page navigation
Vuex: Centralized state management
Vue I18n: Internationalization (Multilingual support: English & Arabic)
TailwindCSS: Utility-first CSS framework for responsive design
Bootstrap 5: Additional styling components
ApexCharts: Interactive dashboard graphs (via
vue3-apexcharts)Swiper: Touch-friendly sliders and carousels
Vue Toastification: Modern toast notification system
Vue Draggable Next: Drag-and-drop UI features
Quill Editor: Rich text editor integration
Vue Datepicker, Select, Print & Alert: Enhancing form UX and reporting
Firebase: Real-time features such as chat with admin
⚙️ Packages in Backend & Build Tools:
Laravel: PHP backend framework (inferred from
laravel-mix)Laravel Mix: Webpack wrapper for asset compilation
PostCSS & SASS: Advanced styling support
Vite: Fast modern build tool for frontend development
📱 Customer Application Features
The customer-facing application offers a rich and user-friendly experience:
Homepage with Banner / Slider
Featured Deals, Items, and Most Popular Products
Categorized Menu & Item Listings
Detailed Descriptions (Short/Long with Info Icon)
Add to Cart & Place Order
Payment Options: Cash on Delivery (COD), POS Machine
Coupon Code Application
Order Management: View Past & Active Orders, Order Details, Live Tracking
Address Book Management
Chat with Restaurant Admin
Account Management: Profile, Password
Multilingual Interface (English & Arabic)
🛠️ Admin Panel Features
The admin dashboard provides full control over operations with multiple modules:
Graphical Dashboard: Statistics for Orders, Revenue, Customers
Item & Menu Management
Customer & Delivery Staff Management
Employee & User Role Management
Module Configuration
Deals, Coupons & Offers Management
Online Order Management
Push Notifications & Messaging
Subscriber List Management
Reports: Orders, Items, Customers
System Settings & Configuration
