Build an AI Powered React Native ChatGPT Mobile App

Focused View

Reece Kenney

8:46:42

18 View

1. Setup

1. Intro video (from course dashboard).mp4

00:49

2. Brief intro to OpenAI and ChatGPT - Important Concepts.mp4

12:28

3. Installing Visual Studio Code.mp4

02:42

4. What is Expo.mp4

02:43

5. Setting up our project.mp4

04:10

6. Installing the iOS simulator (Mac only).mp4

02:20

7. Installing the Android simulator.mp4

04:41

8. Quick overview of app files.mp4

04:06

9. Running our app on the simulators.mp4

02:50

10. Running the app on a physical device.mp4

01:44

2. Bottom tab navigator

1.1 gptApp-reactNavigation.zip

1. Installing React Native Navigation.mp4

04:57

2.1 gptApp-bottomTabs.zip

2. Creating our bottom tabs.mp4

08:26

3.1 gptApp-tabIcons.zip

3. Adding icons to the bottom tabs.mp4

04:53

4.1 gptApp-tabIconColor.zip

4. Fixing the color of the bottom tab icons.mp4

03:44

3. Chat screen UI

1.1 gptApp-colorsFile.zip

1. Creating a constant file for our colors.mp4

03:49

2.1 gptApp-textInput.zip

2. Adding the text input.mp4

02:51

3.1 gptApp-sendButton.zip

3. Adding the send button.mp4

06:27

4.1 gptApp-keyboardAvoidingView.zip

4. Using the KeyboardAvoidingView element.mp4

06:59

5.1 gptApp-keyboardAvoidingViewContainer.zip

5. Adding a container around our keyboardAvoidingView element.mp4

05:04

4. Calling Chat GPT!

1.1 gptApp-messageText.zip

1. Getting the input text.mp4

04:50

2.1 gptApp-sendMessage.zip

2. Submit button onPress.mp4

02:08

3.1 gptApp-useCallback.zip

3. UseCallback.mp4

06:22

4.1 gptApp-openAi.zip

4. Installing the OpenAI package.mp4

03:21

5.1 gptApp-openAiApiKey.zip

5. Getting our API key.mp4

05:19

6.1 gptApp-makeRequest.zip

6. Sending the query.mp4

08:01

7.1 gptApp-estimateUsage.zip

7. Optional Estimating the cost of the queries.mp4

06:25

8.1 gptApp-processingResponseText.zip

8. Processing the response text.mp4

06:39

9.1 gptApp-conversationHistoryUtil.zip

9. Creating the conversation history util.mp4

02:36

10.1 gptApp-addUserMessage.zip

10. Adding the user message to the conversation.mp4

04:39

11.1 gptApp-addAssistantMessage.zip

11. Adding the assistants response to the conversation.mp4

02:38

12.1 gptApp-systemMessage.zip

12. Adding system messages.mp4

04:25

5. Outputting messages

1.1 gptApp-setConversation.zip

1. Setting the conversation state variable.mp4

07:19

2.1 gptApp-flatlist.zip

2. Adding our flatlist for outputting the messages.mp4

03:21

3.1 gptApp-bubble.zip

3. Chat message bubble component.mp4

02:28

4.1 gptApp-bubbleStyle.zip

4. Styling our chat bubbles.mp4

04:19

5.1 gptApp-bubbleAlignment.zip

5. Aligning the bubbles correctly.mp4

04:19

6.1 gptApp-textColor.zip

6. Text color and other finishing touches.mp4

03:54

7.1 gptApp-fonts.zip

7. Adding custom fonts.mp4

12:33

8.1 gptApp-applyingFont.zip

8. Applying our new fonts!.mp4

05:05

6. Adding a clear conversation button

1.1 gptApp-headerButton2.zip

1. Installing react native header buttons.mp4

07:37

2.1 gptApp-customHeaderButton.zip

2. Creating our custom header button component.mp4

04:11

3.1 gptApp-showingOurHeaderButton.zip

3. Outputting our header button.mp4

02:31

4.1 gptApp-clearConversation.zip

4. Clearing the conversation.mp4

04:18

7. Adding a loading indicator

1.1 gptApp-loading.zip

1. Setting the loading flag.mp4

02:32

2.1 gptApp-loadingGif.zip

2. Adding a loading gif.mp4

08:52

3.1 gptApp-loadingGifStyle.zip

3. Styling our loading gif.mp4

06:47

8. Chat screen finishing touches

1.1 gptApp-scrollToBottom.zip

