I built a Photo Editing App with Webcrumbs and GitHub Copilot🔥

Have you ever spent hours adjusting a design, trying out different styles, or browsing websites for ideas?

Whether you're a developer trying to get the right look or a designer perfecting colors and shadows, the UI design process can feel never-ending.

Even with GitHub Copilot helping you write code faster, changing the UI is still a manual process. Copilot can suggest layouts, but it doesn’t help when you need to quickly switch themes or experiment with styles.

What if you could skip the trial and error and instantly see multiple design variations with just a few clicks?

No more guessing, no more writing long prompts for LLMs to explain UI designs and no more rewriting styles.

That's exactly what Webcrumbs's Frontend AI does. It lets you generate, tweak, and apply design styles instantly, saving hours of work.

Let’s see how it works!

What is Frontend AI?

Webcrumbs's Frontend AI is a browser tool that combines AI with a visual editor to help developers build websites quickly and easily.

It works like a smart assistant, that allows you to design using drag-and-drop, adjust components in real-time, and instantly preview your work on different devices while creating clean code in the background. The AI gives personalized suggestions, and multiple styling options, and improves layouts for responsiveness. It’s a great tool for both design and coding, it helps automate repetitive tasks, making sure your UI is polished, user-friendly, and easy to create.

Introducing Webcrumbs’s "Change Design" Tool

The Webcrumbs team keeps updating Frontend AI which helps developers and designers to build UI more easily.

The Change Design Tool is a big part of this. With this new feature, you can change your design to any style with just one click. You don't have to worry about matching colors, styles, or writing long prompts. Frontend AI takes care of everything, and you just pick what looks best for your design.

They offer different styles like Non-specific, Glassmorphism, Retro, Dark mode, Anti Design, and many more(we’ll explore them in a bit)

In addition to styling, you can also set your theme colors, and it will use those colors to build the design. And you know what's the best part? Frontend AI now provides suggestions for your design.

So, let's say you created a card using Frontend AI. It works well on big screens, but on mobile devices, it shifts to the left, meaning it's not responsive.

Frontend AI will immediately suggest a few options, such as: Do you want to center this component or make it full-screen? As you can see in the image below, it's not just asking for changes but also explaining why this issue is happening, even without entering a prompt.

Isn't it cool?

We're not just copying and pasting, we're understanding the concepts. It’s like someone is suggesting to us and preventing us from making mistakes.

We've talked a lot about this feature in theory, so let's see how it works and explore it further.

How 'Change Design' Works

Using this new feature is pretty straightforward.

1. Go to the Webcrumbs landing page.
2. Click on "Get Started." You’ll be redirected to the Frontend AI page.
3. (Optional) Log in or sign up for Frontend AI to save your creations.

💡 Note: Free users will get limited generation per day, and pro users will get unlimited generation. Check out the plans here.

Now, you’ll see multiple suggestions for what you can build, or you can write a prompt to create your own.

Let's start by choosing something from the suggestions, then we'll try using a prompt.

Let's go with the Product Card. Click on Product Card (or any design you want to create). Once you click it, it starts generating, as you can see the process in a blurry area.

After a few seconds, you'll see that it generates a beautiful card design.

Now, from this point, things are going to get interesting. We have the design, but what if we want to try out some other styling? Do you change the styling, write a new prompt, or add a new design image reference?

Well, to be honest, you don't need to do all that. If you look at your right sidebar, you'll see a few options like Theme, Design Style, Colors, etc.

1. Theme: Change the overall look, like colors and feel, for your whole design or just parts of it.
2. Design Style: Change how elements are displayed, such as using flat shapes or detailed images, to give your design a unique visual appearance.

Let’s see both options in action.

So, we have that card, and now we want to change its design style. To do this, go to the right sidebar, click on the Design Style dropdown, and choose any style you like.

I picked Scandinavian. Now click on Apply Now to apply this design style.

Now you can see the design difference. The font styles, padding, and borders changed according to your chosen design.

But as I mentioned earlier, you can definitely change the theme. You can either choose from predefined themes or select your own colors.

So, I set my Primary Color to Green, and my Theme is Forest. And, here’s the result.

And now, you can mix all these options to create beautiful, unique UI designs.

Isn't it cool? The themes change quickly, so you can easily see what works best for your component or app. You can frequently change the design style to find the best fit for your app.

Plus, you can export all your code with just one click into different frameworks and libraries, with styling options like Tailwind and CSS.

Now as we see the new features of Frontend AI, let's build a project to test how efficient these features are. So, let's move on to the next section without wasting a bit.

What We’ll Build

