The Skilled Artisan Marketplace is a platform that connects customers with artisans, service providers, and businesses offering specialized services and products. The platform enables artisans and businesses to create profiles, list their services/products, manage bookings/orders, and engage with customers. Customers can discover, book, and purchase services/products while leaving reviews and ratings for quality assurance.
This PRD incorporates the updated database schema, which includes new features such as business profiles, wallet functionality, audit trails, and notifications. These additions enhance the platform's scalability, user experience, and operational transparency.
- Registration/Login: Create an account via email, phone, or social media.
- Search/Discovery:
- Search for services/products by keyword, category, or business name.
- Filter results by price, rating, location, and availability.
- Booking/Purchase:
- Book a service (select date/time, confirm payment).
- Purchase a product (add to cart, checkout securely).
- Order Tracking: View order status (pending, completed, cancelled).
- Reviews: Leave feedback and ratings for businesses/services/products.
- Notifications: Receive updates on orders, payments, promotions, and system alerts.
- Registration/Login: Create an account via email, phone, or social media.
- Profile Setup:
- Add personal/business details, profile picture, and address.
- Upload certifications, portfolio images/videos, and business documents (e.g., tax ID, registration number).
- Service/Product Management:
- List/edit services/products with pricing, descriptions, categories, and tags.
- Manage stock levels for products and availability slots for services.
- Orders/Bookings: View and manage incoming orders/bookings.
- Earnings & Wallet: Track earnings and withdraw funds from the user wallet.
- Notifications: Receive updates on bookings, messages, reviews, and promotions.
- Dashboard: Monitor users, orders, disputes, revenue, and audit trails.
- Content Moderation: Approve/reject business profiles, services, and products.
- User Management: Ban/suspend users for policy violations.
- Analytics: Generate reports on sales, user growth, popular services/products, and featured businesses.
- Framework: Next.js 15
- State Management: Zustand
- Validation: Zod
- Styling: Shadcn UI + Tailwind CSS
- Notifications: React Toastify
- Framework: Next.js API Routes
- Database: Supabase (PostgreSQL + real-time capabilities)
- Authentication: Supabase Auth (email, phone, or social media login)
- File Storage: Supabase Storage (for images/videos)
- Stripe integration for secure payments
- Wallet functionality for user balance management
- Maps: Google Maps API or Mapbox for location-based search
- Notifications: Twilio (SMS), SendGrid (email)
- Vercel (optimized for Next.js deployment)
- CDN: Cloudflare for media optimization
- HTTPS encryption
- Data encryption (AES-256 for sensitive info)
- GDPR compliance
- Registration/Login: Email, phone, or social media (via Supabase Auth).
- Profile Management:
- Customers: Basic info, preferences, and wallet balance.
- Artisans/Businesses: Personal/business details, profile picture, certifications, portfolio, and shop policies.
- Verification: ID upload and skill validation for artisans; document verification for businesses.
- Businesses can create detailed profiles with information such as business type, website, social media handles, opening hours, delivery options, and return policies.
- Featured businesses are highlighted based on admin approval and performance metrics.
- Artisans/Businesses can list services/products with detailed descriptions, pricing, categories, and tags.
- Products include stock quantity and image uploads.
- Services include availability slots and booking options.
- Search/filter businesses/services/products by keyword, category, location, price, and ratings.
- Tag-based filtering for more granular classification.
- Service booking system (date/time selection).
- Secure checkout (Stripe integration for card, PayPal, mobile money).
- Order tracking (status: pending/completed/cancelled).
- Users have a wallet balance for storing credits or refunds.
- Payments can be made directly from the wallet or topped up via Stripe.
- Customers can leave reviews/ratings for businesses/services/products.
- Average ratings and review counts are displayed on business profiles.
- In-app notifications for order updates, payment statuses, promotions, and system alerts.
- Email/SMS notifications via SendGrid/Twilio.
- Track all actions and changes made by users/admins (e.g., profile updates, order cancellations, business approvals).
- Monitor users, orders, disputes, and revenue.
- Approve/reject business profiles, services, and products.
- Generate analytics reports on sales, user growth, and featured businesses.
- Users: Stores customer, artisan, and admin profiles. Includes fields for wallet balance, last login, and business association.
- Businesses: Represents businesses with detailed information such as business type, tax ID, and social media links.
- Services/Products: Links businesses to their offerings with categories, tags, and pricing.
- Orders/Payments: Tracks orders, payments, and statuses.
- Reviews: Allows customers to rate businesses/services/products.
- Notifications: Stores in-app and email/SMS notifications.
- Audit Trails: Logs all user/admin actions for transparency.
- Business Profiles: Detailed profiles for businesses with featured status and performance metrics.
- Wallet Functionality: User wallets for storing credits and making payments.
- Tags: Enhanced classification of services/products using tags.
- Audit Trails: Comprehensive logging of user/admin actions.
- User authentication (registration/login).
- Profile management for customers, artisans, and businesses.
- Service/product creation/editing.
- Search and discovery features.
- Booking and secure checkout system.
- Review and rating system.
- Wallet functionality for payments.
- Admin dashboard for monitoring and moderation.
- Shop builder (custom templates).
- Blog system for artisans.
- Gamification (badges, leaderboards, loyalty points).
- Multi-language/currency support.
- Mobile app development.
- AI recommendations and live workshops.
- Finalize wireframes/mockups for key pages (registration, profile setup, service/product listing, search results, checkout).
- Develop backend APIs using Next.js API routes and Supabase.
- Build frontend components using Shadcn UI and Tailwind CSS.
- Integrate third-party APIs (payments, maps, notifications).
- Conduct testing (unit, integration, and user acceptance testing).
The landing page is the first screen users see when they open the app. It has a clean design with a hero section at the top that explains what the platform does: connecting customers with skilled artisans and businesses. Below the hero section, there are two prominent buttons: "Sign Up" and "Log In."
Below the buttons, there is a brief introduction to the platform's features, such as finding artisans, booking services, and buying products. At the bottom of the page, there are links to navigate to other sections like "About Us," "Contact," and "FAQs."
Users can move to the registration page by clicking "Sign Up" or to the login page by clicking "Log In." There is also a small footer at the bottom with links to terms of service and privacy policy.
The registration page allows new users to create an account. At the top of the page, there is a title that says "Create Your Account." Below the title, there are three options for signing up: email, phone number, or social media (Google/Facebook).
If users choose email or phone, they need to enter their details in a form that includes fields for first name, last name, email/phone, and password. After submitting the form, they receive a verification link or code to confirm their account.
Once registered, users are redirected to the profile setup page if they are artisans or businesses or to the homepage if they are customers.
The login page is for existing users to access their accounts. At the top of the page, there is a title that says "Welcome Back." Below the title, there is a form where users can enter their email/phone and password.
If users forget their password, there is a "Forgot Password" link below the form that sends a reset link to their email. After logging in, artisans and businesses are taken to their dashboard, and customers are taken to the homepage.
This page is specifically for artisans and businesses to complete their profiles after registration. At the top of the page, there is a title that says "Complete Your Profile."
The page is divided into sections. The first section is for personal/business details, including fields for uploading a profile picture, entering a bio, and adding contact information like phone number and address.
The second section is for certifications and portfolio uploads. Artisans can upload images or videos of their work, while businesses can upload documents like tax IDs or registration numbers.
The third section is for shop policies, such as return policies or delivery terms. Once the profile is complete, artisans and businesses are redirected to their dashboard where they can manage their services and products.
The homepage is the main screen for all users. For customers, it displays a search bar at the top where they can type keywords like "carpenter" or "pottery." Below the search bar, there are featured artisans and popular services/products.
In the middle of the page, there are categories like "Home Improvement," "Crafts," or "Art." Each category has a grid of images and titles linking to specific services or products.
At the bottom of the page, there is a footer with links to "About Us," "Contact," and "FAQs." From the homepage, customers can navigate to the search results page by entering a keyword or selecting a category. Artisans and businesses can access their dashboard from the navigation menu.
The search results page shows a list of artisans, businesses, services, or products based on the user's query. Each result includes the artisan's/business's name, profile picture, ratings, and location.
On the left side of the page, there are filters for narrowing down results by price, availability, ratings, or tags. On the right side, there is a map showing the locations of the results.
Users can click on an artisan's/business's profile to view more details or directly book a service or purchase a product. If no results are found, a message saying "No Results Found" appears, along with a suggestion to refine the search.
The artisan/business profile page provides detailed information about an artisan or business. At the top of the page, there is the artisan's/business's profile picture, name, and rating.
Below the profile picture, there is a bio section, followed by a section for certifications, portfolio images/videos, and shop policies. Below that, there is a section for their services and products. Services are listed with titles, descriptions, pricing, and duration. Products include images, descriptions, and prices.
Customers can book a service or add a product to their cart from this page. They can also leave reviews if they have previously interacted with the artisan/business. There is a "Contact" button that opens a modal for sending messages.
When customers click on a service, they are taken to the service booking page. At the top of the page, there is the service title and description. Below that, there is a calendar for selecting available booking slots.
To the right of the calendar, there is a summary of the service, including pricing and duration. Customers can select a date and time from the calendar and proceed to checkout.
After confirming the booking, customers are redirected to the order confirmation page.
When customers click on a product, they are taken to the product purchase page. At the top of the page, there is the product image and description. Below that, there is a section for selecting the quantity and adding the product to the cart.
To the right of the product details, there is a summary of the product, including pricing and stock availability. If the product is out of stock, a message saying "Out of Stock" appears.
If customers proceed to checkout, they are taken to the payment page.
The cart page displays all the products that customers have added. Each item shows the product image, name, quantity, and price. There is a total amount at the bottom, and customers can update quantities or remove items.
From here, customers can proceed to the payment page or continue shopping by returning to the homepage. There is also a "Clear Cart" button that removes all items from the cart.
The payment page is where customers enter their payment details. At the top of the page, there is a title that says "Secure Checkout." Below that, there is a form for entering payment information, such as credit card details or PayPal credentials.
To the right of the form, there is a summary of the order, including the service/product details and total amount. There is also an option to pay using wallet balance if available.
After completing the payment, customers are redirected to the order confirmation page.
The order confirmation page confirms that the booking or purchase was successful. At the top of the page, there is a title that says "Order Confirmed." Below that, there is the order details, including the service/product name, price, and booking/purchase date.
There is also an order ID for reference. Customers can return to the homepage or view their order history from this page. A "Thank You" message appears at the bottom.
The artisan/business dashboard is the central hub for managing activities. At the top of the page, there is a greeting message like "Welcome Back, [Name]." Below that, there is a summary of recent activity, such as new orders or messages.
The page is divided into sections. The first section is for managing services and products, where artisans/businesses can add/edit/delete listings. The second section is for tracking earnings and wallet balance.
The third section is for viewing and responding to notifications. From the dashboard, artisans/businesses can also update their profiles or log out.
The admin dashboard is accessible only to administrators. At the top of the page, there is a title that says "Admin Dashboard." Below that, there is a summary of platform activity, including user statistics, order counts, and revenue.
The page is divided into sections. The first section is for approving/rejecting business profiles, services, and products. The second section is for managing users, including banning or suspending accounts.
The third section is for generating reports on sales, user growth, and featured businesses. Admins can navigate to detailed reports or manage disputes from this page.
The notifications page displays updates for both artisans/businesses and customers. For artisans/businesses, it shows new bookings, messages, and reviews. For customers, it shows order updates, promotions, and reminders.
Each notification includes a timestamp and a short description. Users can click on a notification to view more details or take action, such as confirming a booking or leaving a review.
The settings page allows users to update their account information, such as email, phone number, or password. At the top of the page, there is a title that says "Account Settings."
Below that, there are sections for updating personal details, changing passwords, and managing payment methods. Artisans/businesses can also update their shop policies or payment details.
From this page, users can log out or delete their accounts if needed.
The order tracking page shows the status of a customer's orders. Each order has a unique ID and status, such as pending, completed, or cancelled. For services, it shows the booking date and artisan/business details. For products, it shows the shipping status and estimated delivery date.
Customers can leave reviews once the order is completed. There is also a "Contact Seller" button that opens a modal for sending messages.
After completing a service or receiving a product, customers can leave a review. At the top of the page, there is a title that says "Leave a Review." Below that, there is a rating system with stars and a text box for writing feedback.
Once submitted, the review appears on the artisan's/business's profile page. A confirmation message appears at the bottom saying "Thank You for Your Feedback."
These informational pages provide details about the platform, contact information, and answers to common questions. They are accessible from the footer of most pages.
The "About Us" page includes the platform's mission and vision. The "Contact" page includes a form for sending inquiries. The "FAQs" page includes a list of frequently asked questions and answers.
Users can navigate back to the homepage or contact support from these pages.
If something goes wrong, such as a broken link or server issue, users are redirected to the error page. At the top of the page, there is a title that says "Oops, Something Went Wrong." Below that, there is a message explaining the problem and providing options to return to the homepage or contact support.
The admin dashboard is a centralized hub for managing all data in the platform. It allows admins to perform CRUD (Create, Read, Update, Delete) operations on every section of the database, including users, businesses, services, tags, categories, orders, products, and more. Each section or module has its own dedicated section in the dashboard navigation with sub-menu items for specific actions.
Below is a detailed breakdown of each page and its functionality.
This is the first page admins see when they log in. At the top of the page, there is a title that says "Admin Dashboard." Below that, there are summary widgets displaying key metrics:
- User Statistics: Total users, broken down by type (customers, artisans, businesses, admins).
- Order Statistics: Total orders placed, completed, pending, and cancelled.
- Revenue Statistics: Total revenue generated, broken down by services and products.
- Featured Businesses: A list of businesses marked as "featured" with their performance metrics (e.g., ratings, sales).
At the bottom of the page, there is a section for recent activity, such as new user registrations, order updates, and flagged content.
From this page, admins can navigate to other sections of the dashboard using a sidebar menu.
- View Users
- Add New User
- Edit User
- Delete User
Displays a table of all users with filters for searching by name, email, phone, role, or status. Columns include:
- User ID: Unique identifier for each user.
- Name: First and last name of the user.
- Email/Phone: Contact details of the user.
- Role: Customer, artisan, business, or admin.
- Status: Active, suspended, or banned.
- Actions: Buttons for viewing details, editing, or deleting the user.
A form for creating a new user account. Fields include:
- First Name
- Last Name
- Email/Phone
- Password
- Role (dropdown: customer, artisan, business, admin)
- Profile Picture (optional upload)
A form pre-filled with the selected user's details. Admins can update any field, including role and status.
A confirmation modal appears before deleting a user. Deleted users are permanently removed from the database unless otherwise configured.
- View Businesses
- Add New Business
- Edit Business
- Delete Business
Displays a table of all businesses with filters for searching by name, owner, or status. Columns include:
- Business ID: Unique identifier for each business.
- Business Name: Name of the business.
- Owner Name: Name of the user who owns the business.
- Status: Pending, approved, or rejected.
- Actions: Buttons for viewing details, editing, or deleting the business.
A form for creating a new business profile. Fields include:
- Business Name
- Business Type (dropdown: freelancer, agency, store, other)
- Tax ID (optional)
- Registration Number (optional)
- Website URL (optional)
- Address Details (house number, street, city, state, country, ZIP code)
- Social Media Links (Twitter, Facebook, Instagram)
- Opening/Closing Hours
- Delivery Options
- Return Policy
A form pre-filled with the selected business's details. Admins can update any field, including status.
A confirmation modal appears before deleting a business. Deleting a business also removes its associated services and products.
- View Services
- Add New Service
- Edit Service
- Delete Service
Displays a table of all services with filters for searching by name, category, or owner. Columns include:
- Service ID: Unique identifier for each service.
- Service Name: Name of the service.
- Category: Category of the service.
- Owner: Name of the artisan/business who listed it.
- Price: Price of the service.
- Status: Active or inactive.
- Actions: Buttons for viewing details, editing, or deleting the service.
A form for creating a new service listing. Fields include:
- Service Name
- Description
- Category (dropdown)
- Tags (multi-select dropdown)
- Price
- Duration
- Availability Slots
A form pre-filled with the selected service's details. Admins can update any field, including status.
A confirmation modal appears before deleting a service. Deleting a service also removes its associated bookings.
- View Products
- Add New Product
- Edit Product
- Delete Product
Displays a table of all products with filters for searching by name, category, or owner. Columns include:
- Product ID: Unique identifier for each product.
- Product Name: Name of the product.
- Category: Category of the product.
- Owner: Name of the artisan/business who listed it.
- Price: Price of the product.
- Stock Quantity: Available stock quantity.
- Status: Active or inactive.
- Actions: Buttons for viewing details, editing, or deleting the product.
A form for creating a new product listing. Fields include:
- Product Name
- Description
- Category (dropdown)
- Tags (multi-select dropdown)
- Price
- Stock Quantity
- Image Upload
A form pre-filled with the selected product's details. Admins can update any field, including status.
A confirmation modal appears before deleting a product. Deleting a product also removes its associated orders.
- View Tags
- Add New Tag
- Edit Tag
- Delete Tag
- View Categories
- Add New Category
- Edit Category
- Delete Category
Displays a table of all tags with columns for:
- Tag ID: Unique identifier for each tag.
- Tag Name: Name of the tag.
- Actions: Buttons for editing or deleting the tag.
A form for creating a new tag. Fields include:
- Tag Name
A form pre-filled with the selected tag's details.
A confirmation modal appears before deleting a tag.
Displays a table of all categories with columns for:
- Category ID: Unique identifier for each category.
- Category Name: Name of the category.
- Description: Description of the category.
- Actions: Buttons for editing or deleting the category.
A form for creating a new category. Fields include:
- Category Name
- Description
A form pre-filled with the selected category's details.
A confirmation modal appears before deleting a category.
- View Orders
- Edit Order
- Delete Order
Displays a table of all orders with filters for searching by order ID, customer name, or artisan/business name. Columns include:
- Order ID: Unique identifier for each order.
- Customer Name: Name of the customer who placed the order.
- Artisan/Business Name: Name of the artisan/business providing the service/product.
- Order Type: Service or product.
- Status: Pending, in progress, completed, or cancelled.
- Total Amount: Total amount paid for the order.
- Actions: Buttons for viewing details or editing the order.
A form pre-filled with the selected order's details. Admins can update the order status or resolve disputes.
A confirmation modal appears before deleting an order. Deleting an order refunds the customer if applicable.
- View Analytics
- Generate Reports
Interactive charts and graphs displaying key metrics:
- Sales Trends
- Popular Categories
- User Growth
- Featured Businesses
A form for generating custom reports. Admins can select filters like date range, user type, or category to generate downloadable CSV reports.
- Send Notifications
- View Notification Logs
A form for sending system-wide notifications. Fields include:
- Notification Type
- Message
- Target Audience
A table of all sent notifications with columns for:
- Notification ID: Unique identifier for each notification.
- Message: Text of the notification.
- Target Audience: All users, customers, artisans, or businesses.
- Timestamp: Date and time of the notification.
- View Audit Trails
A table of all logged actions with filters for searching by user ID, action type, or date range. Columns include:
- Log ID: Unique identifier for each log entry.
- User ID: ID of the user who performed the action.
- Action Type: Create, update, delete, login, logout, etc.
- Table Name: Name of the table affected by the action.
- Record ID: ID of the record affected by the action.
- Timestamp: Date and time of the action.
- General Settings
- Payment Settings
- Notification Settings
- Security Settings
Fields for updating platform-wide settings like name, logo, and default language.
Fields for configuring payment gateways like Stripe API keys.
Fields for setting up default notification templates and delivery methods.
Fields for configuring password policies, IP whitelisting, and two-factor authentication.
The design system for the Skilled Artisan Marketplace is modern and minimalistic, focusing on clean lines, simplicity, and usability. The visual identity is bold yet sophisticated, with a yellow-and-black color palette that conveys energy and professionalism. Typography, spacing, and layout rules are carefully defined to ensure clarity and consistency across the platform.
- Font Family: "Inter" (Free, open-source font optimized for readability)
- Usage:
- Headings:
font-weight: 700(Bold) - Subheadings:
font-weight: 600(Semi-Bold) - Body Text:
font-weight: 400(Regular) - Captions & Labels:
font-weight: 500(Medium)
- Headings:
"Roboto", sans-serif
- Headings:
- H1:
3rem(for hero titles) - H2:
2.25rem(for section titles) - H3:
1.75rem(for sub-section titles)
- H1:
- Body Text:
- Large:
1.25rem(for important descriptions) - Medium:
1rem(default body text) - Small:
0.875rem(for captions, labels, and fine print)
- Large:
- Yellow:
#FFC107(Bold, energetic accent color) - Black:
#121212(Sophisticated, professional base color)
- White:
#FFFFFF(Backgrounds, text contrast) - Gray:
#F5F5F5(Subtle backgrounds, borders) - Dark Gray:
#616161(Secondary text, muted elements)
- Hover State:
#FFD740(Lighter yellow for hover effects) - Active State:
#FFA000(Darker yellow for active states) - Error:
#D32F2F(Red for errors or warnings) - Success:
#388E3C(Green for success messages)
Use an 8-point grid system for consistent spacing:
8px,16px,24px,32px,40px, etc.
- Default margin between sections:
32px - Default padding inside components:
16px - Tight spacing for compact elements:
8px
- Use a 12-column responsive grid system for layouts.
- Max-width for content containers:
1200px - Horizontal padding on pages:
24px(on mobile),40px(on desktop)
- Mobile:
max-width: 640px - Tablet:
min-width: 641px and max-width: 1024px - Desktop:
min-width: 1025px
- Shadcn UI: Pre-built, customizable components built on Tailwind CSS.
- Tailwind CSS: Utility-first CSS framework for rapid styling.
- Lucide React: Scalable and customizable icons with a modern aesthetic.
- Small:
16px(for buttons, input fields) - Medium:
24px(for navigation, cards) - Large:
32px(for hero sections, empty states)
- Primary Button:
- Background:
#FFC107(Yellow) - Text:
#121212(Black) - Hover:
#FFD740 - Active:
#FFA000
- Background:
- Secondary Button:
- Background:
#121212(Black) - Text:
#FFFFFF(White) - Hover:
#333333 - Active:
#000000
- Background:
- Default Link Color:
#FFC107 - Hover: Underline +
#FFD740
- Border:
1px solid #F5F5F5 - Focus:
border-color: #FFC107 - Placeholder Text:
#616161
- Subtle Shadow:
0px 4px 6px rgba(0, 0, 0, 0.1) - Elevated Shadow:
0px 8px 12px rgba(0, 0, 0, 0.15)
- Primary Gradient:
linear-gradient(90deg, #FFC107, #FFA000) - Use sparingly for call-to-action buttons or hero sections.
- Use high-quality, professional imagery that aligns with the marketplace’s identity.
- Aspect Ratio:
16:9for banners,1:1for profile pictures and product images.
- Use embedded videos for artisan portfolios or tutorials.
- Ensure videos are optimized for fast loading.
- Text on background: Minimum 4.5:1 contrast ratio.
- Interactive elements: Minimum 3:1 contrast ratio.
- Ensure all interactive elements (buttons, links, forms) are accessible via keyboard.
- Add proper
aria-*attributes to all interactive components.
- Next.js 15: Full-stack React framework for building the frontend and backend.
- Zustand: Lightweight state management library for managing global state (e.g., user authentication, shopping cart).
- Zod: Schema-based validation library for forms and API responses.
- Tailwind CSS: Utility-first CSS framework for styling components.
- Shadcn UI: Pre-built, customizable UI components built on top of Tailwind CSS.
- Tables: tanstack, with filters, actions, etc.
- React Toastify: Library for displaying in-app notifications (e.g., success/error messages).
- Lucide React: Icon library for consistent and scalable icons.
- Next.js API Routes: Serverless functions within Next.js for handling backend logic.
- Supabase: Open-source alternative to Firebase, providing PostgreSQL database, authentication, and storage.
- Supabase Auth: Handles email, phone, and social media login (Google/Facebook).
- Supabase Storage: For storing images, videos, and other media files.
- Stripe: Secure payment processing for services and products.
- Supabase Triggers: Use PostgreSQL triggers in Supabase to implement escrow functionality for service-based transactions.
- Mapbox: For location-based search and artisan discovery.
- Twilio: For sending SMS notifications (e.g., order updates).
- SendGrid: For sending email notifications (e.g., booking confirmations).
- Vercel: Optimized hosting for Next.js applications.
- Cloudflare: Content Delivery Network for optimizing media and static assets.
- HTTPS: Enabled by default on Vercel.
- Data Encryption: AES-256 encryption for sensitive data stored in Supabase.
- GDPR Compliance: Ensure all user data is handled according to GDPR standards.
- Axios: HTTP client for making API requests.
- React Query: For managing server state and caching API responses.
- Jest: JavaScript testing framework for unit and integration tests.
- React Testing Library: For testing React components.
- ESLint: Linting tool for enforcing code quality.
- Prettier: Code formatting tool for consistent styling.
{
"dependencies": {
"next": "^15.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"zustand": "^4.0.0",
"zod": "^3.0.0",
"tailwindcss": "^3.0.0",
"@shadcn/ui": "^1.0.0",
"react-toastify": "^9.0.0",
"axios": "^1.0.0",
"@tanstack/react-query": "^4.0.0"
},
"devDependencies": {
"eslint": "^8.0.0",
"prettier": "^3.0.0",
"jest": "^29.0.0",
"@testing-library/react": "^14.0.0"
}
}- Supabase: Supabase Dashboard
- Stripe: Stripe Dashboard
- Twilio: Twilio Console
- SendGrid: SendGrid Dashboard
- Mapbox: Mapbox Studio
The database schema has been updated to include the features from the provided DBML. Below is the revised schema for all tables, including their columns, relationships, and constraints.
Stores user information for customers, service providers, and admins.
- Columns:
id(Primary Key, UUID): Unique identifier for each user.first_name(String): User's first name.last_name(String): User's last name.email(String, Unique): User's email address.phone_number(String, Unique, Not Null): User's phone number.password_hash(String): Hashed password (managed by Supabase Auth).user_type(Enum: "customer", "service_provider", "admin"): Defines the user's role.created_at(Timestamp): Timestamp of account creation.updated_at(Timestamp): Timestamp of the last update.profile_picture_url(String): URL of the user's profile picture.address(Text): User's address.date_of_birth(Date): User's date of birth.is_active(Boolean): Indicates if the user is active.last_login(Timestamp): Timestamp of the last login.description(Text): Personal description for users.business_id(Foreign Key, UUID, Nullable): Referencesidin thebusinessestable (if applicable).
Represents businesses in the marketplace.
- Columns:
id(Primary Key, UUID): Unique identifier for each business.business_name(String, Not Null): Name of the business.business_type(Enum: "freelancer", "agency", "store", "other"): Type of business.tax_id(String, Nullable): Tax ID of the business.reg_no(String, Nullable): Registration number of the business.website_url(String, Nullable): Business website URL.house_number(String, Nullable): House number of the business address.street(String, Nullable): Street of the business address.city(String, Not Null): City of the business address.state(String, Not Null): State of the business address.country(String, Nullable): Country of the business address.zip_code(String, Nullable): ZIP code of the business address.description(Text, Nullable): Business description.owner_id(Foreign Key, UUID): Referencesidin theuserstable.twitter(String, Nullable): Twitter handle of the business.facebook(String, Nullable): Facebook page URL of the business.instagram(String, Nullable): Instagram handle of the business.email(String, Nullable): Business email address.phone(String, Nullable): Business phone number.secondary_phone(String, Nullable): Secondary business phone number.opening_hours(String, Nullable): Opening hours of the business.closing_hours(String, Nullable): Closing hours of the business.delivery_options(String, Nullable): Delivery options offered by the business.return_policy(Text, Nullable): Return policy of the business.is_featured(Boolean): Indicates if the business is featured.ratings_count(Integer): Number of ratings for the business.average_rating(Decimal(3,2)): Average rating of the business (1 to 5).avatar(String, Nullable): URL of the business avatar image.banner(String, Nullable): URL of the business banner image.created_at(Timestamp): Timestamp of business creation.updated_at(Timestamp): Timestamp of the last update.
Links businesses to the services they offer.
- Columns:
id(Primary Key, UUID): Unique identifier for each record.business_id(Foreign Key, UUID): Referencesidin thebusinessestable.service_id(Foreign Key, UUID): Referencesidin theservicestable.created_at(Timestamp): Timestamp of record creation.updated_at(Timestamp): Timestamp of the last update.
Links businesses to the products they sell.
- Columns:
id(Primary Key, UUID): Unique identifier for each product.business_id(Foreign Key, UUID): Referencesidin thebusinessestable.product_name(String, Not Null): Name of the product.description(Text): Description of the product.price(Numeric): Price of the product.stock_quantity(Integer): Available stock quantity.image_url(String, Nullable): URL of the product image.category_id(Foreign Key, UUID): Referencesidin thecategoriestable.created_at(Timestamp): Timestamp of product creation.updated_at(Timestamp): Timestamp of the last update.
Represents different types of services offered by service providers.
- Columns:
id(Primary Key, UUID): Unique identifier for each service.name(String, Not Null): Name of the service.description(Text): Description of the service.category_id(Foreign Key, UUID): Referencesidin thecategoriestable.created_at(Timestamp): Timestamp of service creation.updated_at(Timestamp): Timestamp of the last update.
Categories for services and products (e.g., "Home Cleaning", "Web Design").
- Columns:
id(Primary Key, UUID): Unique identifier for each category.name(String, Unique, Not Null): Name of the category.description(Text): Description of the category.created_at(Timestamp): Timestamp of category creation.updated_at(Timestamp): Timestamp of the last update.
Tags associated with services and products for more detailed classification.
- Columns:
id(Primary Key, UUID): Unique identifier for each tag.name(String, Unique, Not Null): Name of the tag.created_at(Timestamp): Timestamp of tag creation.updated_at(Timestamp): Timestamp of the last update.
Links services to tags.
- Columns:
service_id(Foreign Key, UUID): Referencesidin theservicestable.tag_id(Foreign Key, UUID): Referencesidin thetagstable.created_at(Timestamp): Timestamp of record creation.
Links products to tags.
- Columns:
product_id(Foreign Key, UUID): Referencesidin thebusiness_productstable.tag_id(Foreign Key, UUID): Referencesidin thetagstable.created_at(Timestamp): Timestamp of record creation.
Represents orders placed by customers for services/products.
- Columns:
id(Primary Key, UUID): Unique identifier for each order.customer_id(Foreign Key, UUID): Referencesidin theuserstable.service_listing_id(Foreign Key, UUID): Referencesidin theservicestable.business_id(Foreign Key, UUID): Referencesidin thebusinessestable.order_status(Enum: "pending", "in_progress", "completed", "cancelled"): Order status.order_date(Timestamp): Timestamp of order placement.start_date(Timestamp): Start date of the service (if applicable).end_date(Timestamp): End date of the service (if applicable).total_amount(Numeric): Total amount of the order.payment_status(Enum: "unpaid", "paid", "failed"): Payment status.created_at(Timestamp): Timestamp of order creation.updated_at(Timestamp): Timestamp of the last update.
Tracks payments made for orders.
- Columns:
id(Primary Key, UUID): Unique identifier for each payment.order_id(Foreign Key, UUID): Referencesidin theorderstable.payment_method(Enum: "credit_card", "paypal", "bank_transfer", "wallet"): Payment method.amount(Numeric): Amount paid.payment_status(Enum: "successful", "failed", "pending"): Payment status.transaction_id(String): Transaction ID from the payment gateway.payment_date(Timestamp): Timestamp of payment.created_at(Timestamp): Timestamp of payment record creation.updated_at(Timestamp): Timestamp of the last update.
Allows customers to leave reviews for businesses/services.
- Columns:
id(Primary Key, UUID): Unique identifier for each review.order_id(Foreign Key, UUID): Referencesidin theorderstable.reviewer_id(Foreign Key, UUID): Referencesidin theuserstable.business_id(Foreign Key, UUID): Referencesidin thebusinessestable.rating(Integer, Check: 1–5): Rating from 1 to 5.review_text(Text): Review text.created_at(Timestamp): Timestamp of review creation.updated_at(Timestamp): Timestamp of the last update.
Stores notifications for users regarding orders, payments, etc.
- Columns:
id(Primary Key, UUID): Unique identifier for each notification.user_id(Foreign Key, UUID): Referencesidin theuserstable.notification_type(Enum: "order_update", "payment_status", "service_offers", "promotions", "system"): Notification type.message(Text): Notification message.read_status(Boolean): Indicates if the notification has been read.created_at(Timestamp): Timestamp of notification creation.updated_at(Timestamp): Timestamp of the last update.
CREATE TABLE users (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
first_name VARCHAR(255),
last_name VARCHAR(255),
email VARCHAR(255) UNIQUE NOT NULL,
phone_number VARCHAR(20) UNIQUE NOT NULL,
password_hash VARCHAR(255),
user_type TEXT CHECK (user_type IN ('customer', 'service_provider', 'admin')) DEFAULT 'customer',
created_at TIMESTAMP DEFAULT NOW(),
updated_at TIMESTAMP DEFAULT NOW(),
profile_picture_url VARCHAR(255),
address TEXT,
date_of_birth DATE,
is_active BOOLEAN DEFAULT TRUE,
last_login TIMESTAMP,
description TEXT,
business_id UUID REFERENCES businesses(id) ON DELETE SET NULL
);INSERT INTO users (first_name, last_name, email, phone_number, user_type)
VALUES ('John', 'Doe', '[email protected]', '+1234567890', 'customer');SELECT * FROM businesses WHERE owner_id = 'user-id-123';Boxed Final Answer:
{Include the above Updated Backend Structure Document as the definitive guide for the database schema, authentication logic, storage rules, and edge cases in the Skilled Artisan Marketplace MVP. This ensures clarity and consistency in backend development.}