UNIVERSITAS INDONESIA

SpinOff

Kelompok 7

Raihan Jana Prasetya 2006527651

Shaniya Camita Farin 2006534865

Vincent Senjaya 2006531024

Computer Engineering

Faculty of Engineering

DEPOK

2022

1
 TABLE OF CONTENTS

CHAPTER I : INTRODUCTION 1
Introduction 1
Project Aim 1
Literature Review 2
Similar Competitor 2
Function/Modules 3
Tools 3
Resource 4
Risk Analysis 5

CHAPTER II : PROJECT MANAGEMENT 6

System Review 6
Project Integration Management 6
Project Scope Management 6
Scope Planning 6
Scope Definition 7
Scope Verification 7
Software Development Cycle 8
Responsibilities 8
Project Cost 9

CHAPTER III : SOFTWARE DESIGN 10

Use Case Diagram 10
Sequence Diagram 11
State Diagram 12
Activity Diagram 13

References: 14

2
 CHAPTER I : INTRODUCTION
1.1. Introduction
Along with the increasing trend of shoe retail and also the number of shoe
collectors at this time, buying and selling in this shoe sector is in a very linear trend.
People who are interested in this sector willing to pay a lot of money for the items. The
demand for the product in this sector is very high, but the stock is very limited so the
product price will significantly increase. there is still a lot that can be developed in this
sector. At the beginning of this trend, sales were usually done offline. shoppers will
queue up in the morning in front of the store to buy the limited-sold products. Only the
first shoppers can enter the shop and their names will be recorded. so that buyers whose
names are not written in the list of buyers or buyers who are too late do not run out of
quota to enter the store cannot enter the store at all.
Lately, have sellers in the shoe sector started turning to the virtual world. but there
are still many shortcomings in the buying and selling process in this sector. the buying
and selling process is carried out on social media platforms, even though social media
platforms are not intended for this purpose. social media cannot guarantee the security of
the transaction, so there have been many cases of fraud. Therefore, an application that is
intended to support the technical sales of these shoes is needed.

1.2. Project Aim

The goals of this project are :
a. Provide a user-friendly UI/UX for Shoe Raffle
b. Provide a user-friendly UI/UX for Shoe Bid
c. Provide a trusted online e-commerce for Shoe Raffle
d. Provide a trusted online e-commerce for Shoe Bid
e. Provide a user-friendly UI/UX for Shoe Catalogue
f. Reduce physical contact with other people
g. Make people easier to buy from a Raffle System

1
1.3. Literature Review
A developing country may well attempt to be modernized if it introduces
e-commerce effectively and efficiently. It will improve its output and lead to its
competitive advantage. Information Technology (IT) has uplifted ecommerce worldwide.
Now it’s at ease to enter to a new market and marketers’ can easily evaluate their product
and company’s performance. A growing number of firms in various industries, such as
banking, education, commerce, and tourism, etc. have improved their services by both
incorporating technologies into their service delivery process. Integration of technology
in services is becoming very common; however, very little academic research has been
conducted to examine its influence. The issues related to E-commerce are also on the rise
which is posing serious threat to its tall future and hence demands right strategies on part
of marketers. The research works on E-commerce propose good number of variables to
be taken care of if marketers need to be successful in this newly business model.
The factors which will significantly contribute to the success of the E-Commerce
industry and focused upon should be consistency of transaction steps, consistency of
Web site design, replacement guarantee, M-Commerce services, consistency of
promotions, consistency of in-stock indications, consistency of product variety, location
based services, multiple payment option, right content, shipment option, legal
requirement of generating invoices for online transactions, quick Service, T & C should
be clear & realistic, the product quality should be same as shown on the portal. The
most important feature in ecommerce is privacy which not only increases competitive
advantage but confidence level of the customers. The researches also suggest 18-35 as the
good customer age to be promising and to be targeted irrespective of gender for better
results

1.4. Similar Competitor

There are several competitors for this project but there is no Indonesian website
that is providing raffle e-commerce only. These are several competitors that is similar to
this project.
a. Atmos Indonesia

2
 Atmos is a Japan based retail store that open in Harajuku. Atmos sells shoes and
rare limited sneakers from Nike, Adidas, Jordan, New Balance, Converse, Asics,
Puma, Vans, and many more. Atmos sells special limited edition sneakers and
collaborations. Atmos Indonesia opens in 2020. Atmos has an Indonesian website.
It sells shoes with a Raffle system but not specially.
b. Invincible Indonesia