We just checked out all the new features of Frontend AI. Let's use Frontend AI to quickly create UIs and then work on the logic. We’re going to build a Photo Editing app. We'll use Frontend AI for the UI and GitHub Copilot to help with the code logic.

The app will have features like image filters, image upload and export, overlays, zoom in and out, and a reset option.

We'll use Vite React with Tailwind CSS and Zustand for state management. You can choose any other tech stack because Frontend AI offers multiple framework options for creating the UI.

Step-by-Step Guide

First, let’s set up the folder and install all the dependencies. Create a new folder and use this command to install React.

npm create vite@latest

This command will ask for a few inputs, like which framework or language you want to use. I chose JavaScript and React, but you can pick whatever you prefer.

After installing React, let's install Tailwind CSS. We'll use Tailwind version @3.4.11 because the code from Frontend AI is for version 3.

npm install -D tailwindcss@3.4.11 postcss autoprefixer

Then, generate the Tailwind config files:

npx tailwindcss init -p

Now, use this command to install Zustand

npm install zustand
# Or, use any package manager of your choice.

Our basic setup is done, now let’s build the UI.

Generate UI

As we see from the Frontend AI features above, we now know it's going to generate UI really fast. So, go to your Frontend AI dashboard and start writing prompts. I used this prompt to generate the UI.

Generate a  photo editing app where it should have features like Image Upload & Preview, basic image adjustments, crop and resize, filters and effects and rest and undo. Also add a option to export edited image, and add overlay option

After clicking on the generate button, it started generating the UI.

After a few seconds, it generates the design, and to be honest, it looks pretty impressive.

You can always change the primary colors and design style using the right-hand sidebar, but I like this one, so I'm going to stick with it.

Before moving forward, let's check the responsiveness first. Click on the icons in the headers, and if there are any gaps or responsiveness issues, it will automatically suggest fixes. You can apply the fixes and accept the changes or dismiss them.

So, the UI is now done, click on the Code Editor and Click on the Choose Framework.

Choose the styling option and framework/library you prefer. I selected React with Tailwind CSS.

The Logical Part

The UI generation is complete. Now, open your VS Code and start using all the code we generated from Frontend AI. Since the code is a bit long for one file, we'll separate it into different components. The structure will look like this.

One store file, a UI folder to store all three components, and a parent file to display these components. The PhotoEditor component will be the parent of these, and we’ll import this PhotoEditor component into App.jsx.

import React from "react";
import Sidebar from "./ui/Sidebar";
import EditorCanvas from "./ui/EditorCanvas";
import ElementsGallery from "./ui/ElementsGallery";

