CITC - IT Department

Computer Laboratory Activity Form

Course Code IT323

Course Title Application Development and Emerging Technology
Topics Covered Overview of Software and Hardware Technology
Objectives The objective of this comprehensive laboratory activity is to provide
students of IT323 with an in-depth understanding of cross-platform
application development by integrating mobile, web, and emerging
technologies. Students will gain practical experience in building a
feature-rich application that leverages the capabilities of both mobile
and web platforms, while also exploring cutting-edge technologies for
enhanced functionality and user experience.
Materials:

1. Computers with internet access

2. Development environments for web and mobile platforms (e.g., Visual Studio Code,
Android Studio, Xcode)
3. Text editor or Integrated Development Environment (IDE)
4. Mobile devices (smartphones or emulators)
5. Internet connectivity
6. Optional: Virtual Reality (VR) headsets, Augmented Reality (AR) devices, Machine
Learning frameworks

Duration: 4-6 hours (can be divided into multiple sessions)

Description

Title : Comprehensive Cross-Platform Application Development Laboratory: Exploring Mobile,

Web, and Emerging Technologies

Activity Steps:

1. Introduction to Cross-Platform Development and Emerging Technologies:

An article published by Goldman Sachs in 2023 stated that as many as 300 million full-time jobs,
equivalent to 18%, around the world could be automated in some way by the newest wave of artificial
intelligence that has developed platforms like ChatGPT and Google Bard. Faced with clear evidence of a
rapidly evolving world, students in technology are in need of a dedicated space to connect, collaborate, and
hone their skills. As of the moment, students in field of technology lack active learning opportunities to
hone their technical, interpersonal and project management skills for workforce preparedness leading them
to struggle to compete on professional and established platforms such as Upwork and Fiverr as these
platforms do not offer projects suitable for their level of experience. Recognizing the critical needs for rapid
learning and adaptable technical skills, CommunITask proposes a solution built on active learning
principles and leverages the “Protégé Effect” which as stated by Dunlosky et al. (2014), teaching
demonstrably enhances knowledge retention up to 90% compared to those who do not.

The objective of CommunITask is to design and develop a student-friendly platform that provides an
environment for IT students to hone their technical, interpersonal and project management skills through
hands-on projects, gigs, and mentorship. Students not only learn and earn by doing and teaching, but also
build suitable portfolios showcasing their skills and experience enabling them to have a competitive edge
for job preparedness and career success.

2. Setting Up Development Environments:

Setting up the development environments for web and mobile platforms, ensuring that
necessary software and tools are installed.
● Installing an Integrated Development Environment (IDE) - For this project our team
will be using Visual Studio Code but it's definitely up to each individual’s preferences.
Link for VS Code: https://code.visualstudio.com

Figure 1: Website of Visual Studio Code

● Installing React - For this project we will be using React as our main front-end tool. In
order to achieve this, we first must ensure that we have Node.js and npm (node package manager)
installed. To check if you have node installed, go to your terminal and input “node –version” and
if it displays a version similar to the image then you can proceed.

Figure 2.1: Command Prompt

Figure 2.2: Website of Node

Else, install node.js in the following link: https://nodejs.org/en/download/. Installing Node.js

comes with the installation of npm.
● Installing Django - For this project’s back-end development, we will be using a python
framework called Django as it is scalable, clean and quick, suitable for this project. To download
django proceed to: https://www.djangoproject.com and download the latest release.

Figure 3.1: Website of Django

You can verify your installation of django by inputting “django-admin --version” in the terminal
as seen in the image:

Figure 3.2: Command Prompt

● Installing Expo Go - For this project’s mobile application, we will be using React Native
(make sure that you’ve already installed Node.js and npm) and Expo Go is the go to sandbox for
mobile development. Expo Go also allows us to simulate our development towards our mobile
devices which is handy. To install Expo Go, proceed to playstore / appstore and install:

Figure 4: Expo App installation from play store.

● Installing Android Studio – This project mainly deals with android development and
Android Studio is the best tool for simulating your development without actual mobile devices.
Android Studio is great in determining a mobile applications layout in various mobile dimensions.
To download Android Studio proceed to: https://developer.android.com

Figure 5: Android Studio Emulator

● Installing Visual Studio Code Extensions - Extensions are helpful in terms of making
the project’s development cleaner and more efficient. For this project, we will be installing the
following Extensions in VSCode

