Attendance App

? Attendance App — Styles Dispatch EG

من المشاريع اللي فخور جدًا إني نفذتها ضمن شغلي في Styles Dispatch EG كـ Front-End Engineer.

المشروع هدفه إنشاء نظام تسجيل حضور وانصراف (Attendance System) داخلي للموظفين بطريقة بسيطة وسريعة وسهلة الاستخدام.

? فكرة المشروع:

تطبيق Attendance App بيسمح للموظفين بتسجيل الحضور والانصراف إلكترونيًا،

وبيتيح للإدارة متابعة حالة كل موظف في الوقت الفعلي من واجهة سهلة وواضحة.

⚙️ التقنيات المستخدمة:

Next.js (App Router) — لبناء صفحات منظمة وسريعة.

TypeScript — لكتابة كود آمن وسهل الصيانة.

Tailwind CSS — لتصميم واجهة متجاوبة واحترافية.

React Context API — لإدارة الحالة بشكل مركزي داخل التطبيق.

LocalStorage — لتخزين بيانات المستخدمين وجلسات الدخول.

React Hot Toast — للإشعارات الفورية والتفاعل مع المستخدم.

Vercel — لنشر التطبيق وتشغيله أونلاين.

? المميزات الأساسية (Features):

نظام تسجيل دخول آمن يعتمد على LocalStorage.

Dashboard للإدارة لعرض الموظفين وحالتهم اليومية (حاضر / غائب).

إمكانية تسجيل الحضور والانصراف بسهولة.

إشعارات تفاعلية عند نجاح أو فشل العملية.

واجهة متجاوبة بالكامل لجميع الشاشات (موبايل – تابلت – كمبيوتر).

تصميم بسيط وسريع الأداء يسهل استخدامه من كل أفراد الفريق.

? دوري في المشروع:

تطوير الواجهة الأمامية بالكامل باستخدام Next.js + TypeScript.

بناء نظام الحالة باستخدام React Context API.

إدارة الجلسات وتخزين بيانات المستخدمين عبر LocalStorage.

تصميم وتطوير واجهة المستخدم (UI/UX) باستخدام Tailwind CSS.

إعداد نظام الإشعارات وتنسيق تجربة المستخدم.

نشر المشروع عبر Vercel ليكون متاح داخل الشركة.

? النتيجة:

النظام حالياً معتمد رسميًا في الشركة

وبيُستخدم يوميًا لتسجيل حضور وانصراف الموظفين،

وساهم في تسهيل عملية المتابعة وتقليل الأخطاء اليدوية.