Generally Envato’s dwell preview system briefly breaks hyperlinks. Please use the direct demo hyperlink with credentials talked about beneath :
LIVE DEMO – Strive Earlier than You Purchase!
Dwell Utility: Quibbble
Consumer Demo Credentials:>
- Electronic mail: [email protected]
- Password:WebBuddy@123
Quibbble is a whole, production-ready net software that allows designers to showcase their artistic work, uncover inspiring designs, and construct their skilled community. Constructed with Subsequent.js 14 and TypeScript, this software offers a seamless expertise for importing design portfolios, partaking with the group, and rising your following. The platform includes a fashionable, responsive design and contains the whole lot wanted to run a design portfolio platform, from person authentication to cost processing.
⚠️ Vital: Exterior API Prices Disclaimer
Please observe that this software requires exterior API companies to perform, and you’ll incur prices primarily based in your utilization of those companies.
This software integrates with a number of third-party companies that cost charges primarily based on utilization:
- Stripe – Costs a transaction charge of two.9% plus $0.30 per profitable cost transaction when customers pay for design uploads. You pay Stripe for every transaction processed.
- MongoDB Atlas – Free tier out there for growth, however manufacturing use requires a paid plan primarily based on storage and utilization.
- AWS S3 – Costs primarily based on storage used and information switch. Free tier contains 5GB storage for 12 months, then pay-as-you-go pricing applies.
- SMTP Electronic mail Service – Required for password reset performance. Free tiers out there (e.g., Gmail SMTP, SendGrid free tier), however manufacturing use might require paid plans primarily based on e-mail quantity.
- Google OAuth – Free for authentication, however requires Google Cloud Platform account setup.
You’re chargeable for all prices related to these exterior companies. The acquisition value of this software contains solely the supply code and doesn’t embrace any API credit, service subscriptions, or utilization charges. Earlier than deploying this software, please evaluate the pricing pages of all required companies to know the prices you’ll incur primarily based in your anticipated utilization quantity.
Whereas many companies supply free tiers appropriate for growth and testing, manufacturing use would require paid plans. Guarantee you could have budgeted for ongoing API prices primarily based in your anticipated person base and utilization patterns.
Key Options
Design Portfolio Add
Add and showcase your design work with skilled picture help. The appliance helps single picture uploads per publish with AWS S3 integration for safe, scalable storage. Every design will be organized with classes, tags (as much as 20 per publish), and detailed descriptions to assist your work get found.
5 Design Classes
Customers can set up their work into 5 skilled classes to match their design type:
- Coding – Developer-focused designs, code snippets, and technical illustrations
- UIUX – Consumer interface and person expertise designs, wireframes, and prototypes
- Pictures – Photographic work, picture compositions, and visible storytelling
- Design – Common design work together with graphics, illustrations, and visible artwork
- Portfolio – Portfolio showcases, case research, and venture shows
Put up Customization Choices
The appliance offers intensive customization choices for design posts:
- Customized title for every design publish
- Detailed description explaining your design course of and inspiration
- Class choice from 5 out there classes
- As much as 20 tags per publish for higher discoverability
- Single high-quality picture per publish (JPG, PNG, GIF, WebP codecs supported)
- Most file dimension of 10MB per picture
Add Workflow
The appliance options an intuitive add course of that guides customers by way of publishing their designs:
- Picture Add – Add your design picture (drag and drop or click on to add)
- Title Entry – Add a descriptive title in your design
- Proceed to Particulars – Proceed to the detailed type
- Full Info – Add description, choose class, and add tags
- Cost – Full one-time cost through Stripe Checkout
- Computerized Publishing – Your design is immediately revealed after profitable cost
Consumer Administration
Full person administration system with the next options:
- Consumer authentication powered by NextAuth.js with Google OAuth and e-mail/password
- Consumer profiles with auto-generated avatars (constant gradient with person initials)
- Profile pages showcasing all person designs
- Follower and following system
- Consumer profile administration with username and slug
- Password reset performance through safe e-mail tokens
Pay-Per-Add System
Easy and clear pay-per-upload pricing mannequin:
- One-time cost per design add
- No subscriptions or recurring charges
- Cost required earlier than publishing
- Safe Stripe Checkout integration
- Computerized publish publishing after profitable cost
Configure your add value in Stripe Dashboard (one-time value, not recurring). Customers pay as soon as per design they need to publish, giving them full management over their spending.
Cost Processing
Built-in Stripe cost system for safe add funds. The appliance handles checkout classes, webhook processing, and automated publish publishing upon profitable cost. All funds are processed securely by way of Stripe’s platform.
Put up Administration
Customers can handle their uploaded designs by way of complete options:
- View all uploaded designs in a portfolio gallery
- Edit publish particulars (title, description, class, tags) with out extra cost
- Delete posts they now not need to showcase
- Monitor view counts on every design
- Monitor engagement metrics (likes, feedback, bookmarks)
Social Engagement
Constructed-in social options to assist customers join and have interaction with the group:
- Like designs with real-time updates
- Touch upon designs to offer suggestions
- Bookmark favourite designs for later viewing
- Comply with designers to see their newest work
- View follower and following counts
Actual-Time Notifications
Server-Despatched Occasions (SSE) powered notification system that gives on the spot updates:
- Notifications for likes in your posts
- Notifications for feedback in your posts
- Notifications when somebody follows you
- Actual-time notification badge updates (each 3 seconds)
- Mark all notifications as learn performance
Technical Specs
Know-how Stack
- Framework: Subsequent.js 14 with App Router
- Language: TypeScript
- UI Library: Tailwind CSS with customized elements
- Database: MongoDB with Mongoose ODM
- Authentication: NextAuth.js with Google OAuth and e-mail/password
- Funds: Stripe (one-time funds for uploads)
- File Storage: AWS S3 for picture uploads
- Actual-time: Server-Despatched Occasions for notifications
- State Administration: Zustand for client-side state
- Animations: Framer Movement
System Necessities
- Node.js 18 or increased
- npm or yarn package deal supervisor
- MongoDB database (MongoDB Atlas really helpful)
- API keys for required companies
Deployment Choices
The appliance will be deployed on:
- AWS EC2 (really helpful for manufacturing with full file add help)
- Vercel (for growth and testing, might have limitations with giant file uploads)
- Any Node.js internet hosting platform
API and Service Necessities
To run this software, you will want to create accounts and procure API keys from the next companies. Some companies supply free tiers appropriate for growth and small-scale manufacturing use.
Required Providers
Stripe
Stripe processes bank card funds for design uploads. Stripe prices a transaction charge of two.9% plus $0.30 per profitable transaction. There aren’t any month-to-month charges for traditional accounts. It’s essential to create a one-time value (not recurring) in Stripe Dashboard for the add cost. Go to Stripe pricing web page for full charge construction.
MongoDB Atlas
MongoDB Atlas offers the database for storing person information, posts, feedback, likes, bookmarks, and notifications. The free tier (M0 Sandbox) contains 512MB storage, which is adequate for growth and small purposes. Paid plans are required for manufacturing use with bigger datasets. Verify MongoDB Atlas pricing for particulars.
AWS S3
AWS S3 offers safe file storage for uploaded design pictures. The free tier contains 5GB storage for 12 months, then pay-as-you-go pricing applies primarily based on storage used and information switch. You’ll must create an S3 bucket and configure correct permissions. Verify AWS S3 pricing for present charges.
NextAuth.js
NextAuth.js handles person authentication with Google OAuth and e-mail/password. The library itself is free and open-source. You’ll must arrange Google OAuth credentials in Google Cloud Platform (free) and configure SMTP for password reset emails.
SMTP Electronic mail Service
SMTP e-mail service is required for password reset performance. Free choices embrace Gmail SMTP (with app password) or companies like SendGrid (free tier: 100 emails/day). Paid plans can be found for increased e-mail volumes. Verify your chosen SMTP supplier’s pricing for particulars.
Optionally available Providers
Google OAuth
Google OAuth offers social login performance. Free to make use of, however requires Google Cloud Platform account setup and OAuth credentials configuration.
Set up and Setup
The appliance contains complete documentation overlaying:
- Setting variable configuration
- MongoDB database setup
- NextAuth.js authentication setup
- Google OAuth configuration
- AWS S3 bucket setup and configuration
- Stripe cost setup (one-time value configuration)
- SMTP e-mail configuration for password reset
- Deployment guides for AWS EC2 and Vercel
- Frontend customization information
- Pricing and add cost configuration
All setup directions are offered in HTML documentation information included with the acquisition. The documentation contains step-by-step guides with screenshots and code examples.
What’s Included
- Full Subsequent.js 14 software supply code
- TypeScript supply information
- All UI elements and styling
- Server actions for posts, feedback, likes, bookmarks, and notifications
- API routes for authentication, uploads, webhooks, and notifications
- Database schema and fashions
- Authentication integration (NextAuth.js with Google OAuth and e-mail/password)
- Cost processing integration (Stripe pay-per-upload)
- File add implementation (AWS S3)
- Actual-time notifications (Server-Despatched Occasions)
- Complete HTML documentation
- Setting variable templates
- Deployment configuration information
Customization
The appliance is totally customizable:
- Modify add pricing in Stripe Dashboard
- Customise design classes and tags
- Regulate file add dimension limits and supported codecs
- Change colour schemes and branding
- Modify UI elements and layouts
- Add customized options and performance
- Customise person avatar gradients and styling
Assist and Updates
It is a full, production-ready software. The code follows Node.js greatest practices and Envato submission necessities. All code is well-structured, documented, and prepared for deployment. The appliance makes use of Clear Structure ideas, guaranteeing enterprise logic is separated from UI elements for maintainability and scalability.