1. Scrolling to the bottom when a new message is sentreceived.mp4

04:46

2.1 gptApp-emptyContainer.zip

2. Creating a view for when there are no messages.mp4

05:40

9. Image generation using DALL-E

1.1 gptApp-refactoring.zip

1. How to refactor our existing code.mp4

10:12

2.1 gptApp-generatingImages.zip

2. Generating images.mp4

09:04

3.1 gptApp-imageConversation.zip

3. Storing images to conversation history.mp4

07:14

4.1 gptApp-outputImages.zip

4. Outputting images.mp4

05:23

10. Settings screen UI

1.1 gptApp-stackNavigator.zip

1. Installing the stack navigator.mp4

04:33

2.1 gptApp-settingsNavigator.zip

2. Creating our settings navigator.mp4

04:56

3.1 gptApp-settingsTitle.zip

3. Settings page title.mp4

01:28

4.1 gptApp-dataItem.zip

4. Creating the data item.mp4

04:14

5.1 gptApp-dataItemText.zip

5. Styling the data item text.mp4

04:53

6.1 gptApp-dataItemIcon.zip

6. Adding an icon to our data item.mp4

06:12

11. Outputting settings

1.1 gptApp-dataListScreen.zip

1. Creating the data list screen.mp4

05:06

2.1 gptApp-dataListScreenNav.zip

2. Navigating to the data list screen.mp4

02:19

3.1 gptApp-passDataIntoDataListScreen.zip

3. Passing data into our data list screen.mp4

02:48

4.1 gptApp-dataListScreenTitle.zip

4. Setting the title of the data list screen.mp4

01:12

12. Updating settings

1.1 gptApp-installingReactRedux.mov.zip

1. Installing React Redux.mp4

02:56

2.1 gptApp-store.zip

2. Configuring our store.mp4

02:30

3.1 gptApp-settingsSlice2.zip

3. Creating our settings slice.mp4

07:14

4.1 gptApp-accessingSettings.zip

4. Accessing stored settings.mp4

04:44

5.1 gptApp-gettingSelectedValue.zip

5. Getting the selected setting value.mp4

05:38

6.1 gptApp-settingSettings.zip

6. Setting the clicked option.mp4

04:03

7.1 gptApp-logbox.zip

7. Addressing the warning in the console.mp4

03:30

8.1 gptApp-settingsNavigateBack.zip

8. Going back when a setting is selected.mp4

02:49

9.1 gptApp-isChecked.zip

9. Showing which value is currently selected.mp4

08:34

10.1 gptApp-usingPersonality.zip

10. Setting the personality in the conversation.mp4

06:11

13. Saving settings values between app refreshes

1.1 gptApp-asyncStorage.zip

1. Installing the AsyncStorage package.mp4

04:38

2.1 gptApp-startUpScreen.zip

2. Creating a start up screen.mp4

04:53

3.1 gptApp-gettingSettings.zip

3. Applying settings on app start up.mp4

06:48

14. Adding some more settings!

1.1 gptApp-mood.zip

1. Assistant mood.mp4

06:04

2.1 gptApp-applyMood.zip

2. Applying the mood setting.mp4

04:58

3.1 gptApp-responseSize.zip

3. Response size.mp4

04:48

4.1 gptApp-refactoringSettings.zip

4. [Optional video] Refactoring suggestions.mp4

09:46

5.1 gptApp-applyResponseSize.zip

5. Applying the response size.mp4

05:29

15. Advanced settings

1.1 gptApp-advancedSettings.zip

1. Creating the advanced settings page.mp4

05:11

2.1 gptApp-advancedSettingData.zip

2. Advanced settings data structure.mp4

05:49

3.1 gptApp-additionalAdvancedSettings.zip

3. Adding additional advanced settings.mp4

06:24

4.1 gptApp-outputtingAdvancedSettings.zip

4. Outputting the advanced settings.mp4

03:40

5.1 gptApp-advancedSettingSlice.zip

5. Accessing the advanced setting value.mp4

03:26

6.1 gptApp-inputScreen.zip

6. Creating the input screen.mp4

05:25

7.1 gptApp-inputScreenStyle.zip

7. Styling the input screen.mp4

03:13

8.1 gptApp-inputScreenProps.zip

8. Adding remaining input screen props.mp4

04:58

9.1 gptApp-isNan.zip

9. Checking if input is a number.mp4

03:48

10.1 gptApp-errorText.zip

10. Showing the error text when input is invalid.mp4

