SpotFix is a comprehensive, full-stack frontend application built with Next.js. It serves as a centralized platform connecting customers with professional technicians for various services. The platform features robust role-based access control, offering dedicated dashboards for Admin, Customers, and Technicians, alongside seamless booking management and payment integrations.
🌐 Live Site: spotfix-home.vercel.app 🎥 Demo: Watch a demo video
- Role-Based Dashboards: Completely isolated and secure routing for different user types:
- Admin: Manage users, categories, and oversee all platform bookings.
- Technician: Manage service portfolios, set dynamic availability slots, and track assigned bookings.
- Customer: Browse technicians, book services, and manage payment statuses.
- Dynamic Booking System: Built-in availability slot builder and interactive date-time pickers for precise scheduling.
- Payment Integration: Secure checkout flows with dedicated success and cancellation handling.
- Review System: Customers can leave reviews and ratings for technicians post-service.
- Modern UI/UX: Highly responsive and accessible interfaces built with Shadcn UI, Tailwind CSS, and custom Framer Motion-style animations (Marquee, Hero blocks).
- Dark/Light Mode: Full theming support configured via Next Themes.
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui (Radix UI primitives)
- Data Fetching & State: React Query (TanStack Query) & Axios
- Authentication Management: Custom Auth Provider & Context/Zustand Hooks
- Form Handling & Validation: React Hook Form + Zod (via
lib/validations) - Package Manager: pnpm
The application follows a feature-driven architecture, ensuring scalable and maintainable code.
/(public)- Landing page,/services, and/techniciansdirectories./(auth)-/loginand/registerfor user authentication./(dashboard)/admin- Admin controls (/bookings,/categories,/users)./(dashboard)/customer- Customer portal (/bookings,/bookings/[id]/pay)./(dashboard)/technician- Technician operations (/availability,/bookings,/profile,/services)./payment- Payment gateway callbacks (/success,/cancel).
/features- Encapsulated logic containing API calls, hooks, and types for specific domains (Admin, Bookings, Categories, Payments, Reviews, Services)./components- Reusable UI components, Shadcn primitives, and layout guards (e.g.,role-guard.tsx)./lib- Core utilities, Axios interceptors, and constant values./service&/store- Global state management and token refresh mechanisms.
Follow these steps to set up the project locally.
Ensure you have Node.js installed along with pnpm.
-
Clone the repository: git clone https://github.com/rafiferdos/spotfix.git cd spotfix
-
Install dependencies: pnpm install
-
Set up environment variables: Create a
.env.localfile in the root directory and add your required API endpoints and configuration keys. -
Start the development server: pnpm run dev
-
Open http://localhost:3000 in your browser to view the application.
This project is licensed under the MIT License.
made with love by rafiferdos