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.

EXPRESS DEPLOYTED BMI CALCULATOR

TECHNOLOGIES

• HTML
• CSS
• Bootstrap
• Backend Node.js
• Express

The BMI Calculator uses Express toolkit (based on Node. js) to deploy a web app calculating the adult BMI index through input human weight and height.

EXPRESS DEPLOYED WEATHER FETCH APP

TECHNOLOGIES

• HTML
• CSS
• Bootstrap
• Backend Node.js
• Express

The Express Deployed Weather Fetch APP utilizes the data of Open Weather API as raw material. It first presents a web page where users could input the latitude and longitude of a location, and then the realtime weather condition in the moment as well as that in the next 7 days will be loaded.

EXPRESS DEPLOYED NEWSLETTER SIGNUP PAGE

TECHNOLOGIES

• HTML
• CSS
• Bootstrap
• Backend Node.js
• Express
• MailChimp
• Heroku

The project is deployed by Node.js and hosted by Heroku. It mainly uses the Express library in node. The backend also takes advantage of MailChimp API which is used to store and manage subscriber's info. As you can see in display, after user submits the form, all the infomation flow to the MailChimp, and you can check out users' email, name and country there!

MONGOOSE TO DO LIST APP

TECHNOLOGIES

• HTML
• CSS
• Bootstrap
• Backend Node.js
• Express
• Heroku
• Mongoose
• MongoDB

It's a to-do-list app. New task items could be set up by clicking the '+' button and removed after the checkbox is checked. The customized task lists can be accessed through input params such as 'chores' or 'work' into url path, every single type-in will generate a relative customized task list.

MONGOOSE DAILY JOURNAL APP

TECHNOLOGIES

• HTML
• CSS
• Bootstrap
• Backend Node.js
• Express
• Heroku
• ejs
• Mongoose
• MongoDB

The Express and Mongoose Deployed Daily Journal Web APP contains the function of publishing, storing and deleting daily journals.

NODEJS AUTHENTICATION: SECRETS

TECHNOLOGIES

• HTML
• CSS
• Bootstrap
• Backend Node.js
• Express
• Heroku
• Mongoose
• MongoDB
• Passport

A website utilise different authentication stategy in Node.js to register user, and finally they could publish their secrets there.

XIAOTONG'S PORTFOLIO SITE

TECHNOLOGIES

• HTML
• CSS
• Bootstrap
• Backend Node.js
• Express
• Netify
• Pug

A template designed by myself to store all my project items.