1.) ES7+ React/Redux/React-Native snippets - This extension helps in code completion by

providing React related code snippets making coding much simpler.

Figure 6.1: Extension of React/Redux/React-Native snippets in VScode

2.) Prettier - Code Formatter - Prettier helps cleaning up messy structure of coding by
automatically formatting code into a much more readable and easier to debugformat. Examples of
this include consistent indentation.

Figure 6.2: Extension for Prettier – Code Formatter in VScode

3.) React Native Tools - This extension is an official extension by Microsoft which helps in
react code debugging, syntax highlighting, code completion and more.

Figure 6.3: Extension for React Native Tools in VScode

Figure 7: DFD LVL 0 - Context Diagram

The diagram provides a simple layout for CommunITask, having two main entities namely:
Student(poster) and Student(tasker) with the system facilitates the exchange of data between
the student poster and student tasker.
Student Poster: initiates tasks and sends payments
Student Tasker: receives tasks, delivers finished tasks and receives payments.

Data Flow:
Student Poster - submits tasks and sends payments.
System - delivers tasks and sends payment to the student taker.
Student Taskers - receive tasks, deliver completed tasks.
System - delivers payments to the student takers.
Figure 8: DFD LVL 1 - Data Flow Diagram

The diagram depicts the process CommunITask at its core as it facilitates task exchange,
enables communication between students, maintains student records, managing tasks, communication,
user profiles, payments and handles secure payment processing.

Key Entities:
Student Posters - use the platform to create listings for tasks or projects they need to be completed.
Student Taskers - search the platform for available tasks posted by Student Posters and can earn
income by completing them.

Data Flow:
Student Poster to Communitask: Student Posters send task descriptions, submit finished work, and
provide ratings for Student Takers.
Communitask to Student Poster: Communitask provides Student Posters with task listings from
Student Taskers, a history of communication, profiles of potential collaborators, and records of
payments made.
Student Taker to Communitask: Student Takers submit finished tasks and provide ratings for
Student Posters.
Communitask to Student Taker: Communitask offers Student Takers a list of available tasks, their
own profile information, a log of communication, and records of their earnings.

Data Stores
Communication Records: store all interactions and messages between users of the platform.
User Profiles: hold detailed information about each student, including their experience, skills, and
reputation.
Task Details: provides a comprehensive list of tasks, their descriptions, and requirements.
Payments Details: manages all payment-related data and transaction records.
3. Ideation and Project Planning:

Figure 9.1: Use Case Diagram (Account Management)

Account Management Use Case Diagram diagram depicts user actions related to
signup, login, profile viewing/editing, and related management settings within the
CommunITask system.
Figure 9.2: Use Case Diagram (Task Management)
Task Management Use Case Diagram illustrates the core processes involved in creating,
browsing, accepting, completing, and providing feedback for tasks within the CommunITask
system.
For the development of this project, we will be making use of the software development
methodology Rapid Application Development (RAD).

Figure 10: Rapid Application Development Flow

Phase 1: Requirements Planning

- Defining Project Layout: Mapping out the project’s initial design, structure and flow.
- Setting Up Development Environment: Set up the development environment with React
Native for front-end, Django or NodeJS for back-end, MySQL or MongoDBfor database, Stripe
for payments, and Clerk for authentication.

Phase 2: User Design

Phase 2.1 Prototype: Building the basic functional prototype that focuses on the core features
of the project which will be used for internal testing and initial feedback.

Figure 11.1: Prototype (Login Page) Figure 11.2: Prototype (Authentication)

Figure 11.3: Prototype (Authentication) Figure 11.4: Prototype (Homepage)

Phase 2.2 Test: The development team performs internal testing using unit testing,
integration testing, and UI testing to identify bugs, usability issues, and ensure core
functionalities function as intended.

Phase 2.3 Refine: Gather feedback from users on the initial prototype and use the feedback to
spark some ideas on changes, additions or maybe some things getting rid off.

Phase 3: Rapid Construction

- Develop & Test New Features: After getting the feedback from users, we then start
implementing these changes and additions in hopes of attracting the users because in the end what
we do is for them.
- Beta Testing: Implementing beta tests to a larger group of users in order to widen the feedback
and preferences of users.
- Security Refinements: Run security tests to figure out weaknesses in the system, find bugs and
work on areas requiring improvements.

