How I built an AI Image Generation Web App

CMN
3 min readApr 5, 2023

--

Home page of the AI Image Generation App with some images shared.
Home page of the AI Image Generation App with some images shared.

Have you noticed the recent trend of discussions around AI on the internet? ChatGPT has been leading the conversation in this topic for the past year, with many people discussing its capabilities, how it will impact the job market, and even proposing new careers such as prompt engineering.

For my portfolio project to complete my Foundations course on ALX, I delved into the world of AI and discovered the concept of image generation based on prompts. OpenAI, the company behind ChatGPT, has developed a model called DALL-E that creates images from textual prompts. While DALL-E is not the only model that generates images from prompts, other companies such as MidJourney and Stable Diffusion also offer similar tools.

My aim with this project was to create a web app that could inspire and help people explore their artistic sides, regardless of whether they consider themselves artists or not. With this app, artists can find inspiration for their work, while non-artists like myself can describe our ideas and let AI generate the corresponding images.

The main tasks involved in building the app were creating a responsive design that would work well on both mobile and web interfaces, and sourcing the API that would run the image generation. As a solo developer, I handled both the frontend and backend of the project, which took me roughly 6 weeks from ideation to implementation, with the last 2 weeks spent on building the minimum viable product (MVP).

Architecture of the App
Architecture of the App

For the backend, I used Express as the framework of choice and Node.js as the web server. Express was easy to use when creating APIs and connected seamlessly with the database. To store the images generated by DALL-E, I used MongoDB, which was simple to set up and run. To optimize memory usage, I used the Cloudinary platform to host the images, with the database storing links to the images. For the frontend, I used React along with Tailwind CSS for styling.

The completed project is mobile-friendly and allows users to share their images with the community, which are showcased on the home page along with the user’s name and prompt used. Although I initially struggled with understanding the concepts of React and Tailwind CSS, I was able to learn and integrate them successfully, which helped me create a satisfactory frontend that is responsive on both mobile and web interfaces.

All in all, these past 6 weeks have been blissful as I have added new skills and knowledge to my arsenal. I have learnt about new technologies that I didn’t know or understand before embarking on this project. Some notable ones are Tailwind CSS and React, as well as using MongoDB in a real world situation. I have learned that as a software engineer, I’m only limited by my grit and desire to consume more knowledge. Of course, how can I forget about finally having a site live on the internet for the first time ever! I graduated from localhost to a live url! Would I do anything differently if I had another stab? No! Because the experiences, the mistakes, the faltering, have molded me in ways that may not be obvious right now, but I’m definitely growing as a software engineer due to them.

In conclusion, I am Clinton Nyakundi Mokaya, and I am on my way to becoming a software engineer. You can find me on Github or LinkedIn. Check out the landing page for my portfolio project and the AI image generation app, and play with it while OpenAI’s credits last! 🚀

--

--

CMN

Hello! Join me on my journey in software engineering, web3 and other things.