Oh Shift Banner

Oh Shift

Oh-Shift is a modern employee shift scheduling web application designed to streamline workforce management with an intuitive and interactive experience. Built with Next.js, TypeScript, Tailwind CSS, Prisma, and MongoDB, this full-featured scheduling tool allows managers to effortlessly assign employees to shifts using a drag-and-drop interface powered by FullCalendar and DnD-Kit. Employees can view their assigned shifts in real-time, while managers benefit from dynamic schedule tracking, role-based access control (NextAuth), and an elegant UI with a custom light/dark theme. The system ensures seamless database interactions using Prisma ORM, with optimistic UI updates for a smooth user experience. Designed with scalability and usability in mind, Oh-Shift demonstrates my ability to build efficient, well-structured, and visually polished web applications tailored for real-world business needs.

Next.jsTypeScriptReactTailwind CSSFullCalendarPrismaMongoDBNextAuth.jsDnD-KitFramer Motion

Preview

Project Image 1
Project Image 2
Project Image 3
Project Image 4

Features

Dynamic Shift Scheduling: Easily create, update, and manage employee shifts using a seamless drag-and-drop interface with real-time feedback.
Role-Based Access Control: Managers can create and assign shifts, while employees have read-only access to their schedules for a secure and streamlined experience.
Google and GitHub Authentication: Secure login for managers using NextAuth.js with support for Google and GitHub authentication providers.
Interactive FullCalendar Integration: Integrated with FullCalendar to display shifts in a professional weekly time-grid format, with detailed event popups on hover.
Mobile-Friendly Design: Fully responsive and optimized for mobile devices, allowing users to manage and view schedules effortlessly on any screen size.
Optimistic UI and Real-Time Updates: Instant UI feedback when adding, updating, or deleting employees and shifts, ensuring a smooth and efficient workflow.