Son of Atlan

A very simple vue application to demo some UI skills

Libraries

• ⚡️ Vue 3, Vite 3 - Born with fastness

• 🍍 State Management via Pinia

• 🔥 Use the new <script setup> syntax

• 🦾 TypeScript, of course

• 📦 AntDv Components

• 🔎 Prism Editor - Syntax Highlighting

• 📦 SurelyVue Components - For virtual scrolling

• ☁️ Deploy on Vercel, zero-config

Handling "large amount of rows"

A virtual scrolling table from SurelyVue (trial licence so pls bear with it 🔥) has been added instead of a normal one to handle bigger chunks of data.

Previously the page that used to lag for the orders table (800+ rows, 15 columns) now performs flawlessly. Check it out Orders Table

Performance

Measured using Google Lighthouse

• Initial Specs
  • First Paint: 1.8s
  • Performance Insight: 87
• Post Optimisation
  • First Paint: 1.0s
  • Performance Insight: 93

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with eslint-config-google, Double Quotes, Semi

Try it now!

requires Node >=14.18

Clone to local

git clone https://github.com/sanmoh-hombal/son-of-atlan.git
cd son-of-atlan
yarn install # If you don't have yarn installed, run: npm install -g yarn

Usage

Development

Just run and visit http://localhost:3000

yarn dev

Build

To build the App, run

yarn build

Preview

To preview the build, run

yarn preview