As you might have heard, we recently redesigned the Smartcar dashboard. Our goal at Smartcar is to make building apps that communicate with cars fast and simple — and the goal of the redesign was to make the process of getting started with Smartcar much easier.
One of our redesign’s many improvements was to reduce the number of steps you have to complete between logging in and viewing your API credentials. In our old dashboard, you would have to select an application on every login. Our redesign has eliminated this unnecessary friction point, reducing the amount of time and the number of steps it takes to get started with the Smartcar API.
The task of removing an application selection page — a page where we list all of your apps and let you pick the configuration you want to see — forced us to think through the following questions:
In this blog post, we’ll explain how we tackled each of these questions using React-Router, Redux, and Redux-Sagas. In other words, what happens behind the scenes during your first few seconds on the Smartcar dashboard?
If you signed up on our old dashboard, we would force you to “Register an App” on login. As a developer, you would:
This flow presented the following friction points:
If you already created an account and registered an app, and then logged into our old dashboard, you would:
Similarly to our signup flow, this process wasn’t perfect:
Finally, if you tried to navigate to an application that you do not have access to (e.g. if you’ve bookmarked an app from another account), we would render an “Application Does Not Exist” component that lets you choose an existing application or register a new one.
In our redesigned dashboard, we simplified the login flow as follows:
We load an error page with links to your existing applications, and a button to register a new app.
Here’s how we implement this flow in our React app:
When you first log in to the dashboard, we render an InitializeApplications component. This component renders a spinner and dispatches an “INITIALIZE_APPLICATIONS” action to the redux store on mount.
Our Saga middleware intercepts the Redux action, and executes the following:
Step 2.1: Fetch applications
Step 2.2: Check size of the applications array
If the user doesn’t have any registered applications, automatically register an application.
Step 2.3: If a selected application exists (in local storage), load the selected app
If the user is logging back in on the same device, we can extract their most recently selected application. This is because we use Redux-Persist to persist elements of the user’s redux store in local storage.
Step 2.4: Otherwise, load the user’s most recently registered app
Here’s what our initialize applications saga looks like (edited for clarity):
Now, we render the application! If an application doesn’t exist in the user’s set of applications, we render an “Application Not Found” page.
Here’s what the credentials view looks like to the user:
Smartcar is an API that allows mobile and web apps to communicate with connected cars (think “check odometer” or “unlock doors”) — across vehicle brands, no hardware needed.