Your designer
is a full-stack dev

Your designer
is a full-stack dev

Sometimes when we design, we get caught up in our imagination.

Knowing how to code each design is critical to quickly shipping beautiful products.

In a nutshell

In a nutshell

26 years old. Born in Rome, Italy

Capabilities

Interaction designer

Marketer

Full-stack developer

Experience

Teta

Build with Theta

Dazero

IED

Actual

Solo founder @ dazero

Uni professor @ IED

Design & code teacher

Open to work or teach

Interaction designer

Interaction designer

Branding

Branding

Typography

Typography

Typography

Color palette and color blindness

Color palette and color blindness

Color palette and color blindness

Identity

Identity

Identity

Accessibility

Accessibility

Accessibility

Interfaces

Interfaces

How to make an app builder's interface responsive for mobile devices?

This what I asked myself when I made Teta. Before Teta, only Play had managed to create a similar tool for mobile devices, but from my point of view it was not immediate: too many gestures, it was difficult to understand the menus and have everything under control at all times. And of course all website / app builders use drag-and-drop, which is not possible on a phone. That's why I invented the “Tree View,” a rigid tree diagram that translated the widgets of a Flutter UI into a simple, straightforward, and beautiful to use scheme. Not only that, this allowed users to have full control even from mobile devices. In addition to the improved user experience, the Tree View was an essential branding element for Teta to immediately distinguish itself from competitors and become strongly identifiable on social.

How to make an app builder's interface responsive for mobile devices?

This what I asked myself when I made Teta. Before Teta, only Play had managed to create a similar tool for mobile devices, but from my point of view it was not immediate: too many gestures, it was difficult to understand the menus and have everything under control at all times. And of course all website / app builders use drag-and-drop, which is not possible on a phone. That's why I invented the “Tree View,” a rigid tree diagram that translated the widgets of a Flutter UI into a simple, straightforward, and beautiful to use scheme. Not only that, this allowed users to have full control even from mobile devices. In addition to the improved user experience, the Tree View was an essential branding element for Teta to immediately distinguish itself from competitors and become strongly identifiable on social.

How to make an app builder's interface responsive for mobile devices?

This what I asked myself when I made Teta. Before Teta, only Play had managed to create a similar tool for mobile devices, but from my point of view it was not immediate: too many gestures, it was difficult to understand the menus and have everything under control at all times. And of course all website / app builders use drag-and-drop, which is not possible on a phone. That's why I invented the “Tree View,” a rigid tree diagram that translated the widgets of a Flutter UI into a simple, straightforward, and beautiful to use scheme. Not only that, this allowed users to have full control even from mobile devices. In addition to the improved user experience, the Tree View was an essential branding element for Teta to immediately distinguish itself from competitors and become strongly identifiable on social.

Product Hunt Badge
Product Hunt Badge

What if the UI was streaming, remotely updatable?

That was the question I asked myself when I designed, and created, Build with Theta. It was a service to create remote, updatable UIs in real-time, to be able to update an app's interface without deploying the whole app. This cuts waiting time, especially for mobile stores. Designing such a system was challenging, as I also had to study a technical way to render an on-fly UI. So I had to use both my design skills, to create a visual editor that was simple, intuitive, and without much of a learning curve, but also design a standard to send UI data quickly to clients, optimizing uploads. The biggest challenge, for sure, was to create a versioning system, so a client app could stream different versions of the interface based on the version used by the user, so as not to create conflicts with new updates.

What if the UI was streaming, remotely updatable?

That was the question I asked myself when I designed, and created, Build with Theta. It was a service to create remote, updatable UIs in real-time, to be able to update an app's interface without deploying the whole app. This cuts waiting time, especially for mobile stores. Designing such a system was challenging, as I also had to study a technical way to render an on-fly UI. So I had to use both my design skills, to create a visual editor that was simple, intuitive, and without much of a learning curve, but also design a standard to send UI data quickly to clients, optimizing uploads. The biggest challenge, for sure, was to create a versioning system, so a client app could stream different versions of the interface based on the version used by the user, so as not to create conflicts with new updates.

What if the UI was streaming, remotely updatable?

That was the question I asked myself when I designed, and created, Build with Theta. It was a service to create remote, updatable UIs in real-time, to be able to update an app's interface without deploying the whole app. This cuts waiting time, especially for mobile stores. Designing such a system was challenging, as I also had to study a technical way to render an on-fly UI. So I had to use both my design skills, to create a visual editor that was simple, intuitive, and without much of a learning curve, but also design a standard to send UI data quickly to clients, optimizing uploads. The biggest challenge, for sure, was to create a versioning system, so a client app could stream different versions of the interface based on the version used by the user, so as not to create conflicts with new updates.

Product Hunt Badge

Mobile and web apps, multi languages, and dynamic themes

