Build A Production-Ready Complex App With FlutterFlow, Supabase and BuildShip

00:00 Start
00:31 Part 1: Architecture
05:50 Part 2: Database Schema
10:01 Part 3: Roles & Permissions
13:50 Part 4: Supabase Setup
27:08 Part 5: FlutterFlow App Setup
32:49 Part 6: Project Listing
55:16 Part 7: New Project Flow
01:07:27 Part 8: Edit Project Flow
01:17:30 Part 9: Delete Project
01:21:11 Part 10: Project Assignment Flow
01:33:07 Part 11: Reassign User Project Flow
01:47:37 Part 12: Project User Assignment Flow
01:52:49 Part 13: User Assignment Flow Backend
02:02:00 Part 14: Task Listing Flow
02:17:44 Part 15: Assignment Flow
02:36:41 Part 16: Task Detail Page
02:53:42 Part 17: Changing Statuses and Status Filtering
03:03:15 Part 18: User Management
03:25:34 Part 19: Access Control Policies
03:49:47 Part 20: Homepage
03:54:53 Part 21: User Profile Page
03:56:57 Part 22: Buildship Automations
04:11:37 Get More Content!

[ambitiouslabs]

James, you inspired me to begin my no-code entrepreneurship journey. I aspire to be as good as a teacher as you, man.

[jimvh]

I would have no problem to pay for this free value James gives us here! I hope FF and SB and BS reward you for your time and effort James👌👍😎 I would not be able to build apps like these using their tools if it wasn’t for you! Let’s be honest. This is amazing!

[teacha_africa]

If I could subscribe to your channel everyday, again and again! You've made app development easy for me to go into. Thanks for this video.

[igbrowns]

Very detailed from zero to Advanced.
Thanks once again ❤

[neanda]

Thank you James, this is 'exactly' what i needed right now. I've built parts of a project management app, which is quite complex, and there's a lot of things that are not working correctly, so i'm hoping following along with this will show me where i've gone wrong. btw, i'm using all 3 of those tools. Thank you

[truemendas]

2:00:03 matching only by user_id is not enough, you need to filter by project_id as well, because it will remove ALL found rows in database which might be for another project (I just checked it and the action removed all rows with user_id).
It worked in your example because there was only one project with members.

[TerritOrially]

🎯 Key Takeaways for quick navigation:

