HiHa Store TypeScript

Visit the store: https://nvdai2401.github.io/hiha-store-ts

HiHa Store is a reliable, scalable and maintainable front-end application.
Read the application architecture to explore awesome things that makes the application reliable, scalable and maintainable.

HiHa Store TypeScript is a big upgrade version of HiHa Store JavaScript. I built this app to apply a scalable architecture and experiment best practices that I've learnt for one year. You should read the HiHa Store JavaScript firstly and then explore this application codebase to see the magic behind the scene.

Requirements

• node 12+
• TypeScript 3.8+

Techniques

• Splitting code by route using React Lazy API to decrease the bundle size of each route
• Use Critical FOFT with Data URI for web font with sessionStorage trick for repeat view optimization
• Persist and reselect data of Redux store to decrease request and rerender times
• Use lazy loading image with Dominant Color Placeholder by scaling down the image to down to a 1×1 pixel and then scaling it up to the size of the placeholder

Tech stack

• Language: Typescript
• Library: React, React-router, Redux, Redux-saga, Reselect, Redux-persist
• Styles: SCSS
• Tools: Firebase, Docker, ImageKit

Installation guide

1. Download zip file or type this command into your terminal git clone [email protected]:nvdai2401/hiha-store-ts.git
2. Run yarn to install essential dependencies
3. Run yarn start to start the web app. The app will run at localhost:3003

Todo list

• Add safer type checking for saga, utilities, firebase helpers
• Develop additional features
  • Improve product image quality and improve lazy loading image
  • Notify user when adding a product to cart successfully
  • Develop product detail page
  • Use auth token instead of checking firebase session
  • Improve SEO performance by using SSR and adding meta tags
• Develop a server to serve this app
• Write unit tests

Demo

Mobile version

Desktop version