ساخت یک برنامه وب مدرن: FastAPI + React TypeScript Template

هی توسعه دهندگان! 👋 من مشتاقم الگویی را که ایجاد کرده ام که ترکیبی از FastAPI و React با TypeScript است را به اشتراک بگذارم تا به شما کمک کند پروژه های فول استک خود را سریعتر شروع کنید. چه در حال ساختن یک برنامه وب جدید باشید و چه به دنبال مدرن سازی پشته خود باشید، این الگو یک پایه محکم با بهترین شیوه ها فراهم می کند.

چرا این پشته؟ 🤔

ترکیب FastAPI و React چندین مزیت قانع کننده را ارائه می دهد:

Backend (FastAPI)

• عملکرد رعد و برق سریع با پشتیبانی async
• اسناد OpenAPI خودکار
• نکات و اعتبار سنجی را با Pydantic تایپ کنید
• یادگیری آسان و بهره وری بالا

Frontend (React + TypeScript)

• ایمنی تایپ کنید و تجربه توسعه دهنده بهتر
• ویژگی ها و قلاب های Modern React
• معماری اجزای مقیاس پذیر
• کاهش خطاهای زمان اجرا

زیرساخت

• MongoDB برای ذخیره سازی اسناد انعطاف پذیر
• Redis برای ذخیره سازی با عملکرد بالا
• داکر برای محیط های سازگار
• شعر و نخ برای مدیریت وابستگی

ویژگی های قالب 🚀

1. توسعه کانتینری

   • همه چیز را در Docker اجرا کنید یا از یک رویکرد ترکیبی استفاده کنید
   • محیط توسعه ثابت در بین اعضای تیم
   • پیکربندی های Docker آماده تولید

2. ابزارهای توسعه

   • ابزارهای قالب بندی کد
   • اسکریپت های توسعه برای کارهای رایج
   • قالب های پیکربندی محیطی

3. وابستگی های مدرن

   • پایتون 3.11 با مدیریت شعر
   • آخرین React 18 با TypeScript
   • ادغام MongoDB و Redis

شروع 🌟

این قالب به گونه ای طراحی شده است که استفاده از آن آسان باشد. در اینجا نحوه شروع شما آمده است:

1. کلون کردن مخزن:

git clone https://github.com/yagnesh97/fastapi-react-template
cd fastapi-react-template

1. فایل های محیط خود را تنظیم کنید:

# Backend environment
cd backend
cp .env-example .env

# Database environment
cd ../database
cp .env-example .env

1. حالت توسعه خود را انتخاب کنید:

گزینه 1: راه اندازی کامل Docker

docker-compose -f docker-compose.yml up --build -d

گزینه 2: راه اندازی ترکیبی (توسعه محلی با پایگاه داده Dockerized)

# Start MongoDB and Redis
docker-compose -f docker-compose.yml up mongo redis --build -d

# Start Backend
cd backend
poetry install
./cmd.sh start

# Start Frontend
cd frontend
yarn install
yarn start

ساختار پروژه 📁

├── backend/          # FastAPI application
├── frontend/         # React TypeScript application
├── database/         # Database configuration
└── docker-compose.yml

گردش کار توسعه 💻

این الگو از یک گردش کار توسعه انعطاف پذیر پشتیبانی می کند:

1. توسعه محلی

   • بارگذاری مجدد داغ برای هر دو قسمت جلویی و باطن
   • مدیریت وابستگی محلی
   • اشکال زدایی آسان

2. توسعه داکر

   • محیط سازگار در سراسر تیم
   • ارکستراسیون خدمات آسان
   • راه اندازی شبیه تولید

3. استقرار تولید

   • سازهای Docker بهینه شده
   • تنظیمات محیطی خاص
   • آماده برای ادغام CI/CD

بعد چه می شود؟ 🌅

بهبودهای آینده برنامه ریزی شده برای الگو:

1. صفحه دیگ احراز هویت
2. تنظیمات و نمونه های تست
3. الگوهای خط لوله CI/CD
4. ابزارهای توسعه بیشتر
5. نمونه های بهینه سازی عملکرد

مشارکت کنید 🤝

این الگو منبع باز است و از مشارکت پذیرفته می شود! خواه این باشد:

• رفع اشکال
• ویژگی های جدید
• بهبود اسناد
• پیشنهادات بهترین شیوه ها

با خیال راحت به:

1. مخزن را چنگال کنید
2. شاخه ویژگی خود را ایجاد کنید
3. درخواست کشش را ارسال کنید

همین حالا شروع کنید 🚀

الگو را در GitHub بررسی کنید: fastapi-react-template

اگر آن را مفید می دانید، ستاره دادن به آن را فراموش نکنید ⭐️

سوال یا پیشنهادی دارید؟ با خیال راحت به:

• یک موضوع را باز کنید
• درخواست کشش را ارسال کنید
• در زیر نظر دهید

بیایید با هم چیزی شگفت انگیز بسازیم! 💪