JAYPEE UNIVERSITY OF

INFORMATION TECHNOLOGY
(Established by H.P. State Legislature vide Act No. 14 of 2002)

PROJECT REPORT

CLOUD COMPUTING LAB

(20B1WCI572)

Submitted to: Submitted by:

Mr. Aayush Sharma Kartikey Srivastava (221030321)

Assistant Professor Anmol Thakur (221030287)

1
 Acknowledgment

We would like to express our heartfelt gratitude to our faculty, Mr. Aayush Sharma , Assistant
Professor , for their invaluable guidance, encouragement, and support throughout this project.
Their insights and expertise in the subject of Computer Graphics Lab have been instrumental in
helping us understand the concepts and successfully implement the "Product Catalogue App"
project.

We also extend our appreciation for their patience in resolving our queries and for providing us
with the resources and knowledge necessary to complete this project effectively. Their dedication
to fostering a learning environment has truly inspired us, and we are grateful for
their mentorship.

I would like to extend my sincere gratitude to everyone who has been part of this project, either
directly or indirectly, for their valuable contributions.

Without the contributions of all these individuals and groups, this project would not have been
possible. I am truly grateful for the support I have received from everyone involved.

2
 Abstract

This report presents the development of an image posting and profile management mobile
application, built using Flutter and Firebase. The primary goal of this application is to provide
users with a platform to manage their personal profiles, upload images, and interact with their
posts. The project evolved from a basic profile management system into a more dynamic app
where users can not only manage their profile information but also upload and view images
shared with the community.

The application leverages Firebase Authentication for secure user login and registration,
Firebase Firestore for storing user profiles and posts, and Firebase Storage to store images.
The seamless integration of these Firebase services enables real-time data synchronization and
secure storage, making the app scalable and reliable.

Users can create and edit their profiles, including uploading a profile picture, updating their bio,
and viewing other users’ profiles. The app also supports the uploading of images that are stored
in Firebase Storage and linked to the user's profile. This allows for a personalized user
experience with the ability to share images and updates visually.

The app features a responsive design, ensuring compatibility across various devices, while also
providing an intuitive user interface. The app's architecture was designed with scalability and
real-time updates in mind, enabling users to interact seamlessly.

This report discusses the implementation process, key features, and technical challenges
encountered during development. Additionally, it explores potential future improvements,
including adding social features like comments and likes, enhancing security, and extending
functionality to support public feeds and user interactions.

II

3
 TABLE OF CONTENTS
Title Page No.

01: Introduction 5
1.1 Overview

1.2 Objectives

1.3 Tech Stack

1.4 Features

02: Implementation 7
03: App Workflow 8
04: Code Highlights 9
05: Results
5.1 Challenges and Solutions

5.2 Future Improvements

06: Conclusion

4
1) INTRODUCTION

1.1 OVERVIEW

The application is a combination of two modules:

1. Profile Management & Image Posting: A user-centric platform to manage profiles,

share images, and view personalized galleries.
2. Product Catalog: A marketplace interface that fetches product data from a mock API,
enabling users to explore products, filter by category, and mark favorites.

1.2 OBJECTIVES

Profile Management:

● Allow users to create and edit profiles, including uploading profile pictures.
● Enable users to post and view images.

Product Catalog:

● Fetch and display products dynamically from an external API.

● Provide search and filter capabilities for product exploration.
● Allow users to favorite products and access them offline.

1.3 TECH STACK

1. Frontend: Flutter (Dart programming language)

2. Backend: Firebase services
Firebase Authentication (User login and registration)
Firebase Firestore (Data storage for user profiles and posts)
Firebase Storage (Image storage)
3. State Management: Provide
4. Tools: Visual Studio Code, Android Studio

5
1.4 FEATURES

2.1 Profile Management & Image Posting

❖ User Authentication:
➢ Email and password-based login and registration.
➢ Persistent user sessions.
❖ Profile Features:
➢ Create and update profile information (name, bio, profile picture).
➢ View personal image gallery.
➢ Real-time updates using Firebase Firestore.
❖ Image Posting:
➢ Upload images via the gallery or camera.
➢ Store images securely in Firebase Storage and link them to user profiles.

2.2 Product Catalog

❖ Product Display:
➢ Fetch product data (name, price, image, category, description) from an API.
➢ Display in a grid or list view with a responsive UI.
❖ Product Details:
➢ View detailed information upon selecting a product.
❖ Search and Filter:
➢ Search for products by name.
➢ Filter products by category using a dropdown.
❖ Favoriting and Offline Support:
➢ Allow users to mark products as favorites.
➢ Persist favorites using SharedPreferences/Hive for offline access.

