React Native Firebase Chat in 14 Minutes | Expo 50
Create a chat app starting from scratch using Expo and Firebase. In the project we use Firebase Firestore and Firebase Authentication to store user messages and user information. You'll also learn how to implement search using Firebase. Libraries used include react-native-gifted-chat and react-native-paper.
https://www.jeremypersing.com/blog/projects/projectjavelin
This was an app that myself and seven other students built for our senior project at Sacramento State University. I wanted to make this to document the process of what building the app was like, why we chose the technologies that we did, and some of the lessons that I learned along the way. We used the MERN stack to create this app, that being MongoDB, Express, React Native, and Nodejs.
...
https://www.youtube.com/watch?v=5BvGuz_frJU
In this video we will begin creating the PropertyDetailsScreen. This screen displays everything about a certain property like the location, pictures, available apartments, cost, reviews, unique features, and much more. Because this screen has so many features and different sections, the creation of each section will get its own video. I'm doing this because if I didn't do this, the video for creating this screen would probably run over two hours.
...
https://www.youtube.com/watch?v=WHt-nxVzlv0
In this video we create the Amenities Section for the Property Details Screen.
Github: https://github.com/JeremyPersing/apartmentsclone
...
https://www.youtube.com/watch?v=yjl5_gxQtxs
In this video you'll learn how to create a stock market dashboard to display important company information.
GitHub: https://github.com/JeremyPersing/intermediate-stock-dashboard/tree/main
Websites: https://revesta.net
https://jeremypersing.com
...
https://www.youtube.com/watch?v=XZCLRacNBAw
This is a tutorial on how to implement Google like search into your application. This is often referred to as full text search with SQL databases. This allows the user to search for an item, and have similar items suggested to them. In addition to this, you'll learn how to implement fuzzy searching, which will allow the user to misspell words and get accurate suggestions. The tech stack that I used to do this was MongoDB, Nextjs, Nodejs, and Material UI. However, you can use whatever you like for the frontend and backend technologies. You really only need to use MongoDB to set up the database and search indexes.
Link to the code: https://github.com/JeremyPersing/mongosearch_tut
Link to Dataset (Too large for Github): https://drive.google.com/file/d/1IMSnKybjmCt3rHL8L2jJzuB3kwNHrLeO/view?usp=sharing
Documentation and Resources used:
https://docs.atlas.mongodb.com/atlas-search/autocomplete/
https://www.youtube.com/watch?v=3IDlOI0D8-8
https://www.youtube.com/watch?v=-sRcpGpd-0s
https://mui.com/components/autocomplete/#search-input
Timestamps
0:00 - 0:20 Intro
0:21 - 3:24 Creating a database in MongoDB
3:25 - 9:19 Starting on a Nodejs backend
9:20 - 13:00 Creating search indexes with MongoDB
13:01 - 19:00 Finishing backend
19:01 - 23:20 Creating frontend components for first autocomplete method
23:20 - 24:09 First autocomplete demo
24:10 - 25:15 Creating frontend components for second autocomplete method
25:16 - 26:20 Demo and Comparison
26:21 - 27:16 Handling a suggestion being clicked
27:17 - 27:37 Demo
27:38 - 27:48 Outro
...
https://www.youtube.com/watch?v=_ayP3rSec54
Here is episode 2 of the React Native Apartments.com clone series. In this video we go over how to create an Animated Header that will scroll up when you scroll down on your screen. We also go over how to implement react native maps into your project.
GitHub: https://github.com/JeremyPersing/apartmentsclone
00:00 - 00:18 Intro
00:19 - 10:10 Creating an Animated Header
10:11 - 32:25 Refactoring the Animated Header to its own Component
32:26 - 47:12 Refactoring Animated Header Components
47:13 - 53:39 Implementing React Native maps
Tags: React Native, Expo, Animations, React Native Animations, Maps, IOS, Android, Cross Platform, Refactor, Coding
...
https://www.youtube.com/watch?v=Qh_qAQ4prfI
This video explains how to connect to a MongoDB database using TypeORM. The video assumes that you already have a database set up to connect to.
...
https://www.youtube.com/watch?v=UEhhjxlh--s