My designs, along with the products I actually code, integrate all the variables necessary for a professional design in production. Providing for a dynamic theme, flexible accessibility elements, and a visual structure that works in different languages allows me to create designs and software that are ready to scale in the future, as well as create a customizable environment that is suitable for each user.

Mobile and web apps, multi languages, and dynamic themes

My designs, along with the products I actually code, integrate all the variables necessary for a professional design in production. Providing for a dynamic theme, flexible accessibility elements, and a visual structure that works in different languages allows me to create designs and software that are ready to scale in the future, as well as create a customizable environment that is suitable for each user.

Mobile and web apps, multi languages, and dynamic themes

My designs, along with the products I actually code, integrate all the variables necessary for a professional design in production. Providing for a dynamic theme, flexible accessibility elements, and a visual structure that works in different languages allows me to create designs and software that are ready to scale in the future, as well as create a customizable environment that is suitable for each user.

3D / AR Memories -Social Network

Part of my thesis project for the Archaeological Park of the Colosseum, was a location-based social network for users to observe memories of their own or other users left precisely at that location. This allowed one to leave a memory, or a trace, exactly at the place one was visiting. In the context of the Park, this system was intended to incentivize visitors from around the world to leave their own memory next to the world's most beautiful monuments, giving them an excuse to return in the future to experience them a second time. Again, this system allowed the Organization to be able to leave guides and videos precisely around the monuments. I designed graphically and developed the entire project. The biggest challenge? How can a digital element be anchored to the physical space? If I see a memory in front of me, and I do a 360 with my phone, what does the memory do to stay in exactly the same position? To solve this problem, and really develop the project, I had to use a real “anchor,” a QRCode. In fact, the user had to scan the code, and from there the app began to calculate the displacement and orientation of the device via gyroscope. In this way, without using GPS, elements in AR could be placed even in small, indoor environments.

3D / AR Memories -Social Network

Part of my thesis project for the Archaeological Park of the Colosseum, was a location-based social network for users to observe memories of their own or other users left precisely at that location. This allowed one to leave a memory, or a trace, exactly at the place one was visiting. In the context of the Park, this system was intended to incentivize visitors from around the world to leave their own memory next to the world's most beautiful monuments, giving them an excuse to return in the future to experience them a second time. Again, this system allowed the Organization to be able to leave guides and videos precisely around the monuments. I designed graphically and developed the entire project. The biggest challenge? How can a digital element be anchored to the physical space? If I see a memory in front of me, and I do a 360 with my phone, what does the memory do to stay in exactly the same position? To solve this problem, and really develop the project, I had to use a real “anchor,” a QRCode. In fact, the user had to scan the code, and from there the app began to calculate the displacement and orientation of the device via gyroscope. In this way, without using GPS, elements in AR could be placed even in small, indoor environments.

3D / AR Memories -Social Network

Part of my thesis project for the Archaeological Park of the Colosseum, was a location-based social network for users to observe memories of their own or other users left precisely at that location. This allowed one to leave a memory, or a trace, exactly at the place one was visiting. In the context of the Park, this system was intended to incentivize visitors from around the world to leave their own memory next to the world's most beautiful monuments, giving them an excuse to return in the future to experience them a second time. Again, this system allowed the Organization to be able to leave guides and videos precisely around the monuments. I designed graphically and developed the entire project. The biggest challenge? How can a digital element be anchored to the physical space? If I see a memory in front of me, and I do a 360 with my phone, what does the memory do to stay in exactly the same position? To solve this problem, and really develop the project, I had to use a real “anchor,” a QRCode. In fact, the user had to scan the code, and from there the app began to calculate the displacement and orientation of the device via gyroscope. In this way, without using GPS, elements in AR could be placed even in small, indoor environments.

Marketer

Marketer

Viral marketer

Viral marketer

Teta - Viral Marketing Case Study

150k followers on TikTok after a few weeks. Reached +250k on TikTok, and +125k on IG in less than 2 years.

150k followers on TikTok after a few weeks. Reached +250k on TikTok, and +125k on IG in less than 2 years.

150k followers on TikTok after a few weeks. Reached +250k on TikTok, and +125k on IG in less than 2 years.

25k users in 5 weeks. 50k in 2 months. 370k in less than 2 years. Mainly organic from social.

25k users in 5 weeks. 50k in 2 months. 370k in less than 2 years. Mainly organic from social.

25k users in 5 weeks. 50k in 2 months. 370k in less than 2 years. Mainly organic from social.

The 'Traditional coding vs no-code' campaign was designed to show with a strong visual impact the ease and simplicity of Teta's no-code versus “classic” programming. This was done with a 3-slide template: title with mega fonts, screenshot showing a lot of code, which is very long and often complex, and the third where the code is turned into Teta blocks. Simple, minimal, but it has been very helpful to our growth.

What was the strategy?

What was the strategy?

Show a long work in fast speed, and show the result in less than 15 seconds

Show a long work in fast speed, and show the result in less than 15 seconds

