Make a component that shows off a list of users posts in a style similar to tinder. In this video, learn how to use external packages and the match store to create a tinder like match interface.
- [Instructor] Previously, we worked on setting up…our matches store.…This time, we'll hook that matches store up to a component…that lets you swipe cards left and right.…To start, let's open up the login component,…and we're going to copy and paste everything…from line one down to about line 15.…Copy that, make a new file,…and we're going to call this matchList.js.…In here we're going to paste,…and let's do a little bit of cleanup.…First, you're going to remove InputGroup and Input,…and we're going to add Thumbnail,…and we're going to add Text.…
Down here on line 11, we're going to add a new import,…and this one's going to be autoSubscriber,…and that's going to come from firebase-nest.…Which is the dependency of our mobx firebase store.…What an auto subscriber will do is make our…components subscribe and unsubscribe to the…correct fire-based queries automatically.…This is going to cut down on our development time,…and potential errors.…Let's remove the observer decorator.…Change our class's name to MatchList,…
- Setting up your project and Firebase account
- Creating the app container
- Setting up basic navigation
- Creating a splash screen
- Creating a login screen
- Creating a match feature
- Creating a post feature
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Web Interface with React.jswith Ray Villalobos1h 21m Intermediate
1. Getting Set Up
2. Building an App
3. Create a Login Screen
4. Create a Match Feature
5. Create a Post Feature
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.