Examples

This is an example page to display markdown related styles for Mr. Green Jekyll Theme.

Headings (centered)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Paragraph

William Shakespeare, Let me not to the marriage of true minds Admit impediments. Love is not love Which alters when it alteration finds, Or bends with the remover to remove. O no, it is an ever-fixed mark That looks on tempests and is never shaken; It is the star to every wand’ring barque, Whose worth’s unknown, although his height be taken. Love’s not Time’s fool, though rosy lips and cheeks Within his bending sickle’s compass come; Love alters not with his brief hours and weeks, But bears it out even to the edge of doom. If this be error and upon me proved, I never writ, nor no man ever loved.

Texts

Quoted text Hello world

Bold text Hello world

Italic text Hello world

kbd text Hello world

Blockquote

William Shakespeare, Let me not to the marriage of true minds Admit impediments. Love is not love Which alters when it alteration finds, Or bends with the remover to remove. O no, it is an ever-fixed mark That looks on tempests and is never shaken; It is the star to every wand’ring barque, Whose worth’s unknown, although his height be taken. Love’s not Time’s fool, though rosy lips and cheeks Within his bending sickle’s compass come; Love alters not with his brief hours and weeks, But bears it out even to the edge of doom. If this be error and upon me proved, I never writ, nor no man ever loved.

Link

This is Mr. Green Jekyll Theme, a simple theme built for Jekyll.

Picture

Picture (centered)

Lists

• Apple
• Banana
• Orange

1. Fruits
   1. Apples
      • Granny Smith
      • Mutsu
   2. Bananas
      • Cavendish
      • Red
2. Vegetables

Tables

Small Table (centered)

Wide Table (centered)

scroll enabled when page is narrow

Wider Table

scroll enabled when page is narrow

Code

Quote

for i in range(5, 10):
  print(i)

What is this project about?

This project aims to facilitate the generation of badminton double matches based on user-inputted player names. Users can provide a list of players, and upon completing the input, they can click “Generate Teams.” The app will then split the players into two full groups based on the total number of teams. These teams will compete against each other in a group-stage competition, and the top two double pairs will proceed to the semifinal stage of the tournament.

App: Link
Github: Link

Reason of doing this App

1. Enhanced Player Interaction: In typical scenarios, players tend to team up with their closest friends, limiting diverse interactions. This app encourages advanced-level/intermediate-level players to compete against each other, fostering an exciting and challenging badminton tournament experience.
2. This app is fun to implement.

App Features

1. Adding Double Teams: Users can add double teams by entering the names of the players who will be playing together.
2. Random Team Generation: For individuals who do not have a partner, the app provides a feature to randomly generate double teams, ensuring everyone can participate.
3. Balanced Skill-Level Teams: The app considers the “Tier” attribute assigned to each player to generate double teams in a balanced manner. This ensures that the skill levels are evenly distributed among the teams, making the matches fair and competitive.
4. Group Split for Larger Teams: In cases where the team size exceeds 5, the app automatically divides the teams into two groups. Users have the option to switch between the groups by clicking on the respective boxes.
5. Random Group-Stage Matches: The app randomly generates group-stage matches, allowing each team to play against one another in an unpredictable sequence. This adds excitement and variety to the tournament.

Design Process && Challenges && Thought Process

What is this project about?

This project is a clone to the normal multiple choices exam that we dealt with throughout our high school and college life. It is a single-page-application. Once the user hit the start button, it will automatically generate four questions from random topics, including history, entertainment, anime, sciences…etc.

App: Link
Github: Link

Reason of doing this App

1. Gain React practices through projects
2. want to implement a quiz app to test myself.

App Features

1. Generate random questions
2. check for correctness and score after finishing the app

Design Process && Challenges && Thought Process

In the development of the QuizCal project using React, the management of various states played a crucial role.

Firstly, it was essential to keep track of whether the user had already started the quiz or not. This was easily achieved by using a state variable to dynamically render the page when the user clicks the ‘Start Quiz’ button.

Secondly, as the app fetched questions from the Open Trivia Database API, it was necessary to maintain a state to store the generated data array, ensuring the proper tracking of question data.

Thirdly, to track the user’s score throughout the quiz, a state was used to store and update the score accordingly. Once the user completed the quiz, the app automatically compared the answers and triggered a re-render of the page to display the updated score.

During the implementation of the project, several challenges were encountered. Since the questions data was fetched from an external API, the received object format did not match the expected JSON structure and contained HTML entities. To convert it into a human-readable format, a library, html-entities, was utilized to decode the entities into normal strings. Furthermore, the received object had multiple layers of data, and it does not come as user-friendly as it is for the developers. So extra extraction of the necessary information and remodeling the object is requred to turn the object into the desired format for proper uses for the app.

User Journey

When the user enter the page:

When the user click the start button:

When the user filled answers:

When the user finished the quiz:

Features to improve in the future.

1. record the time that user used to complete the quiz
2. dynamically ask the user for the number of questions and category they want
3. add a database and backend to make it a full-stack application

What is this project about?

This project is the online web-based version of the dice rolling game, tenzi. User get ten dices to roll. Each time it rolls, user dicided which number to hold and go for. Then, user re-roll other dices until all ten of the dices are the same numbers. Deep down, it is a luck testing game!!

