Creating an app like Instagram with CraneAi using React Native (part 1 — authentication)

By Ryan Hickman

TL;DR Sign up to download the code

This tutorial will use React Native and demonstrate how to create an app similar to Instagram using CraneAi. This is the first of a 4 part series which include:

  • Part 1 — Creating authentication
  • Part 2 — Interacting with the Camera
  • Part 3 — User profiles
  • Part 4 — Social Interactions (following, liking, comments)
Auth workflow

CraneAi is a powerful tool to help teams create better, working software faster with the assistance of artificial intelligence. Developed by the CraneAi team it uses a.i. to help teams code, manage, document, debug and ship mobile apps, at a fraction of the time and cost. Developers still write code and contribute in the tools they love, designers still use the tools they are accustom too — fusing it altogether in a more collaborative.

React is one of the most popular front end Javascript frameworks, developed by facebook and used by countless tech companies including Netflix, Airbnb and Github to build applications. React is a declarative library that makes it easy to create interactive user interfaces, keeping the code base organized through its component based architecture.

Having designs speeds up things when using CraneAi, however it’s not a requirement. For this tutorial the screen concepts we will need for this are the following:

  • Sign Up
    Allows users to create a new account. You can add additional fields if you would like. CraneAi will detect them as well and map them in.
  • Login
    Allows users to log in to their existing account.
  • Forgot Password
    Allows user to reset their password using email based workflow.
  • Forgot Password success
    Communicates to the user what they should do to complete resetting their password
Application screens

Import your designs into CraneAi and the processing will begin. CraneAi uses AI to understand each view, creating tasks, docs and code to unify your team with the AI co-developers. Learn how CraneAi uses artificial intelligence.

Import your ideas — CraneAi will link everything together

You can use the visual code editor and change the recommended navigation paths to a customized flow that meets your goal. If you click a view the detail panels will appear. On the left you can view the layout of elements and optionally rearrange them.

Click on a UI component in the selected view and the right panel will appear. The panel will show the specific properties of the selected element including auto layout, position, component properties and design system mappings.

If you update these properties your code output will be adjusted to match.

Learn more about CraneAi’s visual code editor.

Customize in CraneAi’s visual code editor

The styles that are extracted from each uploaded screen are mapped to a design system. Even if your imported views aren’t based on a design system the AI will automatically create one to optimize your project’s workflow to a component based one.

With a design system in place whenever you adjust a design element such as a color, font or component style it will update it globally across your project including in your code.

In this tutorial the design system styles are mapped into a centralized file in the final code output. No styles are inline allowing for DRY codebase that is easier to mange long term.

import Colors from ‘/variables/commonColor’;
Design System Manager

CraneAi is doing much of the heavy lifting for you. Remember — you can customize any of the ai-based recommendations.

You can also view the code directly from the git repo. All the code in the editor is directly synchronized with Github.

CraneAi doesn’t just product the view code, it also produces the server code as well to power the network operations of the application. This allows you to create more than a prototype. With CraneAi you can create production-ready code for both the server and client.

Internationalization is built into the code engine of CraneAi making all the apps you create ready to support many languages. The AI-based NLP engine using a natural language technique to transform the text it reads in your imports into i18n mappings.

export default {
'Login': 'Login',
'Email': 'Email',
'Forgot Password': 'Forgot Password',
'Password': 'Password',
'Already have an account? Sign In': 'Already have an account? Sign In',
'By creating an account you agree to our Terms & Privacy': 'By creating an account you agree to our Terms & Privacy',
"Don't have an account? Sign Up": "Don't have an account? Sign Up"
};

Sign up to receive updates and access to the project and git repo. Stay tuned for the next part in the series. If you are interested to learn more about CraneAi or if you have experience with AI and love to learn shoot us an email team@crane.ai. 🙏🏽