Sometimes Envato’s live preview system temporarily breaks links. Please use the direct demo link with credentials mentioned below :

LIVE DEMO – Try Before You Buy!

Live Application: Quibbble

User Demo Credentials:>

Email: webbuddy2024@gmail.com
Password:WebBuddy@123

How to Install Video Documentation:

Link:https://envato.webbuddy.agency/docs

Quibbble is a complete, production-ready web application that enables designers to showcase their creative work, discover inspiring designs, and build their professional network. Built with Next.js 14 and TypeScript, this application provides a seamless experience for uploading design portfolios, engaging with the community, and growing your following. The platform features a modern, responsive design and includes everything needed to run a design portfolio platform, from user authentication to payment processing.

⚠️ Important: External API Costs Disclaimer

Please note that this application requires external API services to function, and you will incur costs based on your usage of these services.

This application integrates with several third-party services that charge fees based on usage:

Stripe – Charges a transaction fee of 2.9% plus $0.30 per successful payment transaction when users pay for design uploads. You pay Stripe for each transaction processed.
MongoDB Atlas – Free tier available for development, but production use requires a paid plan based on storage and usage.
AWS S3 – Charges based on storage used and data transfer. Free tier includes 5GB storage for 12 months, then pay-as-you-go pricing applies.
SMTP Email Service – Required for password reset functionality. Free tiers available (e.g., Gmail SMTP, SendGrid free tier), but production use may require paid plans based on email volume.
Google OAuth – Free for authentication, but requires Google Cloud Platform account setup.

You are responsible for all costs associated with these external services. The purchase price of this application includes only the source code and does not include any API credits, service subscriptions, or usage fees. Before deploying this application, please review the pricing pages of all required services to understand the costs you will incur based on your expected usage volume.

While many services offer free tiers suitable for development and testing, production use will require paid plans. Ensure you have budgeted for ongoing API costs based on your expected user base and usage patterns.

Key Features

Design Portfolio Upload

Upload and showcase your design work with professional image support. The application supports single image uploads per post with AWS S3 integration for secure, scalable storage. Each design can be organized with categories, tags (up to 20 per post), and detailed descriptions to help your work get discovered.

Five Design Categories

Users can organize their work into five professional categories to match their design style:

Coding – Developer-focused designs, code snippets, and technical illustrations
UIUX – User interface and user experience designs, wireframes, and prototypes
Photography – Photographic work, image compositions, and visual storytelling
Design – General design work including graphics, illustrations, and visual art
Portfolio – Portfolio showcases, case studies, and project presentations

Post Customization Options

The application provides extensive customization options for design posts:

Custom title for each design post
Detailed description explaining your design process and inspiration
Category selection from five available categories
Up to 20 tags per post for better discoverability
Single high-quality image per post (JPG, PNG, GIF, WebP formats supported)
Maximum file size of 10MB per image

Upload Workflow

The application features an intuitive upload process that guides users through publishing their designs:

Image Upload – Upload your design image (drag and drop or click to upload)
Title Entry – Add a descriptive title for your design
Continue to Details – Proceed to the detailed form
Complete Information – Add description, select category, and add tags
Payment – Complete one-time payment via Stripe Checkout
Automatic Publishing – Your design is instantly published after successful payment

User Management

Complete user management system with the following features:

User authentication powered by NextAuth.js with Google OAuth and email/password
User profiles with auto-generated avatars (consistent gradient with user initials)
Profile pages showcasing all user designs
Follower and following system
User profile management with username and slug
Password reset functionality via secure email tokens

Pay-Per-Upload System

Simple and transparent pay-per-upload pricing model:

One-time payment per design upload
No subscriptions or recurring fees
Payment required before publishing
Secure Stripe Checkout integration
Automatic post publishing after successful payment

Configure your upload price in Stripe Dashboard (one-time price, not recurring). Users pay once per design they want to publish, giving them full control over their spending.

Payment Processing

Integrated Stripe payment system for secure upload payments. The application handles checkout sessions, webhook processing, and automatic post publishing upon successful payment. All payments are processed securely through Stripe’s platform.

Post Management

Users can manage their uploaded designs through comprehensive features:

View all uploaded designs in a portfolio gallery
Edit post details (title, description, category, tags) without additional payment
Delete posts they no longer want to showcase
Track view counts on each design
Monitor engagement metrics (likes, comments, bookmarks)

Social Engagement

Built-in social features to help users connect and engage with the community:

Like designs with real-time updates
Comment on designs to provide feedback
Bookmark favorite designs for later viewing
Follow designers to see their latest work
View follower and following counts

Real-Time Notifications

Server-Sent Events (SSE) powered notification system that provides instant updates:

Notifications for likes on your posts
Notifications for comments on your posts
Notifications when someone follows you
Real-time notification badge updates (every 3 seconds)
Mark all notifications as read functionality

Technical Specifications

Technology Stack

Framework: Next.js 14 with App Router
Language: TypeScript
UI Library: Tailwind CSS with custom components
Database: MongoDB with Mongoose ODM
Authentication: NextAuth.js with Google OAuth and email/password
Payments: Stripe (one-time payments for uploads)
File Storage: AWS S3 for image uploads
Real-time: Server-Sent Events for notifications
State Management: Zustand for client-side state
Animations: Framer Motion

System Requirements

Node.js 18 or higher
npm or yarn package manager
MongoDB database (MongoDB Atlas recommended)
API keys for required services

Deployment Options

The application can be deployed on:

AWS EC2 (recommended for production with full file upload support)
Vercel (for development and testing, may have limitations with large file uploads)
Any Node.js hosting platform

API and Service Requirements

To run this application, you will need to create accounts and obtain API keys from the following services. Some services offer free tiers suitable for development and small-scale production use.

Required Services

Stripe

Stripe processes credit card payments for design uploads. Stripe charges a transaction fee of 2.9% plus $0.30 per successful transaction. There are no monthly fees for standard accounts. You must create a one-time price (not recurring) in Stripe Dashboard for the upload payment. Visit Stripe pricing page for complete fee structure.

MongoDB Atlas

MongoDB Atlas provides the database for storing user data, posts, comments, likes, bookmarks, and notifications. The free tier (M0 Sandbox) includes 512MB storage, which is sufficient for development and small applications. Paid plans are required for production use with larger datasets. Check MongoDB Atlas pricing for details.

AWS S3

AWS S3 provides secure file storage for uploaded design images. The free tier includes 5GB storage for 12 months, then pay-as-you-go pricing applies based on storage used and data transfer. You’ll need to create an S3 bucket and configure proper permissions. Check AWS S3 pricing for current rates.

NextAuth.js

NextAuth.js handles user authentication with Google OAuth and email/password. The library itself is free and open-source. You’ll need to set up Google OAuth credentials in Google Cloud Platform (free) and configure SMTP for password reset emails.

SMTP Email Service

SMTP email service is required for password reset functionality. Free options include Gmail SMTP (with app password) or services like SendGrid (free tier: 100 emails/day). Paid plans are available for higher email volumes. Check your chosen SMTP provider’s pricing for details.

Optional Services

Google OAuth

Google OAuth provides social login functionality. Free to use, but requires Google Cloud Platform account setup and OAuth credentials configuration.

Installation and Setup

The application includes comprehensive documentation covering:

Environment variable configuration
MongoDB database setup
NextAuth.js authentication setup
Google OAuth configuration
AWS S3 bucket setup and configuration
Stripe payment setup (one-time price configuration)
SMTP email configuration for password reset
Deployment guides for AWS EC2 and Vercel
Frontend customization guide
Pricing and upload payment configuration

All setup instructions are provided in HTML documentation files included with the purchase. The documentation includes step-by-step guides with screenshots and code examples.

What’s Included

Complete Next.js 14 application source code
TypeScript source files
All UI components and styling
Server actions for posts, comments, likes, bookmarks, and notifications
API routes for authentication, uploads, webhooks, and notifications
Database schema and models
Authentication integration (NextAuth.js with Google OAuth and email/password)
Payment processing integration (Stripe pay-per-upload)
File upload implementation (AWS S3)
Real-time notifications (Server-Sent Events)
Comprehensive HTML documentation
Environment variable templates
Deployment configuration files

Customization

The application is fully customizable:

Modify upload pricing in Stripe Dashboard
Customize design categories and tags
Adjust file upload size limits and supported formats
Change color schemes and branding
Modify UI components and layouts
Add custom features and functionality
Customize user avatar gradients and styling

Support and Updates

This is a complete, production-ready application. The code follows Node.js best practices and Envato submission requirements. All code is well-structured, documented, and ready for deployment. The application uses Clean Architecture principles, ensuring business logic is separated from UI components for maintainability and scalability.

Quibbble – Dribbble-Style Design Portfolio, Hiring & Project Management Platform (16+ Core Modules)