Build a SaaS AI Platform: Web + Admin Dashboard + iOS App

Set up the project structure with model, styling, utilities, and env folders, then build a reusable nav bar with a logo and sign-in button in a layout used across pages.

Design the home page with a seven-column heading and a five-column demo video in a 12-column grid, applying tailwind css for responsiveness and a max width of 1280 pixels.

Design the landing page hero with an embedded video: add a source tag, enable controls, autoplay, looping, and mute, while updating the layout with a Google font and vertical padding.

Design the home page showcase with a grid of two photos and an arrow, enabling users to send a photo, pick a style, and generate a new image.

Structure a statistics section for the landing page, creating a 12-column grid with three four-column boxes that display file downloads, users, and photos.

Build a two-block testimonials section in a responsive grid, featuring rounded gray testimonial cards with icons, text, and author names; adjust padding and gaps for consistency.

Configure a logged-in navigation bar that shows the user avatar and credits, links to pricing, and reveals a dropdown with My Rooms, Create Rooms, and sign out.

Integrate next-auth authentication to sign in and out users, manage sessions with useSession and sessionProvider, configure Google provider, and wrap app layout with a session provider for secure access.

Register the app in Google Cloud, create OAuth credentials with localhost redirects, and set up a MongoDB Atlas cluster with a database user and connection string.

Connect to MongoDB using Mongoose, define a user schema with email, username, image, and credits, and authenticate or create users from Google profile data, then update the session.

Authenticated users upload a photo and generate a photo from prompts using a model on a protected page with theme and room dropdowns.

Implement a drag-and-drop dropzone to upload photos to Bite Scale, install the SDK, handle onupdate callbacks, and display the uploaded original with loading state in a seamless hosting workflow.

Polish the create room page by centering the dropzone uploader and adding generate, download, and delete photo controls with a top-right trash button, hover animation, and state updates.

Generate AI room photos with replicate by posting the original photo, theme room, and user ID from the session to obtain a generated image.

Return the output photo to the generation page for download, update the generation photo state with the second output URL, and display the original and generated photos.

Add a loading button and a compare slider on the generation page, showing original versus generated photos while isLoading controls the loading dots component.

Add a React Compare Slider to compare original and generated photos in landscape or portrait, using a headless toggle to switch side-by-side view.

Add download functionality for generated photos by wiring an onClick handler, implementing a download photo function with an append to name function, and optionally using the File Saver library.

Store original and generated photos in MongoDB by creating a rooms model linked to the logged-in user. Then save both URLs after uploading the generated image to bite scale.

Add notifications with a toaster provider using React Pod Toast, configure colors, place it above the nav bar, and show success or error messages after photo generation.

Control user credits to permit photo generation when credits are positive, hide the uploader when depleted, show an insufficient credits message with a pricing link, and update session after generation.

Create the my rooms route to display all generated photos for the logged-in user via a session-protected API. Fetch the user's rooms and map photo URLs.

Render the mushrooms page in the My Rooms route by displaying original and generated photos for the logged-in user, in a responsive layout with a download button.

Design a responsive pricing page with a centered heading, three-column grid, and vertically stacked cards with borders, shadows, and icon lists, using session to show authenticated users' credits.

Set up your Stripe account and configure app-specific products and add keys to your env file, then define three pricing plans with a one-time $9 fee and 30 credits.

Retrieve Stripe products and metadata, display them on the pricing page, and enable purchases with a pay button that updates credits after the user is logged in.

Define line items and create a Stripe checkout session with success and cancel URLs, then update the user credits after payment and verify in the Stripe dashboard.

Enable Stripe webhooks to update user credits only after a successful payment, by listening for payment intent succeeded events and updating credits in the database.

Learn to implement production email sending with a node mailer transporter, configure smtp providers like Amazon SNS, SMTp, and send welcome emails plus original and generated photos on user registration.

Create a responsive dashboard sidebar with a reusable left menu (logo, items, React icons), wrapping dashboard content, then add a card component under the header for web data.

Design a dashboard card component to display daily revenue, total revenue, and customers. Build a responsive grid that lays cards across three to five columns on large screens.

Create a responsive bar chart ui component on the dashboard to visualize revenue across 12 months, with x axis month names, y axis totals, tooltips, legend, and a grid.

Design the recent orders component to display a scrollable list of latest purchases in a flex row with an icon, price, customer name, and a right-aligned timestamp.

Design the admin dashboard customers page with a reusable header, a bordered scrollable table, and responsive grid showing name and email, plus time span and payment method on large screens.

Create an order model to track user purchases, capturing customer, status, payment method, created timestamp, and price, with Stripe webhook-driven creation after a successful payment.

Fetch real dashboard data from the database by calculating total revenue from orders, counting orders and users, and generating monthly chart data using asynchronous functions with await.

Fetch and display the latest ten orders on the dashboard, format dates with time ago, and populate customer data to show usernames, testing limits and fixing the customer property.

Retrieve all users from the database and render their data on the customers page. Loop through the users array to display username, email, credits, user role, and payment method.

Fetch all orders from the dashboard data file and render them in a table, displaying each order's price, status, formatted date, payment method, and the customer's username.

Retrieve generated photos from the database and display them in a table on the photos page, including room name, creator username, and original vs generated photos.

Delete unavailable room photos using delete many, generate new photos, and display original and generated images; on smaller screens, wrap them in links to open in a new tab.

Secure the admin route by validating the user session and role administration, redirecting non-admins to home. Update the header to display the admin username and make the logo navigate home.

Tidy the project before deployment by removing console logs and ensuring the provider session loads via the Get Provider flow for sign in and out. Update favicon and metadata.

Prepare the app for deployment by moving the localhost endpoint to an environment file. Push to GitHub and deploy on Vercel with environment variables, domain, and Stripe webhook endpoints updates.

Download Xcode 15 from the Apple website, create a new SwiftUI iOS project, preview on iPhone 15 Pro Max, and learn to use VStack, HStack, and extract subview.

Design a photo generation screen with a navigation stack, segmented controls for room types and photo styles, a scrollable image gallery, and a generate button that logs selections.