DEV Community

Genne23v
Genne23v

Posted on

5

Making Progressive Web App

Continuing on my story for My PhotoHub Image optimization GitHub Action, my approach was to convert files using JavaScript framework Sharp and shell script creates a repo and pushes the files to it. I pushed my script with my questions to ask how we should deploy the app. With this PR, I wanted to make sure my approach was ok and what the next steps would be.

By the time that I picked My-PhotoHub issue, it was the very beginning of the project and there was very minimal that I could rely on. While I was finishing issues on other repositories, the project has been evolved. Now we have React frontend for user to post PAT and repo name to create. Also we have service-worker to do GitHub repo creation. So my initial thinking to push the images with shell script is no longer relevant. And I had a feedback that image should be optimized in frontend as we don't want to send the photo with GPS info to our server.

So the work that I decided to do is to connect UI and GitHub repo creation, and convert the images in browser side, then send it to the repo. GitHub repo creation code is already available. I added the code to uploadBtnClicked() with some user messages how process is going.

async function uploadBtnClicked() {
    setUserMessage('');
    setLoading(true);

    const octokit = new Octokit({ auth: token });
    let username, repoCreated;
    try {
      username = await getUser(octokit);
    } catch (err) {
      console.error('Invalid PAT token');
      setUserMessage('Sorry, could not find a user with the token');
      setRepoCreated(false);
      setLoading(false);
      return;
    }

    setUserMessage('MyPhotoHub is creating a GitHub repository...');
    repoCreated = await createRepo(octokit, username, repository);

if (repoCreated) {
      console.info('Repo is created');
      setUserMessage('GitHub repository has been created...');
      setRepoCreated(true);
    } else {
      console.error('Error occurred while creating a repo');
      setUserMessage('Sorry, something went wrong while creating a repository');
      setRepoCreated(false);
      setLoading(false);
    }

    setUserMessage('Creating optimized images...');
    const convertedFiles = await createOptimizedImages(images);

...
    setUserMessage('Adding images to repository...');

    setUserMessage(
      `Process complete. You can check out https://github.com/${username}/${repository}`
    );
    setLoading(false);
}
Enter fullscreen mode Exit fullscreen mode

Image description

We can add a progress bar to show the progress better. But I think this is good for now. Now I need more work to complete my image conversion process and send it to the repo.

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry 🕒

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (2)

Collapse
 
tdaw profile image
TD

Great post. 🎊

Collapse
 
genne23v profile image
Genne23v

Thank you. Hopefully I can make it work nicely soon!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay