The Web Up project is a SaaS platform designed to simplify the process of building and managing websites and sales funnels. Developed as a university project by five dedicated students, this platform integrates modern technologies to deliver a comprehensive solution for businesses and agencies.
- Next.js: YouTube course on Next.js 14
- Prisma: YouTube tutorial on Prisma
The technology stack was selected based on practical experience and team consensus. Next.js was recommended by our instructor, Mr. Yasser, making it a logical choice for our front-end development. Additionally, Bun was introduced based on a suggestion from a team member, Ilias, for its efficiency in managing JavaScript and TypeScript.
We drew inspiration from various sources to design and develop the Web Up project:
This list is subject to change based on feature difficulty and project timeline:
- 🌍 Multivendor B2B2B SaaS Platform
- 🏢 Agency and Sub Accounts Management
- 🚀 Website & Funnel Builder
- 🎯 Role-based Access Control
- 💳 Stripe Subscription and Add-on Products
- 🔗 Stripe Connect for User Payments
- 💵 Charge Application Fees on Sales
- 📊 Customizable Dashboards
- 🖼️ Media Storage for Users
- 📈 Stripe Product Sync
- 🛍️ Custom Checkouts for Funnels
- 📧 Lead Generation from Funnels
- 🧾 Project Management System (Kanban Board)
- 📅 Funnel Performance Metrics
- 📉 Agency and Sub-account Metrics
- 🌑 Light & Dark Mode
- 🎨 Functioning Landing Page
- 📈 Graph and Chart Integrations
- 🆔 AI-Powered Face ID and Recognition: An optional sign-in feature using face ID and face recognition to facilitate the sign-in process and enhance security as an additional authentication factor.
- Multivendor B2B2B SaaS Platform: Manage multiple vendors within one platform, ideal for users with multiple business partners, clients, or subsidiaries.
- Agency and Sub Accounts Management: Create and manage sub-accounts for clients or teams, segmenting responsibilities and billing.
- Website & Funnel Builder: Build and manage websites and sales funnels directly on the platform, optimizing conversions.
- Role-based Access Control: Ensure users access only the features and data they are authorized for, enhancing security and data segregation.
- Stripe Subscription and Add-on Products: Seamless billing and revenue management with integrated Stripe subscriptions and add-ons.
- Stripe Connect for User Payments: Manage payments for different accounts, beneficial for marketplaces, agencies, or SaaS platforms.
- Charge Application Fees on Sales: Generate additional revenue by charging application fees on sales.
- Customizable Dashboards: View relevant data and metrics to suit business needs, improving productivity.
- Media Storage for Users: Store and manage images, documents, or other media files within the platform.
- Stripe Product Sync: Automate payment workflow by syncing products with Stripe.
- Custom Checkouts for Funnels: Tailor the payment experience for clients, optimizing for higher conversions.
- Lead Generation from Funnels: Automate lead generation to capture, track, and manage potential customers.
- Project Management System (Kanban Board): Organize and track tasks efficiently using a visually intuitive Kanban board layout.
- Funnel Performance Metrics: Analyze key data like conversion rates, bounce rates, and ROI to refine and optimize sales funnels.
- Agency and Sub-account Metrics: Track performance of sub-accounts, providing valuable data on user activity, revenue, and other key metrics.
- Light & Dark Mode: Enhance user experience with customizable interface themes.
- Graph and Chart Integrations: Visual representations of data to understand performance metrics, track progress, and analyze trends.
- Functioning Landing Page: Engage customers immediately upon visiting the platform, highlighting key services or features.
- Next.js 14 Project Setup: Structure the project for performance and scalability.
- Next.js 14 Authentication: Implement user authentication to secure the application.
- Landing Page Development: Build a landing page that captures user attention immediately.
- Building Forms in Next.js 14: Implement user-friendly forms for smooth data flow.
- Uploading Images: Enable seamless media file uploads and management.
- Using Bun: Efficiently manage JavaScript and TypeScript with Bun.
- Route Segments: Implement complex routing for improved navigation.
- Sidebar & Global State: Create a sidebar navigation system linked to the app's global state.
- Subdomain Setup in Middleware: Manage multiple agencies or clients within the same app instance.
- Funnels and Website Builder: Design an interface for building websites and funnels.
- Stripe Checkout for Funnels: Handle payments directly through the funnel system.
- Setup Local Database: Establish a local MySQL database for user, product, and transaction data.
- Using Prisma in Next.js 14: Efficiently interact with the database using Prisma.
- Subdomains Architecture Explained: Plan and implement scalable multi-tenancy architecture.
- Building the Sub Account Section: Manage sub-accounts for organizational control.
- Media Storage for Sub Accounts: Ensure data segregation and privacy for media storage.
- Stripe Setup: Configure Stripe for seamless payments and billing.
- Sub Account Billing Page: Facilitate invoice management and recurring payments.
- Challenge - Add Pro Features: Enhance the SaaS platform with advanced features.
- Deployment: Ensure the application runs efficiently in a production environment.
We welcome contributions to improve the project. Please follow the standard process for submitting issues and pull requests.
This project is licensed under the NIT License.