FULL STACK

React Gallery App

TECHNOLOGIES

• React
• Axios
• JavaScript
• HTML
• CSS

The React gallery app is an image gallery app built in a modular fashion to display 24 images in a page using Axios to fetch data from the Flickr API. The gallery app has a search component to display searched images, and the searched text is added to the route. There are 3 default displayed topics that are already setup using React Router.

Vue E-commerce Practice

TECHNOLOGIES

• Vue
• JavaScript
• HTML
• CSS

This project is a practice e-commerce frontend application built with Vue.js. It simulates a simple online shopping experience, including product listings, product detail pages, and a shopping cart feature. The goal of the project is to practice Vue components, routing, and state management, while exploring how to structure and build a responsive, interactive e-commerce web app.

ASYNCHRONOUS JS PROJECT

TECHNOLOGIES

• JavaScript
• HTML
• CSS
• Bootstrap
• Async

The mini project produces a webpage when click the 'view all the people' button. It shows astronauts info utilizing Asynchronous function with five solutions: Async-Await, Fetch, xhr with plane promise, xhr with callback, xhr without callback.

PUBLIC API REQUESTS

TECHNOLOGIES

• JavaScript
• HTML
• CSS
• Bootstrap
• Async

Created an employee directory by communicating with a third-party API (Application Programming Interface) to display a specific number details.

AJAX BASIC MINI PROJECT

TECHNOLOGIES

• JavaScript
• HTML
• CSS
• Bootstrap
• Back-end

This mini project is an Ajax-basics practice, it is run on the localhost environment deployed by XAMPP. All the files are on the server server. The web app deployed by JS vanilla shows the company's employee status and availability of the meeting room. It is quite basic. The Final Result shows as follows😉:

FETCH API DOG BREED WEB APP

TECHNOLOGIES

• JavaScript
• HTML
• CSS
• Bootstrap
• Async

Pull dog breed data from API and handle it asynchronously.

Data Filter and Pagnition

TECHNOLOGIES

• JavaScript
• HTML
• CSS
• Bootstrap

The pagination and filtering of a list of at least 42 students to show 9 students per page, each paginated link is to display another set of 9 students. A search Function is included.

DRUM KIT PLAY

TECHNOLOGIES

• JavaScript
• HTML
• Bootstrap
• CSS

A small project that visitors can play the sound of specific instrument by clicking the img or by hitting corresponding key in the keyboard.

A RANDOM QUOTE GENERATOR

TECHNOLOGIES

• JavaScript
• HTML
• CSS
• Bootstrap

JavaScript arrays and the random lib produce randomly generated quotes.

SIMPLE DICEE ROLL

TECHNOLOGIES

• JavaScript
• HTML
• Bootstrap
• CSS

A simple Dicee Roll Game, click refresh to throw the dice.

TINDOG STATIC WEB PAGE

TECHNOLOGIES

• HTML
• Bootstrap
• CSS

It's a static web page similar with Tinder, but for dog.