6
3. IMPLEMENTATION

3.1 Authentication

● Firebase Authentication manages secure user login and registration.

3.2 Profile Management

● Users Collection:

{
"uid": "user_id",
"name": "User Name",
"bio": "Short bio about the user",
"profile_picture_url": "URL to profile picture",
"posts": ["post_id_1", "post_id_2"]
}

● Posts Collection:
{
"post_id": "Unique ID",
"user_id": "UID of the uploader",
"image_url": "URL to the image",
"timestamp": "Date and time of upload"
}

3.3 Product Catalog

● Fetched product data from the mock API using http package.
● Cached product data locally for offline support using
SharedPreferences/Hive.
● Used Provider for state management to ensure clean architecture.

7
3.4 Search and Filter

● Implemented a search bar to filter products by name.

● Added a dropdown for category-based filtering.

3.5 Offline Support

● Cached fetched data locally.

● Enabled offline viewing of favorite products.

4. App Workflow

4.1 Profile Management

● Register/login with Firebase Authentication.

● Update profile information and upload images.
● Real-time synchronization of profile details and posts.

4.2 Product Catalog

● Fetch products from the API on app start.

● Display products in a responsive grid/list view.
● Search or filter products dynamically.
● Favorite products and store locally for offline access.

8
4) CODE HIGHLIGHTS

import 'package:flutter/[Link]';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:provider/[Link]';
import 'providers/product_provider.dart';
import 'screens/product_list_screen.dart';

void main() async {

[Link]();
await [Link]();
await [Link]('favorites');
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({[Link]});

@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (_) => ProductProvider(),
child: const MaterialApp(
debugShowCheckedModeBanner: false,
home: ProductListScreen(),
),
);
}
}

9
5) RESULTS

5.1) CHALLENGES AND SOLUTIONS

A) Challenge: Handling image uploads efficiently.

Solution: Implemented Firebase Storage for secure and scalable image storage.

B) Challenge: Maintaining real-time updates for user profiles.

Solution: Used Firestore’s real-time listeners for instant data synchronization.

C) Challenge: Building a responsive design.

Solution: Used Flutter’s layout widgets and MediaQuery to ensure responsiveness.

5.2) FUTURE IMPROVEMENTS

● Add comments and likes for user posts.

● Introduce a public feed for image sharing.
● Enhance product catalog with user reviews and ratings.
● Enable advanced search and filter capabilities.
● Add multi-factor authentication for better security.
● Implement offline caching for profile and post data.

10
5.1) APP’s OUTPUT

5.1.1 Authentication

11
5.1.2 Product Catalogue

12
5.1.3 Edit Profile and Sign-out

13
6) CONCLUSION

In conclusion, the Image Posting and Profile Management app successfully meets the goals of
providing users with a dynamic platform to create, manage, and share their profiles and images.
By leveraging Flutter for the mobile app development and Firebase for backend services, the app
offers a smooth, real-time experience for users, ensuring that profile details and posts are updated
seamlessly.

The app's functionality is underpinned by three core Firebase services—Firebase

Authentication, Firebase Firestore, and Firebase Storage—which provide secure user
authentication, real-time database syncing, and scalable image storage, respectively. This
integration has allowed for a robust backend infrastructure capable of handling both small and
large volumes of data, ensuring reliability and security for the users.

Throughout the development process, we faced and overcome various challenges, such as
managing real-time data updates, optimizing image uploads, and ensuring responsiveness across
different devices. By adopting Firebase’s scalable services, we were able to address these
challenges efficiently, providing an enhanced user experience. Additionally, Flutter's rich set of
UI components and layout management helped ensure the app’s visual appeal and usability,
making it accessible and intuitive for all users.

Despite the app's success, there are several areas for future improvement. The introduction of
features such as image commenting, liking posts, and a public feed would enhance the social
aspects of the app, enabling greater user interaction. Moreover, adding enhanced security
features like multi-factor authentication and offline capabilities for viewing cached data would
further improve user experience and app security.

In summary, the project demonstrates the successful integration of Flutter and Firebase to create
a functional, user-centric mobile application. The app not only serves as a platform for managing
personal profiles and images but also lays the foundation for potential future enhancements,
positioning it as a scalable and evolving solution in the realm of mobile app development.

14