02:44

11.1 gptApp-remainingChecks.zip

11. Handling remaining number checks.mp4

07:16

12.1 gptApp-saveDisabled.zip

12. Disabling the save button on error.mp4

06:07

13.1 gptApp-saveAdvancedSettings.zip

13. Saving advanced settings.mp4

07:17

14.1 gptApp-initAdvancedSettings.zip

14. Initialising the advanced settings on start up.mp4

04:20

15.1 gptApp-preProcessChatOptions.zip

15. Pre processing the settings before using them.mp4

07:51

16.1 gptApp-usingChatOptions.zip

16. Using the settings in our chat request.mp4

05:26

16. [Optional] Creating a server for your API call

1. Setting up a server project.mp4

03:19

2. Creating an endpoint on our server.mp4

06:23

3. Moving GPT request code to our server.mp4

04:24

4. Calling our server endpoint from the app.mp4

07:47

5. Moving image generation code to the server.mp4

04:25

6. Calling the image endpoint from our app.mp4

08:56

7. Publishinghosting your server.mp4

09:48

Description

Learn ChatGPT by building an AI powered iOS and Android app using React Native. Includes custom server and REST API!

What You'll Learn?

Understand how to build an Android and iOS mobile app
Understand how to integrate with OpenAi's services
Understand how to create and deploy your own server
Understand how to develop your own REST API

Who is this for?

Any programmers that want to learn about app development and OpenAI/ChatGPT!

What You Need to Know?

Mac or Windows PC

Basic programming experience is highly recommended. We skip over much of the basics.

Basic React Native knowledge is recommended but not essential. Just be prepared to do some of your own investigation if you're an absolute beginner.

More details

Description
Do you want to unlock the full potential of AI in mobile app development using React Native? Are you intrigued by the idea of creating a chat application that not only sends messages but also integrates with the cutting-edge capabilities of ChatGPT for text and image generation?
You've landed in the perfect spot! This course is your comprehensive guide to building an innovative chat application from the ground up, leveraging OpenAI's Chat GPT.
Imagine developing an app that not only impresses everyone who sees it but also enhances your portfolio, making you stand out in the job market!

Why learn from me?
At Microsoft, I engineer solutions that reach millions globally, absorbing invaluable insights from some of the industry's best. Now, I'm here to pass those insights on to you through Udemy, where I've already taught tens of thousands of students across my popular courses.

What will this course cover?
Join me, step by step, as we create a Chat GPT-powered social network app, featuring:
Real-time chatting with AI-driven responses
Customizable chatbot personality and mood settings
Advanced message configurations for tailored interactions
Seamless image and text generation
Deploying your own server which hosts your own RESTÂ API
This course is designed for both beginners and seasoned developers, offering significant value regardless of your experience level. It is recommended however to have at least some experience. This isn't an introduction to React Native course so we don't cover all of basics in a huge amount of detail. If you're a total beginner, it's doable but you might need to do a little investigation if you come across some unknown concepts.Â

Why enroll in this course?
In today's tech landscape, mastery of React Native and AI integration isn't just impressive; it's essential. These skills are your ticket to opportunities at leading tech giants and innovative startups alike.
By joining this course, you gain direct support from me. Whether you're grappling with technical challenges, seeking advice, or curious about new features, I'm here to assist promptly and thoroughly.

And the best part? This journey is not just educationalâ€”it's incredibly fun. You'll have the freedom to inject your creativity into the project, making it uniquely yours.
Ready to start building the future of chat applications? Let's dive in!
*Note: While this course is beginner-friendly, it assumes basic familiarity with development concepts. Detailed explanations of foundational programming principles are not included, but I'm more than happy to clarify any questions you may have along the way!
Who this course is for:
Any programmers that want to learn about app development and OpenAI/ChatGPT!

User Reviews

Rating

average 0

Total votes0

Focused display

Hi there! My name is Reece Kenney, and I’m from Rugby, England. I currently work as a Software Engineer at Microsoft where I spend my days doing a range of front end and back end development using languages such as JavaScript, TypeScript and C# to name a few! Through my work at Microsoft, I have a lot of experience developing products that are used by millions of people every day! I’m also fortunate enough to work alongside some of the best and brightest software engineers in the world. I’m here on Udemy to share my knowledge with as many people as possible and hopefully make a difference in people’s lives. I love to teach and can’t wait to personally guide you towards your own personal goals! If you take any of my courses, you’ll have my full support every step of the way!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.