Creating an app like Instagram with CraneAi using React Native (part 1 — authentication)
This is an adaptation of my Building Apps using Artificial Intelligence series.
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)
CraneAi:
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:
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.
The design
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
Import the designs
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.
Each screen that is uploaded undergoes an analysis where the views are named, styles are tied to a design system, elements are mapped and navigation is auto linked.
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.
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’;
From the visual editor update your project so that the navigation flow reflects the intent in your project.
CraneAi is doing much of the heavy lifting for you. Remember — you can customize any of the ai-based recommendations.
From the bottom panel, open the code editor to explore the code created by CraneAi
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. 🙏🏽
