Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

Madan BK Internship Report Bookvid

Download as pdf or txt
Download as pdf or txt
You are on page 1of 32

Tribhuvan University

Academia International College

An Internship Report
on
“Bookvid”
At
Inseed Tech Pvt. Ltd.

Under the supervision of


“Ganesh Prasad Bhatta”
“Lecturer”

Submitted by
Madan B.K. (T.U. Exam Roll No. 24008/076)

Submitted to
Department of Computer Science and Information Technology
Academia International College
Institute of Science and Technology
Tribhuvan University
June 2024
Tribhuvan University
Academia International College

An Internship Report
on
“Bookvid”
At
Inseed Tech Pvt. Ltd.

In partial fulfillment of the requirement for the degree of Bachelor of


Science in Computer Science and Information Technology by Tribhuvan
University

Submitted by
Madan B.K. (T.U. Exam Roll No. 24008/076)

Submitted to
Department of Computer Science and Information Technology
Academia International College
Institute of Science and Technology
Tribhuvan University
June 2024
Tribhuvan University
Institute of Science and Technology

Academia International College


Department of Computer Science and Information Technology
Email: mail@academiacollege.edu.np

Recommendation Letter of Supervisor

I hereby recommend that the internship completed on “Bookvid” project under my


supervision by Mr. Ganesh Prasad Bhatta be accepted as fulfilling in partial requirement
for the degree of Bachelor of Science in Computer Science and Information Technology.
In my best knowledge, this is an original work in Computer Science and Information
Technology.

…………………………..
Ganesh Prasad Bhatta
Supervisor
Lecturer
Academia International College

i
Certificate of Approval
This is to certify that this internship was completed under supervision of Mr. Ganesh
Prasad Bhatta, with the project entitled "Bookvid" in partial fulfillment of the
requirements for the degree of Bachelor of Science in Computer Science and
Information Technology has been well studied. In our opinion, it is satisfactory in the
scope and quality as an internship for the required degree.

…………………………..
Ganesh Prasad Bhatta
Supervisor
Lecturer
Academia Internal College

……………………………..
External Examiner

……………………………..
Santosh Rijal
Head of Department/Co-ordinator
Lecturer
Academia Internal College

ii
Acknowledgement
I would like to take this opportunity to thank all those people who were involved in making
the internship and whole process successful. First of all, I am thankful to Inseed Tech Pvt.
Ltd. for providing me with the opportunity to intern at their esteemed organization. The
valuable experience and exposure gained during my internship period have contributed
significantly to my personal and professional growth.

It gives us immense pleasure to express our deepest sense of gratitude and sincere thanks
to our highly respected and esteemed guide Mr. Ganesh Prasad Bhatta, for his/ her
valuable guidance, encouragement and support throughout my internship. His/ her useful
suggestions for this whole internship period and cooperative behavior are sincerely
acknowledged.

I would like to express our sincere thanks to Mr. Santosh Rijal (Coordinator of
Academia International College), for assistance in helping me secure the internship
opportunity and for providing guidance and feedback during the internship period. I would
also like to thank Mr. Rajesh Prasad Shrestha (Head of Department) for whole hearted
support.

I am also grateful to our teachers for their constant support and guidance.

At the end, I would like to express our sincere thanks to all our friends and others who
helped us directly or indirectly during my internship journey.

Sincerely,
Madan B.K.
T.U. Exam Roll No.: 24008/076

iii
Abstract
In today's digital era, the demand for online events such as webinars, coaching sessions,
and consultations has surged, necessitating efficient management tools. Traditional
methods, like email coordination and manual scheduling, are often cumbersome and error-
prone. "Bookvid," a comprehensive event booking and management system, addresses
these challenges by integrating booking, payment, and video conferencing into a single
platform. This application enhances user experience by providing secure transactions,
seamless transitions from booking to meeting, and a dynamic marketplace for connecting
with top professionals. My internship at Inseed Tech Pvt. Ltd. involved developing key
components of Bookvid using Next.js, TypeScript, Tailwind CSS, and Figma. I contributed
to building responsive layouts, implementing robust form validation, developing user
dashboards, and ensuring pixel-perfect design implementations. This internship provided
invaluable professional experience, enhancing my skills in frontend development and
understanding of industry practices. The lessons learned in effective communication,
teamwork, and project management will significantly contribute to my future career
success.

