Bank website

A functioning bank app powered by Anima: Live Demo

In this tutorial, we redesigned SVBs banking dashboard using Anima's open source Component Library for Figma, then connected our data using Strapi's headless CMS.

Anima brings leading open source libraries like Ant Design, MUI, and Recharts into Figma, enabling R&D teams to ship React apps faster than ever.

Figma file

Youtube

Blog

Instructions

Run locally

cd package_code
npm install
npm start

Open http://localhost:1234.

Build for deploying

After building, you can upload dist folder to a hosting service like Netlify

cd package_code
npm install
npm run build

You will also need to Deploy Strapi and update the .env parameters

Deploy to Netlify

Edit README and replace myorg and myrepo for one-click deploy

Use Strapi (optional)

1. Create a Strapi API following their quick start guide
2. Create a .env file and add the following variables:
   • API_URL: The url of your strapi service (i.e. http://localhost:1337/)
   • API_TOKEN: An API token for strapi (excluding the word 'bearer')
3. Create the Schema and populate with data
4. Update components to load data from strapi
   • Add url endpoint to component (i.e. balanceUrl = ${process.env.API_URL}balance;)
   • Add state to hold value (i.e. const [value, setValue] = useState(0);)
   • Add fetch code to populate data from stapi. i.e:

useEffect(() => {
    fetch(balanceUrl, {
        headers: { Authorization: `Bearer ${process.env.API_TOKEN}` },
    })
        .then((res) => res.json())
        .then(
        (result) => {
            setValue(result.data.attributes.Amount);
        },
        (error) => {
            console.log(error);
        }
        );
    }, []);
)