Notes App Frontend (React + TypeScript + Vite)

A modern, fast, and type-safe single-page application (SPA) built to interface with a stateless REST API backend (Go/Python). This project serves as the presentation and choreography layer, managing user sessions with JSON Web Tokens (JWT) and dynamically rendering responsive HTML elements without full-page reloads.

🛠 Tech Stack

• Framework: React 18+ (Functional Components & Hooks)
• Language: TypeScript (Strict typing enabled with verbatimModuleSyntax)
• Build Tool: Vite (Ultra-fast Hot Module Replacement)
• Styling: Tailwind CSS (Utility-first configuration)
• Development Environment: VS Code with Remote-WSL & ESLint integration

📂 Project Structure

├── public/                 # Static assets
├── src/
│   ├── assets/             # Images and styles
│   ├── App.tsx             # Main Application Logic (State, Authentication, Mapping)
│   ├── index.css           # Global Tailwind Directives
│   ├── main.tsx            # React DOM Bootstrapper
│   └── vite-env.d.ts       # TypeScript Environment Definitions
├── index.html              # Core HTML Entrypoint Document
├── package.json            # Node Dependencies and Application Scripts
├── tailwind.config.js      # Tailwind Utility Configuration Layout
├── tsconfig.json           # TypeScript Compiler Specifications
└── vite.config.ts          # Vite Bundle Pipeline Configuration

🔄 Client-Server Architecture

This application communicates asynchronously with a backing REST API. It relies entirely on structured JSON contracts, bypassing traditional Server-Side Rendering (SSR) mechanics.

1. The Handshake (Authentication): Requests to /login return a stateless JWT.

2. The Keychain: The token is committed to localStorage and bundled into subsequent request headers: Authorization: Bearer .

3. The Data Loop: Server data is requested asynchronously via non-blocking async/await mechanics using the browser's fetch API.

🎛 Local Setup

Prerequisites Ensure you have Node.js (v18+) and npm installed inside your Linux/WSL environment.

Installation

1. Navigate to the project root directory inside your terminal:

cd ~/apis/notes-frontend-react

Install the required Node packages:

Bash
npm install

Running the Development Server Kick off Vite's fast development runtime:

Bash
npm run dev

The terminal will provide a local link (typically http://localhost:5173). Open this URL in your web browser.

🔍 Code Patterns & Mechanics Explored

• Declarative Mapping: Replaces traditional imperative database row-loops (e.g., PHP while or VB recordsets) by using native .map() loops to compute UI blocks dynamically based on state arrays.

• Non-Blocking Asynchrony (async/await): Pauses specific background tasks during slow network transmission steps while keeping the main browser rendering thread fluid, interactive, and responsive.

• Compile-Time Type Safety: Leveraging explicit TypeScript types (such as type FormEvent) to surface and neutralize runtime mismatch bugs directly within the VS Code environment before building production artifacts.