Phase 4: Cutover
- Implementation: After gathering user feedback, conducting beta tests and system refinements,
we will finally do the implementation of these ideas into a workable and usable system for users.
- Bug Fixes & Performance Optimization: Continuously address any bugs reported by users
and optimize app performance as much as possible. There would not be perfection and we of
course cannot cater everyone’s desires, but the goal is to try to keep it as refined as we possibly
can.
- New Feature Development: Based on user feedback and market trends, develop new features
to enhance the platform's value and not fall-off to the competition.
- User Engagement & Marketing: Implement strategies to keep users engaged, feel connected
and attract new users to the platform.
 Project Requirements
The initial design and evaluation of CommunITask will be mobile-based with the
programming languages React Native for the front-end, Django and/or NodeJS for the back-end
and MySQL / MongoDB for database management. CommunITask will also be making use of
integrative technologies such as Stripe for payment options and Clerk for Authentication and User
Management. Key Features of CommunITask include:
● Task Platform: Offering micro-tasks, projects, and gigs for students to complete and earn
income
● Integrated Payments: CommunITask will be integrating online payment solutions with the
usage of software such as Stripe
● Rating System: Post-task rating (1-5 stars) and optional feedback for completed tasks. This
Builds user trust and helps others choose reliable collaborators.
● User Profile: Transparent record of a student’s IT journey. Showcase skills, accomplishments
and develop a richer portfolio.
● User Authentication: Developing efficient login and sign-up authentication with the use of
Clerk to enable user login using Google Accounts.
● Security: Implementing security measures with the use of Clerk allowing users to enable 2FA
for added security

4. Designing the User Interface:

We started the interface for web and mobile with a wireframe and gave it more colors through a prototype
using Figma. It shows a user-friendly interface that is easy to navigate especially for beginners.

Mobile Wireframe and Prototype:

Figure 12.1. Mobile Wireframe

Figure 12.2. Mobile Prototype

Website Prototype:

Figure 12.4 Website Prototype HomePage

 5. Implementing the Web Interface:

Text Editor / IDE:

We rely on Visual Studio Code (VSCode) to shape the code that powers our website. It offers a
tidy and effective environment where our developers can effortlessly write and refine code. With
its wide range of add-ons and adaptable features, VSCode simplifies the development process,
ensuring efficiency and accuracy in coding tasks.

Figure 13.1 Virtual Studio Code website

React JS:
We've chosen to implement our project using React.js for several key reasons. Firstly, React's
component-based architecture allows us to break down our user interface into reusable and modular
components. This not only enhances code organization but also facilitates scalability as our project
grows. React's virtual DOM also enables efficient rendering of UI updates, ensuring a smooth and
responsive user experience. With React's declarative syntax, we can easily define how our UI should
look based on the underlying data, making our code more readable and maintainable. Furthermore,
React's one-way data binding simplifies data management and reduces the risk of unexpected side
effects. Lastly, React's extensive ecosystem and active community provide us with a wealth of resources
and support to accelerate our development process and address any challenges we encounter along the
way. Overall, choosing React.js for our web implementation empowers us to build a robust, scalable,
and user-friendly project.

Figure 13.2 React js website

Next.js
We've opted to utilize Next.js for the implementation of our project for several compelling reasons.
First and foremost, Next.js offers a powerful framework built on top of React.js, providing us with a
solid foundation for building server-rendered and statically-generated web applications. This approach
ensures that our project is not only highly performant but also optimized for search engines and social
media sharing, ultimately enhancing its visibility and accessibility. Moreover, Next.js simplifies the
development process by offering features such as automatic code splitting, route prefetching, and hot
module replacement, thereby streamlining our workflow and improving developer productivity.
Additionally, Next.js seamlessly integrates with popular technologies like TypeScript, GraphQL, and
CSS-in-JS, allowing us to leverage modern tools and techniques to enhance the functionality and
aesthetics of our project. Furthermore, Next.js provides robust support for server-side rendering and
API routes, enabling us to create dynamic and interactive web experiences while maintaining a clean
and maintainable codebase. Overall, by choosing Next.js for our web implementation, we're able to
deliver a fast, scalable, and feature-rich project that meets the demands of modern web development.

