Skip to content

antonio-nicolau/Flutter-photo-upload-app

Repository files navigation

Flutter Photo Upload App

This is a Flutter project created as a code challenge for the Flutter Developer role. The goal of this app is to allow users to capture and upload photos using their device's camera. The app utilizes Riverpod for state management, the CameraAwesome package for camera functionality, and Firebase for photo storage and Firestore for tracking uploads.

This app has support for two languages: English and Spanish. You can change the language on app's settings

Table of Contents

Getting Started

Follow the instructions below to set up and run the project on your local machine.

Prerequisites

Before you begin, make sure you have the following prerequisites installed:

Installation

  1. Navigate to the project directory:

    cd flutter-photo-upload
  2. Install the project dependencies:

    flutter pub get
  3. Configure Firebase for your project by running the following command:

    firebase login
    dart pub global activate flutterfire_cli
    flutterfire configure
  4. Move the generated firebase_options.dart file to the src directory.

  5. Create a Firebase project and set up Firebase Authentication, Firebase Storage, and Cloud Firestore in the Firebase Console.

  6. Important: Update the Firestore Security Rules to allow read and write access without authentication for testing purposes. Replace the existing rules with the following in the Firebase Console:

    service cloud.firestore {
      match /databases/{database}/documents {
        match /{document=**} {
          allow read, write: if request.time < timestamp.date(2023, 9, 22);
        }
      }
    }
    
  7. Run the app on your emulator or physical device:

    flutter run

Project Structure

The project is structured as follows:

  • lib: Contains the main Dart code for the Flutter app.
    • main.dart: The entry point of the app.
    • core: Contains the app's shared content, including services, modules, and utils.
    • modules: Contains the app's features.
      • home_pages.dart: The main screen with a button to open the camera and a list of uploaded photos.
      • camera_page.dart: The camera screen where users can capture and upload photos.
    • state: Contains Riverpod providers for state management.
    • services: Contains Firebase-related services for photo storage and Firestore interaction.
    • models: Defines data models used in the app.
    • src: Contains firebase_options.dart.
  • test: Contains all unit tests for the project.
  • integration_test: Contains all integration tests for the project

Usage

  1. Launch the app on your device.
  2. On the home screen, click the "+" button to access the camera screen.
  3. Capture a photo using the camera.
  4. After capturing a photo, it will be uploaded to Firebase Storage.
  5. A document containing information about the upload (e.g., URL, timestamp) will be created in Firestore.
  6. Return to the home screen to see a list of all uploaded photos.
  7. Preview any image on the list
  8. Change app language on Settings

App running

Screen.Recording.2023-08-24.at.19.27.22.mov
WhatsApp.Video.2023-08-24.at.20.12.33.mp4