Build A Production-Ready Complex App With FlutterFlow, Supabase and BuildShip
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- ► Exclusive NoCode Content, Tutorials & Support: / jamesnocode
► Comprehensive FlutterFlow Training & Private Community: masteringflutterflow.com
► Comprehensive Supabase Training & Private Community: masteringsupabase.com
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! - แนวปฏิบัติและการใช้ชีวิต
![[TH] VCT Masters Shanghai Playoffs DAY 3 // FNC vs FUT | EDG vs PRX](http://i.ytimg.com/vi/pw2T5v0ogDI/mqdefault.jpg)
👍VIEW/CLONE ALL MY NOCODE APPS + support my work: www.patreon.com/jamesnocode
👍GET MY NEW TRAINING - MASTERING FLUTTERFLOW: masteringflutterflow.com
👍GET MY NEW TRAINING - MASTERING SUPABASE: masteringsupabase.com
Hi @Jamesnocode
Folks from India are not able to subscribe on Patreon due to some financial regulatory issue. Could you please provide some alternative? Is there a way to reach you on Twitter or other email, for more details?
James, you inspired me to begin my no-code entrepreneurship journey. I aspire to be as good as a teacher as you, man.
You're pretty good yourself
you're good as well
So, that is how long James has been around for? wow.
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!
so vaulable to just build along with you James. thank you!
Such an honest and great youtuber, tnkx james❤❤❤
Thank you! for everything!!!
Let's start 🔥
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
Bro You're the Rockstar! Truly wish your channel grow!
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.
how can we filter it
@@preran8674 looks like he finds this bug and solves this at 3:53:19, hope this helps :)
Great work, thanks! Makes me even happier to be a Patreon member 👍
Awesome, thank you!
I like how you teach. you're doing a good job!
I appreciate that!
🎯 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
Thanks!
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?
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.
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
Nice
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?
Hello James, what did you use in drafting the apps architecture?
Hey James, as always you got really cool video. Is there anyway i can add in Shared Calendar into this app for different role team member ?
How or where would you set it up that only people from the same company can get access to a team?
What apps do you use for notes on 2:56
what is the whiteboarding software ur using?
What if i need to update the local state for the filterswith specific names despite the names showing onthe dropdown option? Because the droppdown items will have diferent values depending on the Language of the app so I want that if the first item is selected put on the app state variable allways "Male" for example. Another thing is if I want combination of filters, lets say I want to filter my products by type tshirt and Socks, so i have to select multiple filters at the same time. How to do all of this?? :)
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.
Learn some SQL to understand relational data in Supabase, from there you can choose from a variety of programming languages to choose from Rust, Python, (HTML, CSS and Javascript are core)
@@Urbaneese thank you for your response. I am currently taking the Harvard CS50 free course I started today. I believe that language, SQL, was mentioned. From there I will purchase another course because I feel strongly about my app idea and want it implemented the best way possible.
James has a paid but interesting and very affordable masterclass to learn all about Supabase as a backend. You will learn just what you need to.
Anyone else having issues around the 2:41:20 - 3:00:00 mark? I have had issues with my screen jittering and continuously showing the loading icon on items that use the subquery for the task detail page. It seems to momentarily load at times and then disappear. Couldn't find any answers on google either for this :(
Hi James, amazing video! I am convinced of the amazing duo that is flutterflow and supabase. I want to purchase your mastering classes but I was wondering if you suggest a specific order we should take them, I am thinking mastering supabase first then mastering flutterflow?
Good question, they compliment each other so it depends on what you want to focus on first. You really can’t go wrong with either one.
🔥🔥🔥
@17:50 Did you create the foreign keys prior to this step? I don't have the link button between "Name" and "Type"
It may be because of any update. You can add using below foreign key
u can edit the column
Your Patreon link says clone my apps how does that work, is it building widget by widget or just cloning with code download and run and boom💥 apps done
Copy the entire app to your account.
It would be cool to have less of buildship and more of edge functions on Supabase
Can you make a client portal please 🙏🏽
Tutorial is good, but naming thing with cName or kName is not readable and not by coding naming conventions
what the name of schema design scratch app?
I'd also love to know!
I think it's whimsical
@@juliena6575 Yeah, it is. I reasearched it afterwards and posted the name here but I don't know why my comment isn't showing. Thanks for the help either way!
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
Too much jump cut. You don't need to cut, if you do long video like this.
1:19:55 shows an error "Dismiss Dialog action is used, but there is no action to open a custom dialog." . @jamesnocode did not get an error in your screen. Any reason why?
Also it looks like we cannot delete all projects. We need to have 1 project left ("Travel Report" in this example)
I found out that the dismiss action was not required as its native to the confirmation dialog action. Must have been an update to flutterflow since
We can delete all projects. It is not about leaving 1 project, it is about Foreign Key relations with other tables. To be able to delete the Travel Report project, you have to navigate to Supabase and change Foreign Key removal behaviour from "Project Users" and "tasks" tables to "Cascade". Then you will be able to delete all projects.
Iam from Nepal I cant able to pay cause there is no visa card acceptable in Nepal. Can you please add me Patreon member
Please create a tutorial to develop a Point of Sale Application for Grocery using the same FlutterFlow ,Supabase and buildship and sell it like your mastering flutterflow. Thanks!