WhyLog

✨ Features

This repository is 🔋 battery packed with:

• ⚡️ Vite - Next generation frontend tooling
• ⚛️ React 19 - Latest React with modern features
• ✨ TypeScript - Type safety and better DX
• 💨 Tailwind CSS 4 - Utility-first CSS framework
• 🦀 TanStack Query - Powerful data synchronization
• 🌐 Axios - HTTP client with interceptors
• 🛣️ React Router - Client-side routing
• 🔨 Biome - Fast formatter and linter
• 📦 pnpm - Fast, disk space efficient package manager
• 📁 Well-organized folder structure - Scalable and maintainable architecture
• 🔐 Authentication ready - JWT token injection setup
• 🎯 Path aliases - Clean imports with @/ prefix
• 🔧 Strict TypeScript config - verbatimModuleSyntax enabled

📁 Project Structure

src/
├── assets/          # Static assets (images, icons, etc.)
├── components/      # Reusable UI components
│   ├── header/
│   ├── footer/
│   └── hero/
├── constants/       # App constants and endpoints
├── hooks/           # Custom React hooks and Query context
├── layout/          # Layout components
├── pages/           # Page components
├── router/          # Route configuration
├── styles/          # Global styles and CSS
└── utils/           # Utility functions and HTTP client

🚀 Getting Started

Prerequisites

• Node.js 18+ and pnpm

Installation

1. Clone the repository:

git clone https://github.com/WhyLog-App/WhyLog-FE.git

2. Install dependencies:

pnpm install

3. Create a .env file in the root directory:

VITE_API_BASE_URL=http://localhost/api

Development

Start the development server:

pnpm start

The app will be available at http://localhost:3000

Build

Build for production:

pnpm build

Preview

Preview the production build:

pnpm preview

Linting & Formatting

Run linter:

pnpm lint

Format code:

pnpm format

Check and fix both linting and formatting:

pnpm check

🛠️ Configuration

Environment Variables

Create a .env file in the root directory with the following variables:

Variable	Description	Example
VITE_API_BASE_URL	Base URL for API requests	http://localhost/api

Path Aliases

The project is configured with path aliases for cleaner imports:

// Instead of
import { http } from '../../../utils/http';

// You can use
import { http } from '@/utils/http';

HTTP Client

The project includes a pre-configured Axios instance with:

• JWT token injection via interceptors
• Global error handling
• TypeScript support
• Base URL configuration

Example usage:

import { http } from '@/utils/http';

// GET request
const response = await http.get('/users');

// POST request
const response = await http.post('/users', { name: 'John' });

Code Quality

The project uses Biome for fast and consistent code quality:

• Formatter: 2-space indentation, 80 character line width, double quotes
• Linter: Recommended rules enabled
• Auto-organize imports: Automatically sorts and removes unused imports
• Git integration: Respects .gitignore files

Configuration is in biome.json.

📦 Tech Stack Details

Technology	Version	Purpose
React	19.2.4	UI library
TypeScript	5.9.3	Type safety
Vite	7.3.1	Build tool
Tailwind CSS	4.2.1	Styling
TanStack Query	5.90.21	Data fetching
Axios	1.13.6	HTTP client
React Router	7.13.1	Routing
Biome	2.4.7	Linter & Formatter