Keywords: Bookvid, Coaching Sessions, Figma, Frontend Development, Next.js,


Responsive UI, Tailwind CSS, TypeScript, Webinars

iv
Table of Contents
Certificate of Approval ........................................................................................................ ii
Acknowledgement ..............................................................................................................iii
Abstract ............................................................................................................................... iv
List of Abbreviations ......................................................................................................... vii
List of Figures ...................................................................................................................viii
List of Tables ...................................................................................................................... ix
Chapter 1: Introduction ........................................................................................................ 1
1.1 Introduction ................................................................................................................ 1
1.2 Problem Statement ..................................................................................................... 2
1.3 Objectives .................................................................................................................. 3
1.3.1 Objectives of Project: .......................................................................................... 3
1.4 Scope and Limitation ................................................................................................. 3
1.4.1 Scope:.................................................................................................................. 3
1.4.2 Limitation:........................................................................................................... 4
1.5 Report Organization ................................................................................................... 4
Chapter 2: Organization Details and Literature Review ...................................................... 5
2.1 Introduction to Organization ...................................................................................... 5
2.2 Organizational Hierarchy ........................................................................................... 5
2.3 Working Domains of Organization ............................................................................ 6
2.4 Description of Intern Department .............................................................................. 7
2.5 Literature Review....................................................................................................... 7
Chapter 3: Internship Activities ........................................................................................... 9
3.1 Roles and Responsibilities ......................................................................................... 9
3.2 Weekly log ................................................................................................................. 9
3.3 Description of the Project Involved During Internship............................................ 10
3.3.1 Tools Used: ....................................................................................................... 10
3.3.2 Modules of Project: ........................................................................................... 10
3.4 Tasks/Activities Performed...................................................................................... 11
Chapter 4: Conclusion and Learning Outcomes ................................................................ 15
4.1 Conclusion ............................................................................................................... 15
4.2 Learning Outcome ................................................................................................... 15
References .......................................................................................................................... 17

v
Appendices ......................................................................................................................... 18

vi
List of Abbreviations
APA American Psychological Association
API Application Programming Interface
CEO Chief Executive Officer
CRUD Create Read Update Delete
CSS Cascading Style Sheets
IT Information Technology
JS JavaScript
QA Quality Assurance
SQL Structured Query Language
SMS Short Message Service
UI/UX User Interface/User Experience

vii
List of Figures
Figure 2.1: Hierarchy of Organization ................................................................................. 6

viii
List of Tables
Table 2.1: Organization Details ........................................................................................... 5
Table 2.2: Description of Intern Department ....................................................................... 7
Table 3.1: Weekly Log ........................................................................................................ 9

ix
Chapter 1: Introduction
1.1 Introduction
In today's digital era, the demand for online events such as webinars, coaching sessions,
and consultations has increased rapidly. People are increasingly utilizing online platforms
to connect with professionals and gain new skills, for educational, professional, or personal
growth. However, organizing and managing these events may be challenging without the
proper tools. Traditional approaches, such as email coordination and manual scheduling,
are time-consuming and prone to mistakes.

“Bookvid” (event booking and management system) is a complete web application that
facilitates the process of scheduling and organizing online events including webinars and
one-on-one sessions. In today's competitive marketplace, interacting with the best
instructors, consultants, and innovators should be simple and effective. It has a
secured payment system providing safe and smooth transactions. It also offers more
than facilitate bookings. It also has its own video/audio room, similar to Google Meet,
allowing a smooth shift from booking to meeting.

Bookvid provides a dynamic marketplace where users can find and engage with top
specialists in a variety of industries. Whether users want to learn from industry
professionals, get specialized mentoring, or work with creatives, it makes these
relationships straightforward. The system is designed to improve the user experience by
automating the entire process, from booking to payment to meeting. By combining these
services into a single platform, it aims to save consumers time and effort, allowing them to
focus on connecting with top-tier professionals and getting useful advice.

In conclusion, Bookvid improves the way people book and organize online events. Its
integrated video/audio rooms, secure payment system, and upcoming marketplace features
make it the preferred platform for anybody wishing to interact with professionals and
advance their professional careers.

