Stater Kit Template

Table of Contents

1. Introduction
2. Tech Stack
3. Project Structure
4. Features
5. Setup and Installation

---

Introduction

This template application is designed to deliver a seamless user experience, utilizing modern tools and technologies for state management, styling, and data fetching. It supports features like authentication, conditional UI updates, and efficient data synchronization with APIs.

---

Tech Stack

Core Technologies

• React.js: Frontend library for building user interfaces.
• Next.js: Framework for React with server-side rendering and static site generation.
• TypeScript: Typed superset of JavaScript for type safety.
• Zustand: Lightweight state management for global and local state.
• React Query: For efficient data fetching, caching, and synchronization.
• Tailwind CSS: Utility-first CSS framework for styling.
• shadcn/ui: A customizable component library built on Radix UI and Tailwind CSS.

Tools

• Biome: Code formatter and linting.
• Lefthook: A fast and flexible Git hooks manager to ensure consistent code quality and workflows across the team.

API Interaction

• Axios: For handling HTTP requests.
• Custom ApiService: Encapsulates API calls and error handling.

---

Project Structure

src/
├── app/               # Route components
├── components/        # Reusable and modular UI components
├── hooks/             # Custom React hooks
│   ├── actions/       # Hooks for side effects and API interactions
│   └── stores/        # Zustand stores and state management hooks
├── lib/               # Core libraries and foundational utilities
├── models/            # TypeScript models and interfaces for data
├── providers/         # Context providers or HOCs for app-wide state
├── utils/             # Helper functions and reusable utilities
└── services/          # API interaction and service logic

---

Features

1. Authentication:

   • Zustand store for managing user session (useAuthStore).
   • login and logout methods for handling authentication flows.

2. Data Fetching:

   • React Query for API interactions and caching.
   • Zustand for global state where required.

3. UI:

   • Tailwind CSS for conditional UI updates (e.g., sidebar toggling).
   • Support for utility classes like group-data.

4. Code Quality:

   • Biome for formatting and linting.

---

Setup and Installation

Prerequisites

• PNPM (preferred for package management).

Installation

1. Clone the repository:

   git clone https://github.com/Afatkharrofiqi/template
   cd template

2. Install dependencies:

   pnpm install
   npx lefthook install

3. Set up environment variables:

   Create a .env file based on .env.example.

4. Run the development server:

   pnpm dev