App: Link
Github: Link

Reason of doing this App

1. this is a good practice project I built while I am still learning about React. It involves state management and effect management throughout the app.
2. tenzi is fun, I like playing tenzi with my friends in real life. :)
3. tenzi is a fair way to determine how lucky you are today. :)

App Features

1. generate 10 dices, and be able to click on them.
2. be able to hold some dices, and re-roll unhold dices.
3. can end the game, and play again.

Design Process && Challenges && Thought Process

In designing my web-based online version of the Tenzi game using React, I focused on creating an intuitive and streamlined experience. The main component of the page is the game itself, which requires rendering ten dice on a single page. To achieve this, I utilized an array of length 10 to store the dice values, allowing for dynamic rendering of the dice. Additionally, when re-rolling the dice, it was important to only re-roll the dice that were not being held. To facilitate this, Each dice object has a variable stating if the current dice is held or not, so we can distinguish and dynamically change the dice color while re-rendering the page. Once ten dice with the same number are held, the game checks for the win condition. The win condition requires two criteria: all ten dice must be held, and they must all show the same number. To determine if these criteria are met, I implemented a simple array traversal. To distinguish between the effects of winning and actively playing the game, I also incorporated a state variable to track the game’s completion status, ensuring a clear separation.

User Journey

When user first enter the page withough clicking any dice.

When user hold some dices.

When user finish the game.

Features to improve in the future.

1. implement restart game button while still playing the current game
2. check for how many counts needed for the game to win and display it once the user win the game.

What is this project about?

This project is a web-app that allows for notes taking. The idea behind is to allow the user utilize their local storage resources for note taking.

App: Link
Github: Link

Reasons for creating this app

I built this app while I was studying React for the first time. I followed a course on Scrimba so that I can start building small fun frontend React App. In addition, I learnt about how to use library resources to build up this App.

App features

1. Able to create a new Note App
2. can create, delete and change Heading of the sub-notes.
3. Utilizes localStorage of the browser, such that it reload the notes you put in before.

Design Process && Challenges && Thought Process

The Page will split into two sections, the left side would be the interactive side bar nav, and the right side would be the text editor for the notes. There are numerous way to achieve the same result. For example, I can build a single page React component by only using React and pure CSS. But I did some research and followed the course, and it is best to use some built in component from npm library, so that we do not need to use too much time building every functionality of the text editor from scratch.

To achieve rendering all the notes dynamically, we need a data structure to store all the notes data we have. And we want it to re-render whenever we change the note taking, so the most trivial solution here would be using a state, and the state would hold an array of object that has the time info and notes info. and since we are using react-mde package, we just need to pass in the update note function and current note tab id to it.

To achieve staying at a specific note, we need to identify which note tab we are holding currently. One way to achieve this feature is to manage a state variable that keep track of which note id we are currently in. Since we are mapping every note out in the sidebar nav, we can simply generate id while we create new notes.

All other functionalities are built uponed these concepts and state management.

User Journey

Since the user has not created any notes in local storage, the following screen will show up when the user first enter the URL.

Later the user hit the create notes button, it will show up the side nav bar and the text editor on the screen.

Features to improve in the future.

1. Add a database, so that it becomes real App with backend and database.
2. Modify the UI
3. Add Account Management Features.

Demo Video: Link

Project Scope & Overview Tech Stack:

This project is actually a group project with 10 engineers in the team. 5 for the frontend, 5 for the backend, and I am one of the 2 backend tech leads in this project. For the frontend, we used React Js, for the backend we used Golang. We also used some open sourced libraries such as mux for request router and dispatcher, gorm for object relational tool, and jwt middleware for token based authentication. For the database, we used MySQL from Amazon RDS.

What is this project about?

The ChatGPT Travel Planner is a full stack web application. In high level-sense, it is a travel planner app using ChatGPT API for tourist spot recommendation, and some self-defined algorithm for travel planning. It integrates with ChatGPT API, Google Map API, and Trip Advisor API. Basically for the user journey, the user will need to sign up/ login to the website, and then the user gets to input travel city, start date, end date. After that, it will receive recommendations from ChatGPT, such as top 10 popular spots based on the user interest. And then users can select the places that they want to visit, and we run our algorithms to make travel plans for them. 

Motivation behind this app:

1. Want to use ChatGPT functionality to build an application. ChatGPT was a really popular topic earlier this year. we just want to build an app using it
2. ChatGPT itself can actually build Travel Plan as well. So at the same time, we just want to compare and challenge chatGPT with our own app to see its accuracy and see how far it can go.

App Features

1. User get to login/signup to the website
2. Use String template to query ChatGPT for the destination city for attraction site recommendation
3. Once got the response from ChatGPT, extract String from the response, and query TripAdvisor API for site details, and return site with site detail to the frontend.
4. Once the user select any sites, save it to the DB, and once the user click generate plans
5. Run Google Map API and Graph Search Algorithm to generate concrete travel plan for the user.
6. The user can later select My vacation plan to review previous plan details.

User Critical Journey

User get to the home page User Signup/Login their account Enter their desired City Destination, Start Date, End Date Click on the site they are interested View the vacation plan View the detail inside each day View Transit View Street

ER Diagram