1
1.2 Problem Statement
The process of creating and maintaining online events like webinars, coaching sessions,
and consultations may be difficult and inefficient. A complete and user-friendly platform
is required to successfully handle these difficulties. One of the main problems is the
fragmented booking process. Users currently depends on different systems to book
sessions, manage payments, and conduct video conversations. This fragmentation results
in a disconnected and frustrating experience, making it difficult to schedule appointments
smoothly and efficiently. Another significant issue is the inefficient video conferencing
setup. Setting up reliable video/audio connections often requires switching between
platforms, which can be time-consuming and prone to technical difficulties. A unified
system with integrated video conferencing capabilities is necessary to streamline this
process.
The lack of secure and integrated payment systems is also a major challenge. Many existing
systems do not properly integrate booking and payment processes, leading to significant
security concerns and inconveniences for users. Ensuring secure and efficient payment
processing within the platform is crucial. Manual coordination issues further complicate
the organization and arrangement of online events. Traditional methods are time-
consuming and susceptible to human error, resulting in miscommunication and missed
appointments, which can frustrate both service providers and consumers.

Bookvid addresses such problems by providing an all-in-one platform that includes


booking, payment, and videoconferencing. It aims to provide a smooth user experience
while also creating a lively marketplace where top experts may simply and successfully
engage with clients.

2
1.3 Objectives
1.3.1 Objectives of Project:
 To design, develop, and implement digital events booking and management system.
 To provide secure payment system.
 To provide platform for talented mentor guidance through one-on-one session.

1.4 Scope and Limitation


1.4.1 Scope:
The scope of Bookvid project covers several necessary functionalities which improve in
modernizing digital events management operations. The basic scope of project are:

Event Booking and Management: Creation, update and management of online events.

Payment System: Facilitates secure and smooth payment processing within the platform.

Video/Audio Conferencing: Provides a reliable and high-quality video/audio


conferencing solution and sessions, integrated within the platform.

Marketplace Development: Facilitates the discovery and connection with top coaches,
consultants and creators through a dynamic marketplace.

Notification System: Sends automated reminders and notifications for upcoming sessions,
payment confirmations and other important updates.

3
1.4.2 Limitation:
Initial User Base: Building a significant customer base might take time, affecting the
marketplace's vibrancy and variety.

Technical Dependencies: Depends on stable internet connections for video/audio calls,


which may have an impact on session quality in places with low connectivity.

User Adoption: Users used to old techniques or other platforms may resist, demanding
appropriate onboarding and support efforts.

1.5 Report Organization


Chapter 1 Introduction includes the problem statement, objectives and scope and
limitation of our project.

Chapter 2 Organization Details includes introduction to organization, its hierarchy and


working domain of organization.

Chapter 3 Internship Activities includes roles and responsibilities, weekly log and
description of project involved during internship.

Chapter 4 Conclusion and Learning Outcomes includes conclusion of the system and
lesson learnt from the internship.

At the end, all the references are mentioned in APA format.

4
Chapter 2: Organization Details and Literature Review
2.1 Introduction to Organization
Inseed Tech Private Limited is an information technology (IT) company located in
Hadigaun, Kathmandu, working in web development and mobile application development
for education, health, marketplace, and other business enterprises. We understand the
constantly evolving digital world and the crucial role that technology plays in achieving
company goals. Our professional developers are committed to creating innovative and user-
centric solutions that provide results. We develop web and mobile application and deploy
it as per client requirements.

Table 2.1: Organization Details

Company Name: Inseed Tech Pvt. Ltd.


PAN No.: 619818636
Contact No.: +977-9807452582
Email: inseedtech1@gmail.com
Website: https://www.inseed.dev/

2.2 Organizational Hierarchy


Inseed Tech Pvt. Ltd. employs a hierarchical organizational structure, with a clear chain
of command that facilitates efficient decision-making and project execution. The CEO
oversees the entire company, ensuring it is on track to meet strategic goals. The Project
Manager connects top management with multiple teams, such as frontend development,
backend development, QA and IT support. Each team is managed by a department head
who ensures that team members work efficiently on their assigned duties. The Frontend
Development Team Leader is responsible for user interface development, whereas the
Backend Development Team Leader is in charge of server-side logic and database
integration. IT Support guarantees that all technological processes run smoothly and the
QA Lead manages quality assurance processes. This structured hierarchy enabled clear
communication and efficient task management, enhancing my learning experience. (Bragg,
2024)