00:00 📱 *Introduction to building a complex app using FlutterFlow, Supabase, and Buildship*
- Overview of using no-code technologies to build a complex app,
00:26 🛠️ *Importance of Planning and Architecture*
- The necessity of creating a detailed architecture and scope for app development,
01:08 🏗️ *High-Level App Architecture Overview*
- Discussion of the app's components: home, dashboard, project listing, and project details pages,
02:06 👥 *Project and Team Management Features*
- Features for managing projects, including creation, editing, and deletion by admins,
03:25 📋 *Task Management and Details*
- Task display for projects, editing, and creation features restricted to admins or project managers,
04:06 🔐 *User, Role, and Access Management*
- Description of additional app pages for user profile, admin panel, and user management,
05:53 📊 *Introduction to Supabase Schema for the App*
- Explanation of using Supabase for backend setup, focusing on database schema for roles and project management,
08:23 🛂 *Deep Dive into Roles and Permissions*
- Detailed explanation of role-based access control (RBAC) for the app,
10:13 🏦 *Setting Up Supabase Database Schema*
- Step-by-step guide on setting up the database schema in Supabase,
14:02 🗂️ *Finalizing Database Setup and User Management in Supabase*
- Configuration of user authentication and manual user addition in Supabase,
18:56 📝 *Setting Up the Projects Table*
- Introduction to creating the projects table with key attributes like name, description, start date, end date, and status.
19:38 🔗 *Creating Project Members Table for Many-to-Many Relationships*
- Explanation of establishing a many-to-many relationship between users and projects through the project members table.
20:16 📊 *Building the Tasks Table for Project Task Management*
- Steps for creating the tasks table including attributes like project ID, task name, description, due date, status, and assignee.
24:39 🔐 *Implementing Role Level Security (RLS) in Supabase*
- Introduction to RLS for controlling data access based on user roles.
27:12 🚀 *Starting App Development with FlutterFlow*
- Beginning of the app development process in FlutterFlow starting with authentication setup.
33:11 🖌️ *Designing the Project Listing Page in FlutterFlow*
- Design considerations for the project listing page, emphasizing UI/UX design before backend integration.
36:42 🗃️ *Enhancing the Project List View with Supabase*
- Introduction to customizing views in Supabase to fit the UI design in FlutterFlow,
41:30 📲 *Dynamically Populating the Project List in FlutterFlow*
- Configuring FlutterFlow to dynamically populate the project list from Supabase,
45:10 🚀 *Implementing Navigation and Testing Data Display*
- Setting up navigation within the app to access the project list,
47:14 🖼️ *Adding Profile Pictures to the Project List*
- Expanding the database schema to include user profile pictures,
54:24 🛠️ *Finalizing User Profile Picture Integration*
- Correcting user profile picture assignments to ensure all project members are visually represented.
55:19 🆕 *Initiating the New Project Flow*
- Introduction to creating a new project flow, including project details entry and assignment functionalities.
58:07 🎨 *Designing and Implementing the Project Creation Component*
- Design adjustments to the project creation component, focusing on user-friendly input fields for project details.
01:02:18 🔄 *Adding Placeholder for Empty Project Member Slots*
- Modification of the project list to display placeholder avatars for projects without assigned members.
01:07:08 📝 *Establishing the Edit Project Flow*
- Setup for an edit project flow, allowing updates to existing projects through a pre-filled form.
01:10:06 🔄 *Refining Data Passing for Edit Functionality*
- Correction of the data passing mechanism to accommodate the edit functionality of project details.
01:11:13 🔄 *Simplifying Data Passing for Project Editing*
- Modification to pass project ID instead of entire row for easier data handling,
01:14:39 ✏️ *Testing Edit Project Functionality*
- Validation of the edit project flow, including UI adjustments for better user experience,
01:17:32 🗑️ *Adding Delete Project Functionality*
- Introduction of project deletion capability with confirmation dialogues to ensure user intent,
01:21:12 🤝 *Developing the Assign Users Flow*
- Conceptualizing the UI and backend logic for assigning users to projects, considering many-to-many relationships,
01:24:10 🔧 *Building the Assign Users Component*
- Creation of a new component for assigning users, displaying all users with visual cues for current project membership,
01:28:24 🔄 *Adjusting Data Parameters for User Assignments*
- Modification to utilize project information from a comprehensive view for user assignment,
01:33:15 🛠️ *Building Logic for User Assignment Flow*
- Introduction of component state variables to track users being added or removed from a project,
01:39:08 📊 *Implementing Conditional Logic for User Selection*
- Implementation of conditional actions to manage the addition and removal of users to/from projects,
01:44:48 ✔️ *Testing and Refining User Assignment Toggle Functionality*
- Testing the toggle functionality for adding and removing users from projects,
01:45:15 🔄 *Dynamic Opacity Logic for User Assignment*
- Enhancing user interaction by dynamically adjusting opacity based on user actions,
01:45:58 🎓 *Promotional Segment for Training Courses*
- Introduction to comprehensive training courses for mastering FlutterFlow and Supabase,
01:47:32 🛠️ *Refining Conditional Logic for Visual Indicators*
- Adjusting conditions to accurately reflect user assignment changes through visual indicators,
- Developing backend integration for adding and removing users from projects,
02:02:21 📋 *Task Management Flow Introduction*
- Introduction to task management functionalities including creating, editing, deleting, and assigning tasks within projects.
02:03:31 🛠️ *Setting Up Task List Page*
- Modifying a duplicated project list to create a task list page.
02:06:05 🔗 *Linking Projects to Tasks*
- Implementing navigation from project list to task list by passing project information.
02:09:32 🆕 *Implementing Task Creation, Editing, and Deletion*
- Setting up components for creating new tasks, editing existing tasks, and deleting tasks.
02:17:49 🔄 *Developing Task Assignment Flow*
- Planning the UI flow for assigning tasks to individual users, similar to project assignments but limited to one user per task.
02:19:42 🔄 *Task Assignment Flow Adjustment*
- Adjusting the task assignment flow to cater to single user assignments rather than multiple.
02:27:38 🖱️ *User Selection Mechanism for Task Assignment*
- Developing the logic for user selection in task assignments, allowing a clear visual indicator of the currently assigned user.
02:33:21 🛠️ *UI Adjustments for Task List Display*
- Addressing overflow issues in the task list display by adjusting text alignment and space distribution among UI elements.
02:35:26 📸 *Displaying Assigned User's Profile Picture in Task List*
- Modifying the task list to show the profile picture of the user currently assigned to each task.
02:35:54 🔄 *Adjusting Task Assignment UI*
- Adjusting the user interface to enhance task assignment flow.
02:36:50 📝 *Implementing Task Detail Page*
- Introduction of a task detail page to provide in-depth information on tasks.
02:42:07 ✅ *Marking Tasks as Completed*
- Implementing functionality to mark tasks as completed directly from the task detail page.
02:48:07 🔄 *Refreshing Task Status*
- Addressing data refresh issues on the task detail page to accurately display task status.
02:52:32 🔄 *Task Status Update Implementation*
- Implementing task status update functionality within the task detail page.
02:53:42 🛠️ *Task Status Modification Enhancement*
- Enhancing task status modification with a dropdown for status selection on the task detail page.
02:57:35 📊 *Implementing Task and Project Filtering*
- Implementing filtering functionality for tasks and projects based on status.
03:03:21 🚀 *Launching User Role Management Feature*
- Introduction of a user role management feature to assign users to specific roles.
03:09:19 🔄 *Implementing User Role Management*
- Introduction of user role management for assigning users to specific roles.
03:17:01 🛠️ *Finalizing User Role Assignment UI*
- Final adjustments to the user role management UI.
03:25:44 🔒 *Adding Authorization Policies*
03:26:42 🚀 *Setting Authorization Policies*
03:41:03 🛠️ *Refining Permissions for Project Management*
03:44:04 🚫 *Implementing Role-based Action Restrictions*
03:47:48 ✅ *Conditional UI Display Based on User Permissions*
03:57:00 🔄 *Automation with BuildShip*
04:00:59 🛠️ *Setting Up Email Notifications for New Projects*
04:03:55 📧 *Customizing Email Content for Notifications*
04:08:05 🔄 *Automating Task Completion Notifications*

Made with HARPA AI

[strawhatsanji]

Hey James, really enjoy your tutorials, but can you show a visual end result of what you will be creating at the start of the tutorial.

Seeing a visual representation of the app in action, really helps viewers who beginners understand what you are working before going into the architecture.

[devtest]

Hi James. Thanks for all the effort you’ve put into this. Please would you be able to state how many hours each of the supabase and flutterflow courses on your platform are?

[dealanwilson]

Excellent!! Thanks for the detailed guidance and your knowledge. We Appreciate it!

[inzimamali]

Such an honest and great youtuber, tnkx james❤❤❤

[Rcky]

Bro You're the Rockstar! Truly wish your channel grow!

[Caden_Burleson]

I think Supabase changed the way to create policies. Not 100% sure I'm following correctly. Any way you could make a quick video showing how to do it with the Supabase update?

[MoritzVach]

so vaulable to just build along with you James. thank you!

[moses]

Great work, thanks! Makes me even happier to be a Patreon member 👍

[brandibooth]

I like how you teach. you're doing a good job!

[KrisisOfficial]

I have a question as a complete beginner to the coding and no-code field. What, if you all were to start over, would you learn? and in what order would you learn it to develop an app using these tools? Reason I ask is because once I get to the integration portion of developing the app through flutterflow, I get completely stuck. Like integrating API's or creating specific functions that I desire, etc. I want to just go to an academy of some sort but if I dont need HTML for instance and can jump into flutter or whatever code is common, I would much rather be efficiently educated so the insight is much appreciated.

[stefanvasov]

Tutorial is good, but naming thing with cName or kName is not readable and not by coding naming conventions

[ahmedsomir]

It's a very good tutorial like always.. great.
my question is:
- what if I need a data entry or any person to work on the backend "DB" as you know in this case we need a frontend application to connect to the DB and support this application with (create, update, insert and search) features.

In this case what are the additional tools ( the perfect match) I need to build this full application, please list it all.

thanks

[김종윤-xf]

Are developers here to look around? I'm a normal person, and I couldn't follow it anymore because a different menu came up in the middle... 25:16