Logoist
May 2024
Overview
In collaboration with Elberd Galaiev and Shakhzodbek Sabirov, we developed an AI-powered app that generates minimalistic logos based on three trendy styles. The process is simple: users enter a logo name, describe the brand, and select a style, creating a logo tailored to their brand identity.
Links
Technology Stack
TypeScript
Next.js
Tailwind CSS
OpenAI
Clerk
Upstash
Features
- User Authentication allows secure login and access management for users.
- Rate limiting to control API usage and reduce costs.
- Theme Switcher: Toggle between light and dark mode using
next-themes
Purpose & Goal
This project was part of a weekly full-stack AI challenge, focusing on generating visually appealing, user-friendly image assets. The objective was to develop a logo generator that highlights our front-end, back-end, and AI integration skills using OpenAI’s API.
Working toward these goals shaped our approach and guided the choices we made for the tools and technologies to develop the project.
Web Stack & Explanation
Built with Next.js to leverage server-side rendering and SEO benefits, using the App Router to keep the structure organized, enhancing both performance and user experience.
To ensure type safety and minimize bugs, we used TypeScript to make the codebase easier to manage and scale, especially with complex components.
We used Tailwind CSS to speed up styling with a utility-first approach, keeping the design minimal and the code clean.
OpenAI's Dall-E 3 model powers the logo generator feature by generating custom designs based on the user's style of choice.
We used Clerk as it simplifies authentication with pre-built components, allowing more focus on core functionality.
To reduce high image requests, Upstash was used to enable efficient rate limiting with a serverless, Redis-based solution, keeping access fast and scalable.
Challenges & Thought Process
One of the primary challenges was managing API costs due to high image requests. To address this, we implemented a rate-limiting solution using Upstash to control the frequency of requests per user, ensuring sustainability while keeping the app open-source and accessible to everyone.
Another challenge was making sure the generated logos matched the styles we aimed for. Early prompts often produced logos that missed the mark. We had to experiment by testing different descriptions, and finding the right balance between detail and simplicity to guide the AI effectively.
We ran through multiple prompt variations to figure out what worked best. Adding clear details like specific shapes, color themes, and avoiding vague words made a big difference. This back & forth process helped us consistently get accurate and high-quality logos that matched the 3 style options, giving users a reliable and easy experience.
Learnings
Experimenting with OpenAI introduced me to building interactive, AI-driven features. It learnt how to format prompts and clearly define the AI's role to get better and more accurate responses.
Setting up Clerk for authentication saved time and provided insights into handling secure user sessions with minimal hassle. I also learned the importance of choosing third-party tools that simplify complex tasks without sacrificing security or user experience.
Collaborating with a team brought a fresh layer of teamwork and communication, working together to bring a shared vision to life.
Overall, developing this app was a rewarding dive into modern web technologies, each bringing something unique to the stack and challenging me to grow as a developer.