---
# System prepended metadata

title: Portfolio

---

# Portfolio

Members:
- Thi Khanh Hoa Nguyen(Hoa) (Graduated from York University[Computer Science], Working as a Web-developer): [Github](https://github.com/TKHNguyen)
- Hokyun(John) Park (Graduated from University of Toronto(St.George)[Computer Science]): [Github](https://github.com/JohnPHK)
- Hyewon(Hyeny) Jeon (4th year student at York University[Computer Science]): [Github](https://github.com/hyeny99) , [Resume](https://docs.google.com/document/d/1ChA7Eqn95kfdTq3ua7nISeCKvrn9Nch7OUahMW2xOB4/edit?usp=sharing)
- Hyungsoo(Henry) Park (3rd year student at University of Toronto(St.George)[Computer Science&Statistics]): [Github](https://github.com/kakaomonk)

If you need more previous projects of us we are always welcome!


## 1. Web Develmopment

### 1. Building E-Commerce Systems (by Hoa)

- Index page
![](https://imgur.com/JIgzyyF.png =600x300)

- Category page
![](https://imgur.com/RR7zD61.png =600x300)

- Cart Page
![](https://imgur.com/q3oWPgV.png =600x200)

- Check-out Page
![](https://imgur.com/UtI7l6r.png =600x400)

### 2. Special Quotation System (by Hoa)

This system will receive a special request form client then, a Special Product team will review the request, estimate the price and send the confirmation back to the client. 
If the client wants to proceed with the order, the system will send the specification of the product to the Engineering team to get the drawing and the IT team to update data into the database. Then the order will be sent to the production.

- Index Page
![](https://i.imgur.com/dLypzGK.png =600x600)

- Special Product Form
![](https://i.imgur.com/Q7EEdQy.png)

- Admin View Page
![](https://i.imgur.com/xVYpnsZ.png)


### 3. Textyourtile (by John)

I created textyourtile inspired by https://www.yourworldoftext.com/.

The website looks as follows:
![](https://i.imgur.com/3NUr5pg.png =600x600)


You can decorate the tiles in the background with text as you want.

![](https://i.imgur.com/QDWPB3R.png =800x300)


It has real-time feature allowing you to see other people writing in real time (socket used).

It also supports log-in feature.
![](https://i.imgur.com/pTS9ZKQ.png)

![](https://i.imgur.com/VfQJUlg.png)


You can register to make an account
![](https://i.imgur.com/WaXZlkt.png)


Has personal page where you can create your own world etc...
![](https://i.imgur.com/7v53Opf.png =600x600)

![](https://i.imgur.com/X9w0L5j.png)


[Source](https://github.com/JohnPHK/textyourtile)

### 4. Website purely programmed in HTML and CSS(by Hyeny)
- ICDP (computer science club webpage) 
[Source](https://github.com/hyeny99/ICDP-website)


## 2. App Development + others

### 1. Android app with game centre (by John)

![](https://i.imgur.com/51Akzk6.png =300x600)

First game inspired by the game 2048. The mechanism is the same, you swipe the phone to overlap the tiles.
The goal of the game is to overlap the same tiles to create subsequent alphabet.
The main goal is to get "K"th tile but you can go further to get "Z"tile.
![](https://i.imgur.com/VuWxQOO.png =300x600)



Second game is sea invader. You click on the boat and the invader (squid) will vanish. 
The goal is to destroy all the invaders before it hits the bottom of the phone screen.
![](https://i.imgur.com/x4EXr9T.png =300x600)


[Source](https://github.com/JohnPHK/CSC207_project.git)


### 2. Dungeon Escape (Tile Based 2D Game with game editor) (by Henry)

Note that this App also can be run on Android/iOS device with few changes.

Basic Game Rule:
- If player's point reaches to 0, the player loses and the program resets the board.
- If player reaches to the Goal, player wins
- ![](https://i.imgur.com/MFt0uYM.png =50x50) Alligator (Monster) that moves to the direction of the red arrow generator. If the player meets Alligator, then player loses points.
- ![](https://i.imgur.com/6FEZmj2.png =50x50) Chaser: Chaser chases the player by implemented moving algorithm. If the player meets Chaser, then player loses point.
- ![](https://i.imgur.com/AWPsxQJ.png =50x50) Pushable Ball: Player can push the ball, and the player can't push 2 balls at once.
- ![](https://i.imgur.com/jjuZuCM.png =50x50) ![](https://i.imgur.com/IA7q8OC.png =50x50) Teleporter: If player reaches to Portal, then he teleports to the Gate.
- ![](https://i.imgur.com/GoUqWPS.png =50x50) Goal


1. User can choose the size of the board ($n\times n$ size)

![](https://i.imgur.com/3xzsjk5.png)

![](https://i.imgur.com/42o18yi.png =600x600)

2. The User can edit the map with objects

![](https://i.imgur.com/CII6KI3.png =600x600)

3. In-game

![](https://i.imgur.com/h2l3ZQa.png =600x600)


[Source](https://github.com/kakaomonk/Dungeon_Escape?organization=kakaomonk&organization=kakaomonk)

### 3. Binance(Crpytocurrency market) Auto-Trader (by Henry)

Note that this project is inspired by [Bianace-Trading-Bot](https://github.com/chrisleekr/binance-trading-bot), and I have done 60% of the project in this summer. Unfortunately, I quitted doing this projcet since Binance will be BANNED in Toronto, Ontario soon. Therefore, I will describe what I've done.

1. Implemented Basic Algorithm for Buy/Sell Sign.
2. It can be run on Andriod/iOS devices
3. The App can be protected by Password 
![](https://i.imgur.com/8YsXOJj.png)
[Source](https://github.com/chrisleekr/binance-trading-bot)
4. The App can import price of Cryptos simultaneously on Binance server and App.
Note that this image is from Biance mobile app.
![](https://i.imgur.com/J1k4jZ3.png)
5. Unfortunately, I quitted this project since Binance is BANNED in Ontario.

To take a look how my project look like: [Click Here](https://binance-trading-bot-chrisleekr.cloud.okteto.net/)

### 4. Web Scrapper (by Henry)
- The major usage of this App is for searching Job in [Indeed](https://ca.indeed.com/?r=us) and [Stackoverflow](https://stackoverflow.com/jobs), and it also can be used for other purpose.
- User can set location and job title.
- User can set how many jobs he/she wants to see.
- After Scrapping the program produces .csv file of Job Postings(with details... Company Name, Job Title, link... etc.).

[Source](https://github.com/kakaomonk/Web_Scrapper)

### 5. Data Compresser by using Huffman Codes (by Henry)

- The program can compress following extensions (.txt, .bmp, .mp3, .wmv).
- It could compress the data successfully (i.e. 10mb to 6mb)
- It could depress compressed file.

In-use
1. Original File
![](https://i.imgur.com/j5Apduj.png)
Size of original file: 1,178KB

2. After Compression
![](https://i.imgur.com/5VsBXSR.png)
After Compression the size of compressed file is 669KB (1,178KB to 669KB)

3. After Decompression
![](https://i.imgur.com/ZstbEab.png)
After decompressing the file size is back to 1,178 without data loss.


[Source](https://github.com/kakaomonk/Data_Compression_with_Huffman_Codes)


### 6. OpenCV Android App (by Hyeny)
- Control a Robot via an android application
- Motion and object detection
- Object tracking


### 7. RESTful API without Angular (to be updated) (by Hyeny)
- Build a website for a company to manage employment.
- Using legacy systems for more efficient EMS: OrangeHRM and OpenCRX.
- Calculate bonus salary based on employee’s performance.
- Store data in a database.
- Developed in a standard mean stack way.

Language: Javascript
[Source](https://github.com/hyeny99/IA_MEANstack)

### 8. RESTful API using Node.js Express framework (by Hyeny)
- Building a website for a company; Focusing on the backend part.
- Node.js environment is used.
- Can be connected via HTTP endpoints.

Language: Javascript
[Source](https://github.com/hyeny99/Node.js-Express-framework)

### 9. Building backend using Springboot framework (by Hyeny)
- Springboot framework is used instead of Node.js packages.
Language: Java
https://github.com/hyeny99/Springboot-and-Postman

### 10. Building a webpage with EJS(by Hyeny)
- A website for a student dormitory
- MEAN stack way
- Frontend: EJS, HTML, CSS
- NoSQL cloud-based database was used: MongoDB Atlas
[Source](https://github.com/hyeny99/Tanenbusch_MEAN)
