You will create an application in this course that is inspired from the CRM prototype course. If you have taken the prototype course feel free to skip this video, as this video introduces the prototype and design files from the framer course. If you haven’t follow along.
- [Instructor] The application we'll create in this course is inspired from the one I created in my course called Prototype a Mobile CRM Application with Framer. If you have taken the protoype course, feel free to skip this video. Otherwise feel free to take the course or follow along. Okay so the first thing you do is go into the exercise files, you click on the Resources, and in the Resources you're going to have a CRM.afdesign file. This is the file that I use to create the design.
You don't need to have Affinity Design for this course, but if you do you can open that and follow along, otherwise I have also a PDF that you can open as well. Okay so let's make this full screen. So this is the final application, what it's going to look like. So this is the first view once you click on people, you're going to have a scroll view where you can actually scroll each of the items in your application. On the next screen you're going to have, and this is the add screen right here, you're going to have a way of adding new contacts into your CRM.
And then on the third screen you're going to have the companies list. So basically every time you add a new person you put a company to the person, you'll be able to combine them into one company and have multiple names for the company. And this is what a detail view for the contact looks like. So on that particular view you'll be able to see the phone number, the email for the person, the project, notes that you put for that particular person. You'll be able to edit the person, also delete and if you want to act on it, you can actually call, do an SMS and email with the application.
So this is what it's going to look like when you're done with the application.
- Initializing React Native projects
- Projecting a folder structure
- Installing material kit and vector icons
- Coding a login form and a loader
- Setting up Firebase email auth
- Using the React Native debugger
- Creating a list view, a detailed view, and a menu
- Setting up Redux
- Coding the scroll on detail view
- Adding clickable buttons
- Setting up Firebase for the back end
- Creating the new add person form
- Completing functions