This content originally appeared on DEV Community and was authored by notavailable4u
This post is my submission for DEV Education Track: Build Apps with Google AI Studio.
What I Built
For the app concept, I thought it would be fun to build an app that was able to create a Memoji based on a photograph of your choosing.
Initiating Build Prompt
Here is the exact prompt I entered to initiate the creation the project:
“Please create an app using React, Typescript, and Tailwind CSS that generates a memoji based on a JPG or PNG picture submitted by the user. Please use Imagen for the visuals, and Gemini to create any text descriptions or instructions needed. You can use the attached JPG as a sample”
(I submitted my LinkedIn profile picture as the test sample.)
Demo
I chose to deploy the app via GitHub pages and you can try out the live version and view the source code on my GitHub repo page.
Screenshots
App Main page: Desktop view
Sample Memoji-1 Result page: Desktop view
Text of Bio generated by AI for Sample Memoji-1:
Behold! Here’s the deep-thinking dude whose grey, gravity-defying waves always seem to be caught in a thoughtful breeze, framing an oval face ready for its close-up. With almond-shaped green eyes that could probably solve a riddle just by blinking, and a perpetually furrowed brow that screams “I’m pondering the very meaning of existence (or where I left my keys)”, this avatar’s direct, pensive gaze is softened only by the lightest, most charming five o’clock shadow. Don’t expect witty banter, though – their closed, neutral mouth hints at a mind that’s always on overdrive, observing the world one profound, silent thought at a time!
Sample Memoji-2 Result page: Desktop view
Text of Bio generated by AI for Sample Memoji-2:
Prepare to meet the one, the only, Professor Ponder! With a magnificent tidal wave of silver hair that defies gravity and sweeps upwards like it’s perpetually catching an excellent idea, this character’s dark brown, almond-shaped eyes, peeking out from behind a very serious, yet subtly stylish pair of rectangular glasses (think ‘intellectual chic with a hint of secret agent’), hold more unanswered questions than a pop quiz. Always clean-shaven and sporting an intensely pensive expression with a perfectly neutral mouth, they’re not just looking at you; they’re analyzing the very fabric of reality… or maybe just trying to figure out if you’re going to share your snacks.
App Main page: Mobile view (Pixel 7 Pro)
Sample Memmoji-3 Result page: Mobile view
My Experience
At the risk of sounding like the old man that I am, I have to say I find it amazing, and a little terrifying, that AI can generate an entire app from one single sentence, in under three minutes. The app is not complete. There are still more features and changes that need to happen. Still; I am a novice level developer so it would have taken me at least a month, and considerably more cursing, to complete the same amount of work. I did make one, small CSS layout correction to the code – which saved me from feeling completely useless. 
The AI also generated a text ‘Bio” for the memoji, which I thought was interesting since I did not explicitly ask for that feature. I was following along with “Thinking” section in the Code Panel as the app was being created – which was fascinating. In order to make a memoji based on an image, it first needed to know what the uploaded image was; so it wrote its own prompts for Gemini to describe the original image. I’m not sure why it decided to use those descriptions to create a “Bio” for the memoji, but I liked the result. It gave me a feature I didn’t even know I wanted !
Speaking of the “Thinking” section, I mistakenly thought that, similar to a standard ChatGPT interaction, those notes would be saved so they could be referenced again later. They are not. So, just a “Heads Up” to anyone using the Build feature for the first time: If you find the notes in the “Thinking” section useful, you will have to manually copy and save them (or ask the AI to do that for you). As a new developer, I think I could have learned a lot reading about the reasoning behind the code choices from those notes.
There are more features and improvements that could be added to the app as it is now, and it would be easy enough to do so with prompts, but at this point I would like to focus on learning to build with the Gemini Developer API.
I’m new to Web Development with novice-level coding knowledge; and even less knowledge about AI. This project was a great introductory-level Programing With AI lesson and I’d like to thank everyone at DEV and Google AI for offering it.
This content originally appeared on DEV Community and was authored by notavailable4u