Diana Liu

Projects

• 
  Google Location Autocomplete Demo

  Syntax - Typescript+React, Logic - React hooks and customized hooks, Storage - Redux + Context, Style - CSS + customized MUI component.

• 
  Sushi Chef K

  A business demonstration website (restaurant). Responsive design has been made for PCs, iPads, and mobiles. It was coding with HTML, SASS, and Vanilla JS.

• 
  ArtEast Studio CMS WIP

  My first self-deployed fullstack project. Frontend - React with JavaScript; backend - Node; database - MongoDB; Deployment - AWS EC2 & Nginx.

• 
  ArtEast Studio Website

  A business portal website. Tech stacks - HTML5, CSS, JavaScript, SEO. With responsive design for mobile screen.

• 
  PDF Generator

  A React with Typescript learning project. Practiced react routing, mainly useReducer hook, localStorage, and Typescript. Except for learning section, there are two pages - PDF generator and a CRUD task board.

• 
  Finance Logger

  A tool to record invoices and payments. Written in Typescript. Front end only(TS HTML CSS). Details are in my blog "Typescript learning and practice".

Blog

• 2023-11-07» deploy Deploy a fullstack project to AWS
• 2023-10-27» react Why We Use Debounce And useCallback Together
• 2023-09-26» typescript Typescript learning and practice
• 2023-09-18» react When I Write React for Three Times - Animated Countdown
• 2023-09-18» backend Internship Acquisition - Npm Start vs Run Directly What Inside Start
• 2023-09-17» fullstack Git
• 2023-09-16» backend Internship Acquisition - nvm
• 2023-08-28» fullstack Interview Questions
• 2023-08-22» JS How to explain promises and Async/Await in layman's terms
• 2023-08-01» react Problems when migrating from vanila JS to ReactJS
• 2023-07-29» JS Memory Leak with SetTimeOut and SetInterval
• 2023-07-26» personal Album - trip in Tasmania
• 2023-07-25» deploy Deploy React App to Github Pages and 404 Error

Practicing Projects

• 
  Todo List

  A deployed full-stack web app. Front end(JS HTML CSS), back end (NodeJS Express), database(Mongodb) and deployed at AWS.

• 50Days50Projects

  These projects are different from the one in Projects section. These are not coded with REACT. Just HTML, CSS, and JS.

• 50Days50Projects-React

  These front-end practicing projects is framed with REACT. Skills involve HTML, CSS, SASS, JS, and REACT. I also learnt how to host REACT apps on Github.

• Weather App

  A http request practice. Three methods applied - XMLHttpRequest, fetch with async/await, and axios with async/await.

• Responsive Card

  A CSS Responsive design practice

• Responsive Card 2

  A CSS Responsive design practice