DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Anima App
Anima App

Posted on • Originally published at animaapp.com on

Build a banking app with Ant Design + Strapi.io

Build a banking app with Ant Design+ Strapi.io + Anima

Anima is back end, design tool, and hosting agnostic. We're able to help our users ship products 10x faster by seamlessly integrating with a diverse range of tools and solutions. Occasionally, we like to test our approach by building a design-to-code solution that delivers on this.

Through the Anima Partners series, we'll look at how you can partner technology solutions with Anima to optimize your design-to-code workflow.


We redesigned the Silicon Valley Bank (SVB) banking app using Animas open source Component Library for Figma, connected our data, and went live in two days.

With Animas ready-to-use React components from Recharts and Ant Design, it took us 1 day to design and 1 day to go live using Strapi's headless CMS as the back end, with the app being deployed on Netlify.

How to build a React app fast with Figma + Anima + Strapi.io

Before starting

  1. Sign up to Anima
  2. Install the Component Library for Figma plugin
  3. Install Node.js

Partnered tech solutions used in this build: Figma + Recharts + Ant Design + Strapi.io + Netlify

Part one: Make your design interactive

We have a ton of interactive open source React components in our Figma plugin. Use them to create your own design file or duplicate our sample file to get started.

Step one: Explore the Component Library

  1. Open the Component Library for Figma plugin
  2. Select Component Library

2_Anima_bankingapp.jpeg

Step two: Insert a chart

  1. Select Charts from the Component Library menu
  2. Choose the chart you want to use and customize it for your application
  3. Click insert to add the chart to your canvas, then incorporate it into your design

1_Anima_bankingapp.jpegYou can use the component library to insert any components you like

Part two: Convert your Figma design to React code using Anima

Once you're happy with your design, you can export it as developer-friendly React code using Anima.

Step one: Sync to Anima

  1. Open the plugin in Figma
  2. Click Preview, then Sync

3_Anima_bankingapp.jpeg

Step two: Export React code

  1. Open your project in the Anima web app and select Export code
  2. Change Selected Framework to React
  3. Export code for the whole project

4_Anima_export-figma-to-react.jpeg

Step three: Run locally

  1. Unzip the downloaded code 2. Open terminal in the Anima code folder
  2. Run npm install
  3. Run npm start
  4. Open http://localhost:1234

5_Anima_run-react-code-localhost.jpegYou now have the app running locally

Part three: Connect the charts to your data

Next, you want to populate your charts with real data from an API. To do this, we're going to set up Strapi and get our app connected to it. If you'd prefer, you can use the REST API of your choice instead.

Step one: Set up Strapi

  1. Follow this Quick Start Guide to get Strapi up and running
  2. Create your admin account

6_Anima_strapi-quick-start-guide.jpeg

Step two: Connect your app to Strapi

  1. In Strapi, go to Settings > API Tokens > Create a new API Token
  2. Copy the API token
  3. In the project folder, create a file called .env
  4. Add the URL and Token (without the word Bearer) to this file:
API_URL=http://localhost:1337/api/
API_TOKEN=[YOUR API TOKEN]

Enter fullscreen mode Exit fullscreen mode

Step three: Populate data in Strapi

  1. In Strapi, go to Content-type builder and create a new collection type
  2. Name the collection BalanceHistory
  3. Add the following fields:
    • Month: Date
    • Amount: Number (Decimal)
  4. Create entries for BalanceHistory and publish each one

7_Anima_populate-data-in-strapi.jpeg

Step four: Populate chart data using API

  1. Open the code for one of your charts (i.e. BalanceChart)
  2. Add code to fetch data from the Strapi API
  3. Replace static data with fetched data in the chart args (here's an example)

8_Anima_populate-chart-data-with-api.jpegYour chart is now using data fetched from your API

Build & Publish to Netlify

Netlify is a great cloud to host React apps. Follow their deployment guide to connect your repo and automatically deploy your app.

Heres how to deploy to Netlify.

Interested in joining our Partner Program, or seeing our tech partners? Get more info here.

Additional resources:

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›