Figure 13.3 Next.js website

Tailwind CSS:
We've chosen Tailwind CSS for our project's web implementation because it offers a streamlined,
utility-first approach to styling. With its extensive set of pre-defined utility classes, Tailwind CSS
allows us to rapidly build and customize our user interface while promoting code maintainability and
scalability. Its seamless integration with modern front-end workflows and extensive customization
options make it the ideal choice for creating a polished and responsive design that aligns with our
project's goals.

Figure 13.4 Tailwind CSS website

6. Developing the Mobile Application:

Text Editor / IDE

We rely on Visual Studio Code (VSCode) to shape the code that powers our website. It offers a
tidy and effective environment where our developers can effortlessly write and refine code. With
its wide range of add-ons and adaptable features, VSCode simplifies the development process,
ensuring efficiency and accuracy in coding tasks.

Figure 14.1 Virtual Studio Code website

React Native

We're using React Native for our mobile implementation because it enables cross-platform
development with JavaScript, streamlining the process and saving time. With access to native
components and APIs, React Native ensures a native-like experience and smooth performance. Its
hot reloading feature speeds up development and enhances productivity, allowing us to create
high-quality apps for both iOS and Android platforms efficiently.

Figure 14.2 React Native Website

Expo

We've opted for Expo Go for our mobile implementation because it allows us to develop and
preview React Native apps directly on our devices with ease. Its simplicity, real-time updates, and
access to pre-built components streamline development and enhance productivity, enabling us to
focus on delivering a great user experience efficiently.

Figure 14.3 Expo Go Website

Clerk Auth

We've chosen Clerk Auth for our project's mobile implementation because it offers a seamless and
secure authentication solution. Clerk Auth provides ready-to-use authentication flows, including
login, registration, and password reset, reducing the development time and effort required to
implement these features. With Clerk Auth, we can easily integrate authentication into our mobile
app with just a few lines of code, saving us valuable development resources. Additionally, Clerk
Auth offers advanced security features such as multi-factor authentication and passwordless login,
ensuring the protection of our users' accounts and data. Its intuitive dashboard allows us to
manage users and permissions effectively, providing us with greater control and visibility over our
app's authentication system. Overall, by using Clerk Auth for our mobile implementation, we can
provide a smooth and secure authentication experience for our users while minimizing
development overhead.

Figure 14.4 Clerk Auth website

 7. Integrating Mobile and Web Components:

HyGraph Database:

We've opted to utilize Hygraph Database for our mobile implementation due to its efficiency and
scalability. Hygraph Database offers a flexible and high-performance graph database solution, which
is well-suited for managing complex relationships and interconnected data in our mobile app. Its
ability to handle large volumes of data and complex queries ensures that our app can efficiently
retrieve and manipulate data in real-time, providing a responsive user experience. Additionally,
Hygraph Database provides robust support for data modeling and schema evolution, allowing us to
adapt our data structure to evolving requirements without disrupting our app's functionality. Its
built-in security features, such as encryption and access controls, ensure the protection of sensitive
user data. Overall, by using Hygraph Database for our mobile implementation, we can build a
powerful and scalable app that meets the demands of modern data-driven applications.

Figure 15.1 HyGraph Database

 8. Creating UML Diagrams:

Class Diagram

Figure 16.1 CommunITask Class Diagram

- User class have a 1 to many Relationship with Booking class

as 1 user can book 1 or many bookings and these bookings can only be to 1 specific user.

- 1 booking instance is associated with exactly 1 business listing, and each business listing is
associated with exactly one booking instance.

- Progress Status has an Aggregation Relationship with Booking as Progress Status is

interconnected with Booking but can stand alone if every booking disappears.

- 1 Service list can have multiple Services and these multiple services are categorized hence these
services can only be in 1 Service List.

- Category has a Composition Relationship with Services as it is entirely dependent to services. If

services disappear, the category is rendered useless.
 Sequence Diagram

Figure 16.2 CommunITask Sequence Diagram

1.) Login (Success or Failure)

