Wizmage - Full Stack AI Image Generator Application

Welcome to Wizmage - an AI-powered image generator that turns your wildest dreams into reality. With Wizmage and the help of OpenAI, you can create stunning and unique artwork using the latest advancements in artificial intelligence. Whether you're an artist, designer, or just someone looking to unleash your creativity, Wizmage is the perfect tool to take your ideas to the next level.

The app is built with a React frontend and aa Node.js with Express.js backend, and deployed using Vercel and Render.

Check out the app for yourself:

https://wizmage.vercel.app

Here are the GitHub repositories for the frontend and backend:

Frontend: https://github.com/hiluan/wizmage.f
Backend: https://github.com/hiluan/wizmage.b

In the frontend, I use React to communicate with the backend API, which is powered by OpenAI's DALL-E and Cloudinary's image hosting service. In the backend, I use Express.js to serve the API and handle requests, and Render to host and scale the app.

Features

Home: The home page is the landing page of the app, and it provides a brief introduction to the app and its features.
AI Image Generator: This is the main page of the app where users can generate various types of images using artificial intelligence. Users can choose from a range of different styles, including abstract, landscape, and portrait.
Gallery: The gallery page displays a collection of images that have been generated by the AI Image Generator. Users can browse the gallery and view images generated by other users.
About: The about page provides information about the app and its developer. Users can learn more about the technology used to build the app, as well as the team behind it.

How It's Made

Technologies used:

Front-end:

React: A JavaScript library used for building user interfaces, React is used in the Wizmage frontend to create and manage the app's UI components and their states.
Tailwind CSS: a utility-first CSS framework used to style the UI
React Router: a package that enables client-side routing in React applications, allowing for easy navigation between pages without needing to refresh the entire page.

Back-end:

Node.js: a JavaScript runtime used to build server-side applications.
Express.js: a Node.js framework used to build the app's API, handle requests, and route data.
OpenAI API: an API used to generate images.
MongoDB: a NoSQL database used to store and manage data related to generated images.
Mongoose: a MongoDB object modeling tool used to provide a schema-based solution to model data, create a schema for image data, and to interact with the MongoDB database.
Cloudinary: a cloud-based image and video management solution used to store, manipulate, and serve generated images for the application.

Navigation and Pages:

Navigation with Navbar

The Navbar is responsible for providing easy navigation for the user. It is always present at the top of the screen and allows the user to easily move between the different pages of the application. The Navbar includes links to the home page, the about page, and the image generator page. The Navbar also includes a dropdown menu with a list of different image categories that the user can select from to generate specific types of images. Overall, the Navbar plays a key role in enhancing the user experience and making it easy for users to access the different features of the application.
Home Page's Slideshow

The home page in this app features a full-width slideshow with fresh shared images. Its main responsibility is to showcase the capabilities of the AI image generator and provide a way for users to interact with it. By displaying a range of images generated by the app, users can get a sense of the different styles and variations that are possible with Wizmage. This helps to draw users in and encourages them to experiment with generating their own images. The slideshow is a visually engaging way to display the app's capabilities and help users get started with creating their own unique images.
Home Page's Image Generator

The home page also allows users to generate their own AI-generated images by selecting a specific style and providing an optional prompt for the AI. On this page, users can choose from various pre-defined styles, and if desired, provide a prompt to help guide the AI's generation process. Once the style and prompt (if any) are selected, the user can initiate the generation process by clicking the "Create" button. This will send a request to the backend API, which will generate a new image and send it back to the frontend for display. Users can then choose to save the generated image by clicking the "Save" button, or generate a new image by selecting a different style or providing a different prompt.
Home Page's Gallery

The gallery displays the generated images created by the AI model. The page displays the images in a grid layout with each image clickable to view in full-screen mode. The gallery is responsible for showcasing the range of image styles that can be generated by the app and allowing the user to explore and select the images that they like. It's an important aspect of the app as it serves as a visual showcase of the AI model's capabilities and provides a way for users to find and select images that they want to use.
Deployment

The deployment process involves hosting the backend API on Render.com and frontend on Vercel.app. It is important to ensure that the local environment variables are not pushed to the server by creating a .gitignore file and ignoring certain files such as /node_modules and .env. The code is then pushed to a GitHub repository and the deployment process can begin.

Optimizations

Image optimization: The app uses Cloudinary, an image management service, to optimize and serve images. This improves the loading time of images and reduces the file size of images to improve performance.

Caching: The app uses caching to improve the loading time of frequently accessed data, such as images and API responses. This helps to reduce the number of requests sent to the server and improves the overall performance of the app.

Lazy loading: The app uses lazy loading to defer loading of images until they are needed. This helps to reduce the initial loading time of the app and improves the overall performance.

Deployment optimization: The app uses Vercel, a cloud platform for serverless deployment, to optimize the deployment process. Vercel's built-in optimizations, such as automatic code splitting, improve the loading time of the app and reduce the time it takes to deploy new changes.

Lessons Learned

Using machine learning to generate images: The app demonstrates the power of AI in generating artistic images.
Building a full-stack app: The app showcases the process of building a full-stack web application, including the development of both the front-end and back-end components.
Responsive design: The app has a responsive design that allows it to be easily used on different screen sizes.
Hosting and deployment: The app demonstrates the process of hosting and deploying a web application using various platforms, such as Vercel and Render.
Optimizing performance: The app utilizes several techniques for optimizing performance, such as lazy loading and image compression.
Using modern web technologies: The app utilizes modern web technologies, such as React, Node.js, and MongoDB, to create a dynamic and scalable application.
Debugging and troubleshooting: The app highlights the importance of debugging and troubleshooting in the development process, as the developer encountered several issues that needed to be resolved.
Continuous improvement: The app demonstrates the importance of continuously improving and updating a web application, as the developer plans to add new features and improve existing ones in the future.

Other Examples:

Take a look at these examples that I have in my portfolio:

datanexus.vercel.app - Fullstack Data Management Application https://github.com/hiluan/datanexus-admin-dashboard-frontend

nurbier.vercel.app - Fullstack Ecommerce WebApp https://github.com/hiluan/nurbier-ecommerce-webapp-frontend

hiluan.dev - Portfolio Page https://github.com/hiluan/hiluan-frontend