React Typescript UI

Step-by-Step Setup Guide

React Typescript UI
- Vite.js
  - Routing and State Management
  - Frontend Components and Styling
- Features

Vite.js

Scaffold your React Typescript app with Vite.js:

npm create vite@latest react-ts --template react-swc-ts

Alternatives: Vanilla javascript and Typescript SSR:

npm create vite@latest react-js --template react-swc

npm create vite@latest react-ts-ssr
✔ Select a template: › ssr-react
✔ Select a variant: › TypeScript + SWC

Routing and State Management

React-Router and React-Redux:

npm install react-router-dom @reduxjs/toolkit react-hook-form react-redux

Frontend Components and Styling

ShadCN UI and Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

tsconfig.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

npm i -D @types/node

vite.config.ts

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

npx shadcn-ui@latest init

✔ Would you like to use TypeScript (recommended)? … yes
✔ Which style would you like to use? › New York
✔ Which color would you like to use as base color? › Zinc
✔ Where is your global CSS file? … src/styles/global.css
✔ Would you like to use CSS variables for colors? … yes
✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) …
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no
✔ Write configuration to components.json. Proceed? … yes

npx shadcn-ui@latest add <component name>

import { Component } from "@/components/ui/<component name>"

Features

Mocked Backend Login

HLS Live Streaming

Using hls.js to access *.m3u8 video streams:

JSON Rest APIs

Retrieving and displaying structured data from HTTP APIs:

Implement a search function by filtering the JSON data:

Dark/Light Theme

Using shadcn-ui to implement a day/night theme toggle:

Form Validation

Using react-hook-form for form validation:

Displaying Video Files

Play MP4 h.264 video files using video.js:

mpolinowski/react-typescript