In the login process, users begin by inputting their credentials, such as username and password, into the
app's designated login interface. Subsequently, the application undertakes the task of validating these
credentials by cross-referencing them with stored data, which could reside in a database or
authentication service. Should the provided credentials match those on record, the app grants the user
access to their account and proceeds with the subsequent steps. Conversely, if the credentials prove
invalid, the app delivers a failure message, indicating the unsuccessful login attempt. Upon successful
authentication, the app may engage in further actions as dictated by the user's session or workflow. This
could include tasks such as initiating a search for a specific service, which may involve querying a
service database, interfacing with external APIs, or executing any necessary logic to fulfill the user's
request or navigate to the desired functionality within the app.

2.) User chooses search criteria (all categories or specific).

The process begins with the application retrieving and presenting a list of service categories or options
to the user, typically displayed in a structured format within the app interface. Users then have the
opportunity to navigate through these categories and select a specific service that aligns with their needs
or preferences. Once a service has been chosen, the app proceeds to the next step, which involves
booking the selected service. During this stage, the app attempts to secure the desired service for the
user. If successful, the booking is confirmed, and the user receives a notification or confirmation
message indicating the successful reservation. However, if the selected service is unavailable or cannot
be booked for any reason, the app informs the user accordingly, presenting a message indicating the
unavailability of the service. In either case, the user is promptly notified of the outcome of the booking
attempt, ensuring transparency and clarity throughout the process.

3.) App retrieves service details.

In this process, the user begins by selecting a preferred date and time for the service they wish to book.
Once the user has made their selection, the application proceeds to check the availability of the chosen
date and time slot. If the selected date and time are available, the user is prompted to confirm their
booking. Upon confirmation, the booking is successfully created, and the user receives a confirmation
message indicating the successful reservation. However, if the chosen date and time slot are
unavailable, the application informs the user of this limitation. In response, the user is given the option
to select a new date and time, thus looping back to step three of the process. This iterative process
continues until the user selects an available date and time slot or decides to cancel the booking
altogether. Through this method, the application ensures that users are able to secure their desired
service at a suitable date and time, thereby facilitating a smooth and convenient booking experience.
 Activity Diagram (Web)

Figure 16.3 CommunITask Activity Diagram (website)

Upon entering the website, users can freely browse the homepage, but when they choose a category,
they are asked to log in if they haven't already. If they are logged in, they have the choice to proceed
to a protected page where they can browse the category further or remain on a public page where
they can only browse the landing page or the homepage of the website Communitask.

In browsing categories, users can select a category, which will display businesses by category. Then,
users can view the business list and select the type of business they desire. After choosing, the
business detail screen will display, where there is a decision point to determine if that specific
business is bookable or not. If it's not, only information will be displayed, allowing the user to select
another business. If a business is bookable, the user can then make an appointment on the user
booking page, where they can select a service and date. If the slot is not available, the user can
choose a new date/slot on the booking page. If the slot is available, the user will be directed to
confirmation and booking to finish the appointment. And that concludes our website Activity
Diagram.
 Activity Diagram (Mobile)

Figure 16.4 CommunITask Activity Diagram (Mobile)

In order to easily help process this diagram we heavily suggest checking out our application's Mobile
Wireframe as this application is divided into Screens, a technique used in React programming

In order to use Communitask one must Login. If a user is successfully logged in, it will proceed to the
application's home screen. Otherwise it will be redirected back to the Login Screen. In the Home Screen
of the app, a user has the option to select by category or instantly select a service that is trending a lot.
Both options have the same endpoint which is displayed towards the Service Details Screen of the
Selected Service.

Service Details Screen will display the Service Name, Contact Person, Address and About me in order
to ensure that the user gets the service he wants. In the bottom of this screen there will be 2 bottoms
namely: Message and Book Now which is shown in the Decision.

Message route will lead to redirection towards the gmail of the service provider's email. Here you can
compose an email and then send this email for communication.

Book route will then display the Service Booking Screen which displays a Calendar and Time options
wherein you select both.

If date and time is available and valid, you can (Optionally) input a Note then confirm and book.
Otherwise if date and time isn't available, the application rejects these dates and makes user input
another date/time.

9. Integrating Mobile, Web, and Emerging Technologies:

To integrate our mobile and web components of an application to ensure seamless data
synchronization and user experience, it involves several steps and considerations.

1. Unified Backend
 Figure 17.1 CommunITask Hygraph Schema

Figure 17.2 Hygraph API Sample

