Skip to main content

Introduction to PhotoSky Tutorial

Welcome to the PhotoSky tutorial! In this comprehensive guide, you'll learn how to build a cloud-based image management application from scratch using AWS, React, and Capacitor. PhotoSky is a mini-project activity developed by the UML Cloud Computing Club to demonstrate the power and flexibility of serverless architecture and cross-platform development.

danger

This project requires access to Github Codespaces to work properly!
Please ensure you have working access to Github Codespaces with a capable configuration! 8+ GB RAM.

📘 About PhotoSky

PhotoSky is a simple yet powerful application that allows users to:

  • Upload images to an AWS S3 bucket
  • View images in a responsive gallery
  • Download images
  • View image previews
  • Access the application on both web and mobile platforms

By following this tutorial, you'll gain hands-on experience with:

  • AWS services (Lambda, API Gateway, S3)
  • Serverless architecture
  • React frontend development
  • Material-UI for responsive design
  • Capacitor for cross-platform mobile development
  • Infrastructure as Code using AWS CDK

🎥 Demo​

Before we dive into the tutorial, let's take a look at what we'll be building:

https://github.com/user-attachments/assets/70bdff9a-9bc3-4ebc-be27-02842196eef7

As you can see, PhotoSky provides a seamless experience for managing images in the cloud, with a clean and intuitive interface.

💻 Source Code​

The complete source code for this project is available on GitHub. You can find it at:

We encourage you to star the repository if you find this project helpful! Feel free to fork it and experiment with your own modifications as well.

🚀 What You'll Learn​

Throughout this tutorial, we'll cover:

  1. Setting up your development environment

    • Configuring AWS credentials
    • Setting up local development tools

  2. Designing the backend architecture

    • Understanding serverless concepts
    • Planning our AWS infrastructure

  3. Implementing the backend with AWS CDK

    • Creating an S3 bucket for image storage
    • Setting up Lambda functions for image processing
    • Configuring API Gateway for RESTful endpoints

  4. Developing the React frontend

    • Setting up a React project with Material-UI
    • Creating responsive components for image display and upload
    • Implementing state management and API integration

  5. Integrating Capacitor for mobile support

    • Adding Capacitor to the React project
    • Configuring the project for Android
    • Utilizing native device features like the camera

  6. Testing and deploying the application

    • Running local tests
    • Deploying the backend to AWS
    • Building and deploying the frontend

🛠️ Prerequisites​

To get the most out of this tutorial, you should have:

  • Basic knowledge of JavaScript and React
  • Familiarity with AWS concepts (we'll guide you through the specifics)
  • An AWS account (free tier is sufficient for this tutorial)
  • Node.js and npm installed on your local machine

Don't worry if you're not an expert in all these areas – we'll provide detailed explanations and step-by-step instructions throughout the tutorial.

🏁 Getting Started​

Ready to build your own cloud-based image management application? Let's get started!

In the next section, we'll begin by setting up your AWS environment and preparing your local development tools. By the end of this tutorial, you'll have a fully functional PhotoSky application that you can further customize and expand.

Happy coding, and let's dive into the world of serverless, cross-platform development with PhotoSky! 📸🌤️