function PhotoEditor() {
  return (
    <>
      <div id="webcrumbs" className="w-full flex justify-center">
        <div className="w-full h-screen flex justify-center items-center">
          <div className="w-[1200px] bg-gray-50 font-sans rounded-lg shadow-xl overflow-hidden lg:h-[700px] md:h-[700px]">
            <div className="flex h-full">
              <Sidebar />

              <EditorCanvas />

              <ElementsGallery />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default PhotoEditor;

At the top bar of your VS Code, you'll see a GitHub icon. Click on it, and a sidebar will open where you can chat with GitHub Copilot. Copilot is now free, and if you don't have it in your VS Code, you can check out this documentation to install it in your editor.

You can also choose between multiple models to chat with. PS: It also has Sonnet 3.7 so, you can try that too.

First, Clean all App.jsx code and import <PhotoEditor /> component in that.

import { useState } from "react";
import "./App.css";
import PhotoEditor from "./components/PhotoEditor";

function App() {
  return (
    <div className="w-screen flex justify-center">
      <PhotoEditor />
    </div>
  );
}

export default App;

Now, use this command to start the server.

npm run dev

Our server is up and running. Now, let’s start using copilot.

You have two options for using Copilot, use chat mode, which is the default option, or use a mode where Copilot can directly modify your files, allowing you to accept or reject the changes. We'll start with the second mode.

Open Copilot chat, click on the first option at the top left, and add the number of files you want Copilot to work with.

Write a prompt. I wrote this prompt👇

I am making an photo editing app where, start with photo editing feature when user click on upload button and selects the image, the selected image should be visible and added to the editor canvas. Use Zustand Store for global variables and state management. Create a store file for the state management.

As you can see, it started generating the file and all the code.

Note: Always check the code once before accepting it.

The generated code will look like this, where it shows what it changed so, you can check properly before accepting it.

Currently, the code looks good. Go to your browser and check the functionality.

It's working now. I can add an image to my canvas. This is great. Now, let's try something else. Let's use the copilot to add the zoom-in and zoom-out functionality. I added the files and used this prompt 👇

Great, now add a functionality of zoom-in and zoom-out when I click on the icons, it should zoom the image

Before accepting the Copilot code, always make sure you understand it. For example, for the zoom functionality, you just need to create a state in your store.

import { create } from "zustand";

export const usePhotoStore = create((set) => ({
  image: null,
  zoom: 1, // this is the new state for zoom
  setImage: (image) => set({ image }), //
  setZoom: (zoom) => set({ zoom }), // function to change the zoom state 
 }));

Use these states inside your component. In our case, it's <EditorCanvas />. Here, we use those states and a function to update them.

import React from "react";
import { usePhotoStore } from "../../store/usePhotoStore";

function EditorCanvas() {
  const image = usePhotoStore((state) => state.image);
  const zoom = usePhotoStore((state) => state.zoom);
  const setZoom = usePhotoStore((state) => state.setZoom);

  const handleZoomIn = () => {
    setZoom(zoom + 0.1);
  };

  const handleZoomOut = () => {
    setZoom(zoom - 0.1);
  };

  return (
    <div className="flex-1 flex flex-col">
      <div className="bg-gray-800 p-4 flex justify-between items-center">
            // rest of the component
          <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
            <div className="flex flex-col space-y-2">
              <button
                className="p-2 bg-black bg-opacity-60 text-white rounded-full hover:bg-opacity-80 transition-colors"
                onClick={handleZoomIn}
              >
                <span className="material-symbols-outlined">zoom_in</span>
              </button>
              <button
                className="p-2 bg-black bg-opacity-60 text-white rounded-full hover:bg-opacity-80 transition-colors"
                onClick={handleZoomOut}
              >
                <span className="material-symbols-outlined">zoom_out</span>
              </button>
            </div>
          </div>
        </div>
    </div>
  );
}

So, always keep your foundation strong because a good understanding of the basics will give you more flexibility to use any type of AI. Now, we've added that functionality, and we can zoom in and zoom out on our image.

Similarly, we can add more features and remove any UI code we don't need. For example, we can remove the Elements Section, as we don't want since the Element Gallery is already available on the right-hand side. We can also remove the fixed width and height to make it fully cover the screen area.

import React from "react";
import Sidebar from "./ui/Sidebar";
import EditorCanvas from "./ui/EditorCanvas";
import ElementsGallery from "./ui/ElementsGallery";

function PhotoEditor() {
  return (
    <>
      <div id="webcrumbs" className="w-full flex justify-center">
        <div className="w-full flex justify-center items-center">
          <div className="w-full bg-gray-50 font-sans rounded-lg shadow-xl overflow-hidden">
            <div className="flex h-full">
              <Sidebar />

              <EditorCanvas />

              <ElementsGallery />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default PhotoEditor;

It will now look like this.

Now you can write more prompts to make it better and add more features. The more creatively you think, the more creatively you can build, and there are no excuses now.

Use Webcrumbs Frontend AI for any UI generation and GitHub Copilot to help with logic, you’ll always be ready to build something great.

The Result

I've used a few more prompts, and after some tries and fixes, I ended up with these functionalities.

🎥 Watch the video here: Result Video

The downloaded image looks like this.👇

You can check out the complete code here on Github.

See how easily we created the UI using Frontend AI and started the implementation with GitHub Copilot. It took me an hour to build this photo-editing app. Frontend AI made the design part easier. I didn't need to write multiple CSS styles to test designs, take references from multiple sites, or write long prompts to explain the UI. I got a new, fresh, and clean UI within seconds.

Using Webcrumbs Frontend AI with Copilot saves a lot of time because you can now focus on the implementation part. Currently, the app we built is a small photo editing app where we can add more functionality and features. But now we know we won't get stuck in a UI iteration loop, and if we face challenges in the logic part, GitHub Copilot is here to help us.

Overall, Copilot + Webcrumbs saves time in both UI and logic development and helps you build more advanced, user-friendly, and creative apps.

Conclusion

That’s it for this blog. In this blog, we built a Photo Editing app with Webcrumbs and GitHub Copilot, and that showed how much easier frontend development can be when the right tools are used.

Instead of spending hours creating the UI from scratch, Webcrumbs gave us a structure I could quickly tweak.

By using these tools together, we save time on setup and debugging, making it easier to turn ideas into reality without extra hassle.

If you found this article useful, share it with your fellow DevOps enthusiasts.

Also, Follow me For More Content like this:

Arindam Majumder Follow

Developer Advocate | Technical Writer | 600k+ Reads | Mail for Collabs

For Paid collaboration mail me at: arindammajumder2020@gmail.com.

Thank you for Reading!