Pilot Training Portal

​

Overview

In this training session, Derek builds Pilot Pulse - a platform for flight instructors and students. Watch how for how to solve responsiveness, pages vs. components, and storing data + users.

​

Key Concepts

Watch the video to learn about the following concepts:

• Components vs. Pages: The differences and when to use each for optimal organization and routing.
• Component Creation: Best practices for making, updating, and passing data between components.
• Responsiveness: Designing for different screen sizes and handling layout issues.
• Chat Prompts: How to effectively communicate instructions using Create’s chat interface.
• Chat Scope: Understanding the context of the chat within your project (page, component, or global).
• Linking & Navigation: Different methods for linking pages and components, and managing app navigation.
• Routes: How to setup page routes for web navigation, and when to avoid them.
• User Accounts: Using Create’s built-in user accounts system and the data it provides.
• Functions: Creating custom functions to connect with external APIs and extend Create’s functionality.
• Testing Functions: Validating custom functions using Create’s test runner.
• Data Handling: Managing data flow and transferring data between different parts of the app.
• Debugging: Leveraging Create’s AI to help pinpoint and fix errors in your code.
• Iterations: How to build iteratively and make good decisions for the project.
• Scope: How to manage code as a project gets larger.
• Built in User Management: How Create has built in user management, and no need to configure firebase.

​

Show Notes

​

0:48 - Project Explanation

• Derek explains his project: an aviation tracker with calendar, flight logging, checklists, and weather.
• His goal is to create a tiered subscription model

​

2:59 - Project Overview & Initial Issues

• Derek shares his screen and shows his project with a left nav bar.
• Derek starts to walk through his project and highlights the responsiveness issues.

​

7:51 - Responsiveness

• Dhruv asks what he wants to focus on, Derek states that he wants to tackle responsiveness
• Derek points out the issues in the live view.

​

9:12 - Data Passing and Navigation

• Derek explains data passing issues in training section and how the navigation is not working as expected.

​

11:12 - Focus Mode and Project Navigation

• Dhruv introduces and demonstrates focus mode and how to use it for large projects.

​

12:04 - Pages vs. Components

• Dhruv asks why the training page was made into a component.
• Dhruv explains the differences between pages and components, and when to use each for optimal organization and routing.
• He mentions pages are used for routing and components for UI elements.

​

13:57 - Responsiveness

• Dhruv explains how to switch between mobile and desktop views.
• Dhruv uses the chat with a screenshot to fix the responsiveness in the training section.

​

17:53 - Component Deletion

• Dhruv shows that responsiveness has been fixed.
• Dhruv explains that the new page is using the same component and is more optimized.
• Dhruv deletes the component and makes the page to be a page instead of a component.

​

18:16 - Chat Scope

• Dhruv explains the chat scope and that it is specific to the selected element.
• Dhruv explains that if you click on the project name, it’s for the entire project.

​

19:16 - Linking and Navigation

• Derek is unsure how to link the new page to the nav bar since he can only see components.
• Dhruv explains that there are multiple ways to link, specifically with demo mode and select mode.

​

20:40 - Creating a Component

• Dhruv asks how Derek made the cards for the training section
• Dhruv demonstrates how to make a component and passes in arguments for the components.
• He explains the component preview and how to use it.

​

24:23 - Quiz Component and Back Button

• Dhruv has an error and shows how to go back to a previous version using the back button.

​

25:59 - Linking with Routes

• Dhruv shows how to create routes for pages, as well as requiring user accounts.

​

27:36 - Linking with Components

• Dhruv shows how to update a component in the nav bar and link it to training.
• He explains how to use the component chat for changes and updates.

​

30:00 - Video Navigation

• Derek explains the navigation for the videos and Dhruv states that it is okay.
• Dhruv explains how larger video libraries should be managed using a database.

​

32:22 - Nav Bar on All Pages

• Dhruv explains that the nav bar can be put on all pages with the project chat.

​

35:32 - Components for Page Navigation

• Dhruv explains the concept of using components for page navigation, not routes.
• He says that the main goal should be for it to feel like a software with a fixed nav bar.
• He starts to work on making the navigation work with components.

​

44:20 - Project Prompt

• Dhruv attempts to give a comprehensive prompt to help Create with all the steps to have the navigation work as desired.

​

47:53 - Debugging Loading Issues

• Dhruv is debugging why the helicopter videos are not loading correctly and states he’ll do it manually if it doesn’t work.
• He ends up realizing that it is not passing in all of the necessary arguments.
• He says that they can grab the old code to help update it.

​

52:34 - Specificity

• Dhruv explains how specificity in the prompts is important to get the most out of the chat.

​

53:25 - User Account

• Derek asks about the sign up issues, and the custom page, also about the logout.
• Dhruv uses the project chat to link the logout button to the correct route.
• Dhruv explains user accounts, routes, and the user database.
• He also highlights that it’s built in to Create so that no other service is necessary.

​

1:01:20 - Weather API with Functions

• Dhruv asks how the weather is currently being added and if there are specific APIs that need to be used.

​

1:02:56 - Creating a Function for Weather API

• Dhruv begins to create a function for the weather.gov API.
• He also explains how to test the function with the test runner.
• He mentions that functions are useful for integrations.

​

1:09:14 - Function Testing and Error Handling

• Dhruv begins to debug the errors in the function.
• He adds in some error handling to prevent crashing and also to let users know that the API did not fetch the correct data.
• He shows that testing functions is done independently in create.

​

1:12:31 - Debugging UI with the Function

• Dhruv debugs an issue that arose when adding the weather function

​

1:13:25 - Large Project

• Dhruv discusses limitations of large projects, how they can start to forget details, and how to break up the project.