We've opted to utilize Hygraph Database for our mobile and web implementation due to its efficiency
and scalability. Hygraph Database offers a flexible and high-performance graph database solution,
which is well-suited for managing complex relationships and interconnected data in our mobile app. Its
ability to handle large volumes of data and complex queries ensures that our app and website can
efficiently retrieve and manipulate data in real-time, providing a responsive user experience.
Additionally, Hygraph Database provides robust support for data modeling and schema evolution,
allowing us to adapt our data structure to evolving requirements without disrupting our app and
website's functionality. Its built-in security features, such as encryption and access controls, ensure the
protection of sensitive user data. Overall, by using Hygraph Database for our mobile and web
implementation, we can build a powerful and scalable app that meets the demands of modern
data-driven applications.
 Figure 17.3 Clerk Authentication Dashboard

For Authentication and Authorization, we've chosen Clerk Auth for our project's mobile and web
implementation because it offers a seamless and secure authentication solution. Clerk Auth provides
ready-to-use authentication flows, including login, registration, and password reset, reducing the
development time and effort required to implement these features. With Clerk Auth, we can easily
integrate authentication into our mobile app and website with just a few lines of code, saving us
 valuable development resources. Clerk also provides admin a dashboard that displays logistic
regarding the application’s total users, active users, sign-ups and other user related details.

Figure 17.4 Figma

2. Consistent User Experience

We use Figma for crafting our prototypes because it is a collaborative design tool that allows real-time
collaboration among team members, which fosters teamwork and ensures that everyone—from
designers to stakeholders—can provide input and feedback promptly. Its cloud-based accessibility
enables remote teams to work seamlessly, ensuring the latest versions of prototypes are always
available, eliminating file sharing and version control issues. Figma's capabilities for creating
interactive and high-fidelity prototypes simulate the final user experience, allowing for clickable
elements, transitions, and animations that provide a realistic preview of the application’s functionality.
This is essential for user testing and gathering early feedback, refining the design before development
begins.

Figure 17.5 Tailwind CSS

For our project’s styling, we use TailwindCSS due to its utility-first approach, which provides a wide
range of utility classes for styling elements directly in the HTML. This makes the code more readable and
maintainable by keeping styles close to the markup and avoiding the complexities of traditional CSS
frameworks. TailwindCSS enables rapid development and prototyping, offering a comprehensive set of
predefined utility classes that speed up the styling process and allow developers to quickly build and
adjust the UI. The framework ensures a consistent design language across the application with a standard
set of spacing, color, typography, and layout utilities. Its built-in responsive design utilities make it
straightforward to create a mobile-first design that looks great on all devices.
 Figure 17.6 React JS and React Native

3. Codebase

We chose React Native for mobile development and React.js for our website to maintain a consistent
technology stack and streamline our development process. React Native allows us to build
cross-platform mobile apps for both iOS and Android using a single codebase, ensuring feature parity
and reducing development time. React.js, with its component-based architecture, enables us to create
dynamic, responsive web interfaces that mirror the mobile app’s user experience, ensuring brand
consistency. Using both frameworks allows our team to share components, business logic, and best
practices, enhancing efficiency and simplifying maintenance. This unified approach ensures a seamless
user experience across mobile and web platforms, providing high-quality applications for our users on
any device.
10. Testing, Debugging, and Optimization:

Debugging:

Figure 18.1 Google Chrome Developer Tools

Figure 18.2 VS Code Debug

To ensure the smooth operation of our project, we are adopting a comprehensive set of debugging
techniques. Firstly, we employ logging and monitoring mechanisms, utilizing console.log,
console.warn, and console.error statements to track the flow of execution and capture errors or
warnings within our code. We also make use of browser developer tools like Chrome DevTools
and integrated development environments (IDEs) with built-in debuggers to inspect the state of
our application and analyze its performance.

Figure 18.3 CommunITask Try Catch Block Sample

We will also utilize breakpoints and step execution techniques to delve deeper into our code. By
setting breakpoints, we can pause execution at specific points to inspect variables and application
state, while stepping through code line-by-line gives us a granular understanding of the logic
flow. In terms of error handling, we implement try-catch blocks to gracefully handle exceptions
and provide informative error messages, aiding in rapid debugging and issue resolution. And for
enhanced debugging capabilities in React applications, we leverage tools like React Developer
Tools and Redux DevTools. These tools allow us to inspect the component hierarchy, props, and
state in our React applications, as well as trace actions and state changes over time, facilitating
efficient debugging of complex state management scenarios.