5
Figure 2.1: Hierarchy of Organization

2.3 Working Domains of Organization


Inseed Tech Pvt. Ltd. Provides services in the sector of website design and development,
application development. Following are the expertise of our organization:

Website Development:
 Nextjs
 Reactjs
 Python (Flask)
 Tailwind CSS
Application Development:
 React Native
 Python (Flask)
Database Management:
 Firebase
 PostgreSQL
 GraphQL

6
2.4 Description of Intern Department
I worked for a total of 3 months as a Frontend Developer (Nextjs) intern at Inseed Tech
Pvt. Ltd. The details of my internship period in the organization is summarized below
table:

Table 2.2: Description of Intern Department

Intern Frontend Developer


Supervisor Mr. Suhail Khan
Start Date March 13, 2024
End Date June 14, 2024
Office Hour 10:00 AM – 5:00 PM
Working Hours Sunday to Friday (6 days per week)
Duration 3 months

2.5 Literature Review


Organizational scheduling system shows the need for successful implementation. Human
schedulers frequently rely on reactive scheduling, whereas systems require real-time data
processing and fast reaction capabilities. Combining human skills with modern tools is
essential for effective scheduling and management. (Jose M. Framinan, Rainer Leisten,
Rubén Ruiz, 2014)

The study examines the adoption of Zoom video conference tools during the Covid-19
pandemic using a modified version of the Theory of Mind. It discovered that perceived ease
of use had a favorable impact on usefulness and attitude toward utilizing these technologies,
with PEoU having the highest path coefficient. It helps students improve their attitudes
about communication activities. (Daniel R. Bailey, Norah Almusharraf, Asma
Almusharraf, 2022)

Students with learning difficulties show below-average academic confidence and self-
efficacy. One-on-one tutoring helps children with learning challenges develop academic
self-efficacy. Personal connection, effective teaching tactics, and shared weakness were
key elements in tutoring relationship perceptions. (David L. Adams, Casey Hord, Morgan
Madden, Avery Ryan, 2023)

7
In conclusion, Bookvid's integrated system for event booking, payment processing, and
video conferencing overcomes important issues raised in the literature. It's simplified,
effective, and user-friendly platform for planning and administering online events is made
possible by combining human knowledge with powerful technical technologies. It not only
bridges the gap between academic knowledge and practical implementation but it also
helps to shape the continued growth of digital event management solutions.

8
Chapter 3: Internship Activities
3.1 Roles and Responsibilities
Frontend Development was the assigned role during my twelve weeks long internship
period. The major roles and responsibilities of the intern are enlisted as follows:
 Adapt to the team’s workflow and contribute effectively to the project lifecycle.
 Write clean, efficient, and well-documented code using JavaScript, React, and
Next.js.
 Work closely with senior developers and designers to understand project
requirements
 Identify and fix bugs in existing code.
 Translate UI/UX designs into actual code, ensuring fidelity to the design
specifications.
 Support the deployment of applications to production environments.
 Seek feedback actively and apply it to improve performance.

3.2 Weekly log


Table 3.1: Weekly Log

Week Activities
1st Week Researched on Nextjs Framework, Tailwind CSS, Git and GitHub
2nd Week Implemented learn information in my project (Cricket Spinning
League)
3rd Week Redesigned company’s website
4th Week Cloned and studied existing code of company’s website
5th Week Implemented UI layout in frontend code as in Figma’s design
6th Week Implemented UI responsiveness in website
7th Week Cloned and studied Bookvid codebase
8th Week Developed login and signup form and validated it
9th Week Implemented UI components for create new events
10th Week Integrated payment system UI, calendar
11th Week Developed marketplace page
12th Week Implemented api integration for CRUD operations

9
3.3 Description of the Project Involved During Internship
Bookvid is a complete web application that provides platform for scheduling and booking
online events like webinar, one-one session for coaching, payment system. It also improves
learning efficiency with the proper guidance from talented professional registered in our
platform. It is built by using Nextjs framework as frontend tool and Python (Flask) as
backend.

3.3.1 Tools Used:


Design: used Figma for making design of project.

Frontend Development: used Nextjs framework for frontend and Tailwind CSS, Famer
Motion for styling.