Invincible is a Taiwan based street-wear and sneaker store. Invincible sells a

limited edition fashion apparel brand. Invincible has an Indonesian website that
sells shoes. Once in a while, Invincible sells shoes with a Raffle system but also
not specially.
c. JD Sports

JD Sports is a UK based E-commerce and opened in Indonesia. JD Sports sells

things with Raffle System but also not specially and only once in a while. In

3
 Indonesia, there are no official websites that sell things with Raffle System or Bid
System. There are a lot of Indonesian store that sells with Raffle System or Bid
System on Instagram but other Social Media. The thing is, there are no websites
that sell things with Raffle System or Bid System. If the selling only uses Social
Media. There is no guarantee that the store is trusted or whether the person that
bid is a serious buyer.

1.5. Function/Modules
The modules/functions/features included in this website are:
● Login/Registration ● Shipping Status
● Product Filter/Sorting ● Item Availability
● Product Description ● Wishlist
● Product Gallery ● Reminder
● Shopping Cart ● Recommendation
● Shipping Options ● Randomizer
● Order Summary ● Auction
● Secure Payment

1.6. Tools
The tools that are used in this project are:
● GitHub

GitHub is a code hosting platform for version control and collaboration. It lets you and
others work together on projects from anywhere. This tutorial teaches you GitHub
essentials like repositories, branches, commits, and pull requests.
● ReactJS

4
 React.js is an open-source JavaScript library that is used for building user interfaces
specifically for single-page applications. It’s used for handling the view layer for web
and mobile apps. React also allows us to create reusable UI components.
● NodeJS

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and
scalable network applications. Node.js uses an event-driven, non-blocking I/O model
that makes it lightweight and efficient, perfect for data-intensive real-time applications
that run across distributed devices.
● Tailwind CSS

Tailwind CSS makes it quicker to write and maintain the code of your application. By
using this utility-first framework, you don't have to write custom CSS to style your
application. Instead, you can use utility classes to control the padding, margin, color,
font, shadow, and more of your application.
● ExpressJS

Express is a node js web application framework that provides broad features for
building web and mobile applications. It is used to build a single page, multipage, and

5
 hybrid web application. It's a layer built on the top of the Node js that helps manage
servers and routes
● MongoDB

MongoDB makes use of records which are made up of documents that contain a data
structure composed of field and value pairs. Documents are the basic unit of data in
MongoDB. The documents are similar to JavaScript Object Notation, but use a variant
called Binary JSON (BSON). The benefit of using BSON is that it accommodates
more data types. The fields in these documents are similar to the columns in a
relational database. Values contained can be a variety of data types, including other
documents, arrays and arrays of documents, according to the MongoDB user manual.

1.7. Resource
● Computer Hardware
● Telecommunication Facilities:
● Internet Connection
● Qualified Personnel
● Reliable Payment System

1.8. Risk Analysis

● Online Security Breach
Some of these online security risks can include phishing, website hacking, and
unprotected web services. There are many hackers who can breach the network of a
company and access sensitive information. Therefore, it is necessary that your
e-commerce website security is very strong.
● Violation of Intellectual Property

6
 Violation of intellectual property is also one of the common security threats of
e-commerce business. Protection of IP is very important in the e-commerce industry
and includes website logos, content, taglines, products and other images and icons.
Violation of copyright rules and intellectual property can cause you a huge loss.
● Low SEO Ranking
Out of many e-commerce threats, SEO and digital marketing of your business can
also become a serious risk. Google keeps on changing its algorithms and it
drastically affects your ranking. Low SEO ranking means low traffic to your website
which ultimately results in less number of sales. Therefore, you need to focus on the
digital marketing of your e-commerce business too.
● Credit Card Scams
Suspicious transactions and stolen credit card information are common risks of
e-commerce business. Hackers or anybody can use a stolen credit card to make an
online transaction. Your online security should be strong and tight enough to catch a
doubtful transaction.
● Weak Authentication Method
If you have weak and very basic authentication methods then you are prone to more
cyber-attacks. If you are authenticating a user by ID and password only then there are
chances that this information can be stolen. You need strong authentication methods
for your online security that can resist attacks.

7
 CHAPTER II : PROJECT MANAGEMENT

2.1. System Review

