How to Build a Sustainable React Application? Encapsulation, Auto Code Generation, and Form Structure

Welcome to the Pet Shop Example Project 🏨—a showcase of best practices for building sustainable React applications. This project demonstrates:

• File Structure: A feature-first organization for scalable and maintainable code.
• API Integration: Using TypeScript and Axios with schema-based code generation for clean and efficient API calls.
• Forms: A modular and reusable form setup powered by Zod and React Hook Form.

The articles about this project

• EN: https://medium.com/@muratturkaym/how-to-build-a-sustainable-react-application-3a75d6873987
• TR: https://medium.com/@muratturkaym/sen-s%C3%BCrd%C3%BCr%C3%BClebilir-bir-react-uygulamas%C4%B1-nas%C4%B1l-geli%C5%9Ftirilir-47da3ba8877a

Features

🗂 Feature-Based File Structure

The project is organized by feature, promoting encapsulation and scalability. Each feature includes its own components, hooks, and logic.

🔄 API Integration

APIs are generated automatically using OpenAPI Generator for:

• Type safety
• Reduced boilerplate
• Seamless integration

📈 Modular Forms

Forms are designed with:

• Zod for schema-based validation
• React Hook Form for lightweight and powerful form state management
• Type-safe and reusable field components

Tech Stack

• React: UI development
• TypeScript: Type safety and scalability
• React Hook Form: Form state management
• Zod: Schema validation
• Axios: API requests
• OpenAPI Generator: Automated API client generation

Getting Started

Prerequisites

• Node.js (v16 or above)
• Yarn or npm

Installation

Clone the repository and install dependencies:

# Clone the repo
git clone https://github.com/mrTurkay/react-sustainable-app.git
cd react-sustainable-app

# Install dependencies
yarn install
# or
npm install

Running the Application

Start the development server:

yarn dev
# or
npm run dev

Visit http://localhost:5173/ to view the app in the browser.