Speed(No)Code

Realtime collaboration

The main goal was to show what Teta could enable, all visually. But creating an app, even in no-code, is a long process that takes days. To do this, we were inspired by the “speed codes” that were already viral in the dev sphere, but transformed them into the no-code sphere (with the advantage of being able to show a dynamic interface as well).


Our videos were centered on creating one / maximum two pages, speed coding but still able to give a broad understanding of the work done on the program, and then showing the final result on a phone.


Between the speed code and the result, we would show the Teta logo to imprint it in the user's memory.

All videos had the same format, and were less than 15 seconds long.

Social Launches

Social Launches

ProductHunt

ProductHunt

Product Hunt Badge
Product Hunt Badge
Product Hunt Badge

Not only for business

Not only for business

I write funny things about my life. On Threads, writing in Italian, I have 1-2 million views per month.

I write funny things about my life. On Threads, writing in Italian, I have 1-2 million views per month.

My writing on social media started as a game, I wanted to share my ideas on different topics and write fun things.


However, seeing an interest on the platform, which is the platform to use at the moment for an organic reach, I started posting seriously, also to earn money in terms of branding and to make my projects known.

Currently, I have an average of 1-2 M views per month, speaking in Italian.

Full-stack developer

Full-stack developer

Web & mobile apps

Web & mobile apps

Auting. Flutter iOS/Android app

Active on stores. Built with Flutter. Used by thousands of people each month.

Auting. Flutter iOS/Android app

Active on stores. Built with Flutter. Used by thousands of people each month.

Auting. Flutter iOS/Android app

Active on stores. Built with Flutter. Used by thousands of people each month.

Dazero. AI builder built with Flutter & SvelteKit (FE), Dart & Supabase Self-hosted (BE)

Try for free at dazero.co. Front-end built with Flutter & SvelteKit. Back-end built with Dart (server app serving API endpoints) & Supabase self-hosted version with Coolify. Landing page made with Framer. Made also several mascotte, called 'dots', representing different AI agents.

Dazero. AI builder built with Flutter & SvelteKit (FE), Dart & Supabase Self-hosted (BE)

Try for free at dazero.co. Front-end built with Flutter & SvelteKit. Back-end built with Dart (server app serving API endpoints) & Supabase self-hosted version with Coolify. Landing page made with Framer. Made also several mascotte, called 'dots', representing different AI agents.

Dazero. AI builder built with Flutter & SvelteKit (FE), Dart & Supabase Self-hosted (BE)

Try for free at dazero.co. Front-end built with Flutter & SvelteKit. Back-end built with Dart (server app serving API endpoints) & Supabase self-hosted version with Coolify. Landing page made with Framer. Made also several mascotte, called 'dots', representing different AI agents.

ChitChat, turn any site
to a social forum. Deprecated app built with Javascript, Flutter and Supabase

Closed since it didn't reach the PMF. Built with Plain JS (snippet), Flutter (FE) and Supabase (BE), including endpoints with Edge Functions. Firebase used for analytics and push notifications. Landing page made with Framer.

ChitChat, turn any site
to a social forum. Deprecated app built with Javascript, Flutter and Supabase

Closed since it didn't reach the PMF. Built with Plain JS (snippet), Flutter (FE) and Supabase (BE), including endpoints with Edge Functions. Firebase used for analytics and push notifications. Landing page made with Framer.

ChitChat, turn any site
to a social forum. Deprecated app built with Javascript, Flutter and Supabase

Closed since it didn't reach the PMF. Built with Plain JS (snippet), Flutter (FE) and Supabase (BE), including endpoints with Edge Functions. Firebase used for analytics and push notifications. Landing page made with Framer.

⚠️ CONTAINS FLASHING LIGHTS
Humachine. 2020 interactive installation.
Generative animation controlled by facial expression recognition, in real-time.

Firebase for real-time communication. App built with Flutter and Swift (BE). MLKit for face recognition.

In production

In production

Repositories

Repositories

Build with Theta

Mono repo. 7 Flutter / Dart packages and Theta's Playground app

Teta CMS

Dart package

Teta Widgets

Teta's widgets library. Flutter package

Teaching & tutoring

Teaching & tutoring

IED University

Full-stack web/mobile apps with Flutter & Supabase

Websites with SvelteKit

AI agents & Dart CLI / Web server apps

Design & thesis advisor

Tutoring

Flutter & Dart: from 0 to intermediate

Flutter & Dart: advanced course

Education

Education

University

IED Rome 110/110 with honors

School

IT School

Startup programs &

LVenture Group's Luiss Enlabs

ERA NYC Incubator - International program

Microsoft for Startups - Female Founders Mentorship

Flutteristas

Hire me or say hi!

Hire me
or say hi!

Open to new opportunities as designer, developer, or tutor. If interested, send me an email

andreabuttarelli.design@gmail.com