Spinoff is a website that provide raffling, bidding, and e-commerce services for
sneakerhead. Along with the increasing trend of shoe retail and also the number of shoe
collectors at this time, buying and selling in this shoe sector is in a very linear trend.
People who are interested in this sector willing to pay a lot of money for the items. The
demand for the product in this sector is very high, but the stock is very limited so the
product price will significantly increase. there is still a lot that can be developed in this
sector. Lately, sellers in the shoe sector started turning to the virtual world. but there are
still many shortcomings in the buying and selling process in this sector. the buying and
selling process is carried out on social media platforms, even though social media
platforms are not intended for this purpose. social media cannot guarantee the security of
the transaction, so there have been many cases of fraud. Therefore, an application like
SpinOff that is intended to support the technical sales of these shoes is needed.

2.2. Project Integration Management

Our team implemented project integration management while developing the SpinOff
website. The aim of implementing project integration management is to combine the
knowledge learned from software engineering class and project management by the
project processes, which includes activities such as identifying, defining, combining,
unifying, and coordinating to finish the project. With these implementations, it can be
warranted that our project will be finished on time

2.3. Project Scope Management

Project scope management is a method to determine the scope, activity, and the objective
of the project. Project scope management is a necessity in this project to assure it includes
all pertinent work in achieving the aims and objectives of the project. There are 3 aspect
for the scope:

8
2.3.1. Scope Planning
In the first process in project scope management, we create a scope plan
document that you can refer to in the later stages. The document mainly helps in
defining, managing, validating, and controlling the project's scope. It includes:
● Detailed project scope statement
● Breakdown of all the project requirements
● Expected project deliverables
● Project change control process
The document doesn't have to be very detailed, it just has to fit the purpose. You
can also use a previous project's scope management plan as a reference for this.
2.3.2. Scope Definition
Our project is a website, which can be used on all devices, regardless of their
operating system. We developed this website using React to support usage
flexibility on all devices.
2.3.3. Scope Verification
Scope verification is a process of formalizing the acceptance of the project by
the stakeholders. The main purpose of this scope is to formally accept completed
deliverables and acquire sign-off which shows that the deliverables are adequate
and
meet the stakeholders' expectations. There are five documents we produce to
fulfill
this process:
a. Software Development Plan
b. Design Diagrams
c. Test Plan
d. Letter of Agreement
e. User Manual

9
2.4. Software Development Cycle

2.5. Responsibilities

Name Role Description

Raihan Jana Prasetya Front-end developer, UI/UX ● Developing the features,

Research, Project Manager design, and structure of
the web page
● Designing UI/UX for the
Website
● Communicating with
the client
● Creating Letter of
Agreement

Vincent Senjaya Back-end developer, Front-end ● Developing the features,

developer, Project Manager design, and structure of
the web page
● Developing and Creating
API of the web page
● Connecting
database-website
● Connecting
backend-frontend

Shaniya Camita Farin UI/UX Research, QA, Project ● Designing UI/UX for the
Manager Website
● Designing website logo
● Creating user manual

10
 ● Monitoring and
Ensuring website
features
● Creating project
documentation

2.6. Project Cost

Money are a limited resource when creating things, including this project. Therefore, we
should control our expense throughout the project with the objective of making sure that
our expense is below the approved budget.

Item Cost Description

Platform and Tools Rp 0 Tools like GitHub ,ReactJS,

ExpressJS, and such are free
and we use that to our
advantage for completing
this project

Database Rp 0 This project uses MongoDB,

a NoSQL database, which is
free to use

Modelling Rp 0 Our mind works best when

designing using pen and
paper. For that, we use pen
and paper for rough
concept of the UI

11
 CHAPTER III : SOFTWARE DESIGN

2.1. Use Case Diagram

12
2.2. Sequence Diagram

13
2.3. State Diagram

14
2.4. Activity Diagram

15
 References:

● Lim, S.F.W.T., Jin, X. and Srai, J.S. (2018), "Consumer-driven e-commerce: A literature
review, design framework, and research agenda on last-mile logistics models",
International Journal of Physical Distribution & Logistics Management, Vol. 48 No. 3,
pp. 308-332. https://doi.org/10.1108/IJPDLM-02-2017-00
● Scott W. O'Connor. (2020), “How to Create a Project Scope Management Plan”
,Northeastern University Website.
https://www.northeastern.edu/graduate/blog/scope-management-plan/

16