By implementing these debugging techniques, we ensure a robust and reliable application that
meets the highest standards of quality and performance.
 Performance Optimization:

Figure 18.4 CommunITask Implementing DRY Software Principles (Don’t Repeat Yourself)

To optimize performance in our project, we're implementing a comprehensive set of techniques tailored to
enhance efficiency and user experience. In order to optimize performance and reduce code redundancy,
communITask makes use of the DRY(Don’t Repeat Yourself) Software Principle by categorizing code
into Screens and Components eliminating redundant code that consumes memory upon usage. Memory
profilers like Chrome DevTools' Memory tab help us monitor memory usage and detect and address
memory leaks, ensuring optimal performance.. To minimize network requests, we utilize debouncing and
throttling to control the rate of function execution and implement caching strategies to optimize API
response retrieval. Image optimization techniques such as using responsive images and compression tools
ensure appropriately sized images are served for different screen sizes, reducing load times. We will also
minimize JavaScript and CSS file sizes through minification and tree shaking, reducing bundle sizes and
improving load times. Also, we leverage server-side rendering (SSR) and static site generation (SSG) to
improve load times and enhance search engine optimization (SEO), and we optimize script loading by
asynchronously loading JavaScript files or deferring their execution until the page has loaded. By
implementing these techniques, we ensure our project operates efficiently, delivering optimal performance
and a superior user experience.
 11. Deployment and Distribution

Figure 19.1 Vercel

In this project, we leverage Vercel for our deployment needs. Vercel is a highly regarded platform designed
specifically for hosting modern web applications and APIs. It excels in both ease of use and performance
optimization. Vercel integrates seamlessly with popular Git providers like GitHub, enabling streamlined
deployments triggered by code pushes. This simplifies the deployment process and automates much of the
heavy lifting. Furthermore, Vercel's serverless architecture ensures exceptional scalability and performance,
allowing our application to deliver a fast and responsive user experience.

Figure 19.1 Vercel Deployment Process

As we transition to deployment, we'll upload our application to Vercel as it is a frontend-as-a-service (FaaS)
platform, and one of its core functionalities is web hosting. It provides all the necessary infrastructure to run
your web application and make it accessible to users on the internet., rigorously testing its functionality within
the hosting environment. Simultaneously, we'll generate distribution-ready builds for iOS and Android,
meticulously adhering to code signing and submission processes for app stores. Throughout this phase, close
monitoring of the approval process and swift resolution of any issues raised by app store teams will be
paramount.

Following deployment, our focus will shift to post-deployment activities, encompassing ongoing monitoring,
maintenance, and user engagement. Proactive monitoring of the deployed application for performance and
security issues will ensure a seamless user experience. Meanwhile, providing robust user support and engaging
with our audience through various channels will enable us to gather valuable feedback for continuous
improvement.

By meticulously implementing these deployment steps into our project, we're poised to achieve a smooth and
successful deployment process for our cross-platform application, ultimately delivering exceptional value to
our users.

12. Presentation and Documentation:

FUNCTIONALITY AND FEATURES (MOBILE)

Login

Figure 20.1 Login Page Figure 20.2 Clerk Authentication

 Home Screen: Services by Category Screen:

Figure 20.3 Home Screen Figure 20.4 Services by Category Screen

Service Details Screen: Service Booking Screen:

Figure 20.5 ServicesDetails Screen Figure 20.6 Service Booking Screen

Includes a booking calendar feature.
Bookings Screen: Profile Screen

Figure 20.7 Bookings Screen Figure 20.8 Profile Screen

Profile Screen

Figure 20.9 Message Gmail Redirect

 FUNCTIONALITY AND FEATURES (WEB)

Sign In page:

Figure 20.11 Website’s Sign In page

Login In page:

Figure 20.12 Website’s Log In page

 Task List Page:

Figure 20.13 Website’s Task List page

HomePage:

Figure 20.14 Website’s HomePage

 Task Page:

Figure 20.15 Website’s Task Page

Account Page:

Figure 20.16 Website’s Account Page

 Account Details Page:

Figure 20.17 Website’s Account Details Page

Account Security Page:

Figure 20.18 Website’s Account Security Page

DFD AND UML DIAGRAMS:

USE CASE DIAGRAM

Figure 21.1 Use Case (Account Management)

Figure 21.2 Use Case (Task Management)
 CLASS DIAGRAM

Figure 21.3 Class Diagram

 SEQUENCE DIAGRAM

Figure 21.4 Sequence Diagram

 ACTIVITY DIAGRAM

Figure 21.5 Activity Diagram

Figure 21.6 Activity Diagram
 System Architecture:

Figure 21.7 System Architecture

In our system architecture, we have two actors: the client and the tasker. Both the client and the tasker
have the same interface, but they have different tasks. The client may choose categories and businesses
they want, and they can hire the tasker to complete the task requested by the client. We have a server
that handles every user request, and the server's job is to display data on both the client and tasker visual
interfaces on any device. We use a Hygraph database as our data storage, where we generate and store
our data.
13. Reflection and Discussion:

Reflecting on our journey in creating our project CommunITask, a Comprehensive

Cross-Platform Application Development Laboratory, which explores mobile, web, and emerging
technologies, we encountered a lot of experiences, challenges, and lessons learned along the way.

Figure 20.1 BitBucket Dashboard

Our experiences were diverse and enriching. We learned a lot about practical usage of
collaboration tools, specifically Github and Bitbucket. Collaborating with a multidisciplinary
team brought together individuals with varying expertise, perspectives, and ideas, fostering
creativity and innovation. Through hands-on experimentation and exploration of mobile, web, and
emerging technologies, we gained valuable insights into the intricacies of cross-platform
application development. Engaging in real-world projects and case studies allowed us to apply
theoretical knowledge to practical scenarios, honing our skills and deepening our understanding
of industry best practices.

Figure 20.2 Hygraph Dashboard

This project also provided an opportunity to delve into cutting-edge and emerging technologies
that are shaping the future of software development. Hygraph is one of these emerging
technologies we learned about due to its focus on headless content management systems (CMS).
Hygraph offers a GraphQL-based API that allows for a flexible and efficient approach to
managing content across various platforms.

Figure 20.2 Hygraph Dashboard

Additionally, we explored Clerk authentication, a user authentication solution that prioritizes ease
of use and developer experience. By staying abreast of these emerging trends, we believe we have
equipped ourselves with a valuable skill set that will prepare us for the evolving landscape of
software development.

Figure 20.3 DRY Software Principle

We also learned a lot through hands-on development most important the principle of DRY (Don’t
Repeat Yourself” as this project was quite large in scale, we had a lot of repeatable codes so
instead of writing this piece of code every time which consumes a lot of memory during the
start-up of the application, we implemented DRY through dividing our app by components and
screens so that we can reuse components and easily edit changes by components.

We faced some challenges. Putting different technologies together was tricky and caused technical
problems. It needed careful planning and fixing issues. Managing time, resources, and tasks while
dealing with changing technology was tough. Also, keeping up with new tech trends meant we
had to keep learning all the time.

Figure 20.4 RAD Software Development Approach

Despite these challenges, we encountered several valuable lessons that shaped our approach to
cross-platform application development. Embracing a user-centric mindset, we prioritized
usability, accessibility, and user experience throughout the development lifecycle, emphasizing
iterative feedback and user testing. Adopting RAD methodologies facilitated collaboration,
transparency, and responsiveness, enabling us to adapt to changing requirements and deliver
incremental value to stakeholders. Fostering a culture of continuous learning, knowledge sharing,
and experimentation empowered us to embrace innovation, embrace failure as a learning
opportunity, and strive for continuous improvement.
Assessment:

Assessment of student performance can be based on:

● Completeness and functionality of the cross-platform application.

● Clarity and accuracy of the DFD and UML diagrams.
● Creativity and usability of the user interface design.
● Integration and utilization of emerging technologies to enhance application
functionality.
● Presentation skills and ability to articulate design decisions and project insights.

Activity No : #2
Activity Name : Comprehensive Cross-Platform Application Development Laboratory:
Exploring Mobile, Web, and Emerging Technologies with DFD and UML
Documentation
Student Name and ID : Acero, Neil Coleen - 2021300562
Baul, Kate Danica - 2021304888
Rocales, James Heinrich - 2021303331
Terec, Jie Clark - 2021302070
Course & Year BSIT – 3th Year Section : BSIT - 3R9