Backend Development: used Python (Flask) and Firebase database for backend.

Testing and QA: manual and cypress was used for automated testing.

Work Division and Management: used Jira for task division and management.

Communication: used Google Meet and Discord for communication, meetings, helps.

Version Control: used Git for version control tool.

IDE: used VScode for development, Postman for Api testing, Google Chrome for frontend
outcome generation.

3.3.2 Modules of Project:


Bookvid facilitates booking online events, has a payment system, and includes its own
video/audio room. The modules included are as:
User Management Module:
As a frontend intern, I made significant contributions to our project by creating and
validating login and sign-up forms. These forms enable safe user authentication and
seamlessly interact with our backend API, allowing users to easily create accounts and log
in. I helped to develop the user profile management system, which allows users to
personalize their profiles and increase engagement and networking opportunities.

Booking System Module:


As a frontend intern, I assisted in developing the complete dashboard for our project. This
dashboard provides event creation and scheduling features, allowing organizers to
efficiently plan and manage their event calendars. I added tools for displaying event listings

10
and search capabilities, making it simple for users to find and attend future events.
Furthermore, I built dashboard which includes full event descriptions, allowing consumers
to make educated judgments about going and profile checklist which improves user
experience by ensuring that all required profile information is entered. My work has
significantly enhanced the overall user engagement and functionality of our site.

3.4 Tasks/Activities Performed


As a frontend developer intern at Inseed Tech Pvt. Ltd. for the project, I utilized
technologies such as Next.js, TypeScript, Tailwind CSS, and Figma to develop various
components and pages of the application. Here are the key tasks I performed:
i. Building the Layout:
I systematically organized the content using Next.js components and Tailwind CSS classes,
ensuring a responsive and user-friendly experience across different screen sizes. To create
a responsive and user-friendly layout using Nextjs components and Tailwind CSS, we
performed following steps:
Setup Nextjs Project: I used these command "npx create-next-app@latest my-nextjs-app
cd my-nextjs-app" for setting up my Nextjs project locally.
Build Components: I used Nextjs components to organize layout of my project. I had
imported react for building components. I built different components as need in project and
used it where it is needed by importing it into another components. For styling components,
I had used Tailwind CSS classes. The general approach for making component is as:

import React from 'react';


const Layout = ({ children }) => {
return (
<div className="min-h-screen flex flex-col">
//basic code
</div>
);
};
export default Layout;

11
ii. Responsive UI Development:
I focused on creating a responsive user interface using Tailwind CSS. I ensured that the
interface seamlessly adapts to different screen sizes and devices. I developed various
responsive UI components, such as navigation bars, modals, and buttons, using Tailwind
CSS and Next.js. I added Tailwind CSS to my project by following commands.
 npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
Add the following to ./styles/globals.css:
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
I used breakpoints provided by Tailwind CSS for making responsiveness in different
devices and for grid-based layout I used "grid" property and specify the columns required
for section.

iii. Form Preparation and Validation:


I developed login and signup forms components with robust validation mechanisms using
TypeScript and authentication logic. I implemented authentication methods to ensure
accurate capture, validation and enhancing data integrity and user experience. I had
imported and used react-hook-form for managing form state and validation and yup for
defining validation schemas as:
 yupResolver(loginSchema) and yupResolver(signupSchema) to integrates yup
validation with react-hook-form.

iv. Error Prevention:


I implemented customization settings based on user permissions and access levels, ensuring
legitimate authority and individualized experiences within the application. I also had built
custom error page for handling any runtime error occurred. I had used TypeScript in my
project, as it is typecasting approach to prevent all type error for data and values. The logic
is as:
interface bookingFormInputs {
name: string;
email: string;

12
eventDate: string;
}
const BookingForm = () => {
const {register, handleSubmit, formState: {errors}} = useForm<bookingFormInputs> ({
resolver: yupResolver(bookingSchema),
});

v. Dashboard and Event Creation Page:


I developed the dashboard and create event page. The dashboard provides users with an
overview of their activities, create event page allows for easy event setup. For creating
dashboard page, I had made separate components as UpcomingEvents component,
CreateEvent component, ProfileChecklist component and integrated them in one dashboard
page. Similarly, I had followed same approach for building create event page. The approach
is as:
import UpcomingEvents from "../components/UpcomingEvents";
import CreateEvent from "../components/CreateEvent";
import ProfileChecklist from "../components/ProfileChecklist";
export default function Dashboard() {
return (
<main className="bg-primary-black w-full h-full min-h-screen flex">
<div className="mx-5 md:mx-16 lg:mx-20 2xl:mx-auto 2xl:w-[1400px] flex flex-
col">
<UpcomingEvents />
<CreateEvent />
</div>
<ProfileChecklist />
</main>
);
}

vi. Figma Design Implementation:


I translated Figma designs into functional frontend code. During my internship, Figma
design was given to me, I had to build that design with necessary components, interactive
buttons, ensuring pixel-perfect implementation of the user interface.

13
vii. Review Code:
After completing the tasks, I had to create pull request before merging it into main code
base. Senior developer review my code and give feedback if there need changes. Then after
approved by senior developer, I had to squash and merge it into main branch of project’s
code base. Locally, I also had to pull all modified code and had to start working in other
tasks assigned to me.

By combining all activities done during my internship, I was able to deliver a robust,
responsive and user-friendly frontend page for our project’s application.

14
Chapter 4: Conclusion and Learning Outcomes
4.1 Conclusion
Internship at Inseed Tech Pvt. Ltd. provided me with a significant opportunity to enhance
my knowledge and skills as a frontend developer. This experience was invaluable in
understanding the practical aspects of working in a professional environment and
collaborating with a team. It allowed me to work on projects that align with my interests
and expertise, particularly in developing web applications using Next.js, TypeScript,
Tailwind CSS, and Figma. The main objective of the internship was to bridge the gap
between theoretical knowledge and real-world application, offering insights into industry
practices and workflow.

Throughout my internship, I was able to apply and deepen my understanding of key


frontend development concepts. I gained hands-on experience in building responsive
layouts, implementing form validation, and developing various UI components.
Additionally, the internship taught me the importance of effective communication,
teamwork, and the ability to incorporate ideas into practical implementations. I also learned
to manage time efficiently, handle deadlines, and work under pressure.

The internship at Inseed Tech Pvt. Ltd. has been highly beneficial for my career
development. I am now more proficient in frontend development technologies and have a
better understanding of web development best practices. The lessons learned during this
period, such as the importance of communication, teamwork, and critical thinking, will
undoubtedly contribute to my success in the tech industry.

4.2 Learning Outcome


Working as an intern at Inseed Tech Pvt. Ltd. for three months was a transformative
experience. It provided me with an excellent opportunity to learn in a professional setting
and develop my skills in time management, critical thinking, and independent problem-
solving. During this time, I worked on multiple tasks under pressure, ensuring that I met
deadlines and maintained high-quality work standards.

One of the key lessons I learned was the importance of adapting to new teams and work
environments. By getting to know my colleagues and understanding their motivations, I
was able to improve my communication skills, which is crucial for effective collaboration.

15
When assigned new projects, planning and prioritizing tasks with the guidance of my
mentor helped me focus on what was most important and deliver results efficiently.

Overall, the internship at Inseed Tech Pvt. Ltd. has significantly contributed to my
professional growth. I have developed a strong foundation in frontend development, gained
valuable insights into the industry, and learned essential soft skills that will aid in my future
career. This experience has prepared me to tackle real-world challenges and excel in a
dynamic work environment.

16
References
Bragg, S. (2024). Hierarchical organizational structure. ACCOUNTING CPE COURSES
& BOOKS.

Daniel R. Bailey, Norah Almusharraf, Asma Almusharraf. (2022). Video conferencing in


the e-learning context: explaining learning outcome with the technology acceptance model.
PubMed Central, 7679-7698.

David L. Adams, Casey Hord, Morgan Madden, Avery Ryan. (2023). How Does One-on-
One Tutoring Support Student. LDW, 37- 48.

Jose M. Framinan, Rainer Leisten, Rubén Ruiz. (2014). Overview of Scheduling Systems.
In Manufacturing Scheduling Systems (pp. 337-352). London: J. M. Framinan et al.

17
Appendices
Company’s Website:

Screenshots for Bookvid:

Login Page:

18
Signup Page:

Dashboard:

19
Create Event Page:

Payment UI:

20
Marketplace:

21

You might also like