Build a banking app with Ant Design + Strapi.io
Tags: mobile, tutorial, react, productivity
Published: 2022-08-25 08:57:42

---
title: Build a banking app with Ant Design + Strapi.io
published: true
date: 2022-08-15 08:33:34 UTC
tags: mobile, tutorial, react, productivity
canonical_url: https://www.animaapp.com/blog/design-to-code/fullstack-react-app-figma-strapi-anima/
---
![Build a banking app with Ant Design+ Strapi.io + Anima](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1cxx8mk1lmaai3huq5z.png)

_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](https://www.animaapp.com/blog/industry/how-technology-solutions-can-partner-with-anima-to-expand-market-reach/)**, 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](https://projects.animaapp.com/signup) to Anima
2. Install the [Component Library for Figma plugin](https://www.figma.com/community/plugin/857346721138427857/Export-to-React%2C-HTML-%26-Vue-code-with-Anima)
3. Install [Node.js](https://nodejs.org/en/)


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


{% embed https://www.youtube.com/watch?v=MzbolYUwjZI %}


### 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](https://www.figma.com/file/TgxDJly8ucYyZv4MB8ONCw/SVB-web-app-redesign?node-id=0%3A1) 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660206539311/2bcZY0lHS.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.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660203921587/vwcAlb_nm.jpeg)_You 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660206573397/1QimM1OPY.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660206610736/s7zJ_DmtA.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.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660206649519/ilJz5q-Ub.jpeg)_You 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](https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html) to get Strapi up and running
2. Create your admin account

![6_Anima_strapi-quick-start-guide.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660206685767/AmestMtbB.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]

```

#### 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1660206713241/U1RkPLbES.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](https://github.com/AnimaApp/bank-website/blob/main/components/BalanceChart/index.jsx))

![8_Anima_populate-chart-data-with-api.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660206747729/VK6rnDh3z.jpeg)_Your chart is now using data fetched from your API_

### Build & Publish to Netlify

[Netlify](https://www.netlify.com/) is a great cloud to host React apps. Follow their [deployment guide](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) to connect your repo and automatically deploy your app.

Heres [how to deploy to Netlify](https://support.animaapp.com/en/articles/6249334-how-to-deploy-to-netlify).

Interested in joining our Partner Program, or seeing our tech partners? Get more info [here](https://www.animaapp.com/blog/industry/how-technology-solutions-can-partner-with-anima-to-expand-market-reach/).

**Additional resources:**

- [Live app on Netlify](https://anima-bank-demo.netlify.app/)
- [Source code on GitHub](https://github.com/AnimaApp/bank-website)
- [Figma community file](https://www.figma.com/file/TgxDJly8ucYyZv4MB8ONCw/SVB-web-app-redesign?node-id=0%3A1)