FARM स्टैक गाइड: FastAPI, React और MongoDB के साथ फुल-स्टैक ऐप कैसे बनाएं

फुल-स्टैक FastAPI, React, MongoDB (FARM) एप्लिकेशन जेनरेटर उत्पादन-ग्रेड वेब एप्लिकेशन बनाने की प्रक्रिया को सरल बनाने के लिए तैयार किया गया एक शक्तिशाली टूल है। बैक एंड के लिए FastAPI, फ्रंट एंड के लिए React, और एक स्केलेबल NoSQL डेटाबेस के रूप में MongoDB को एकीकृत करके, FARM जेनरेटर Python डेवलपर्स को न्यूनतम सेटअप के साथ जल्दी से मजबूत एप्लिकेशन स्कैफोल्ड करने में सक्षम बनाता है। यह टूल उन डेवलपर्स के लिए आदर्श है जो बोयलरप्लेट कॉन्फ़िगर करने के बजाय फीचर्स बनाने पर ध्यान केंद्रित करना चाहते हैं।

यह लेख FARM एप्लिकेशन जेनरेटर का परिचय देता है, इसकी मुख्य विशेषताएँ समझाता है, चरण-दर-चरण सेटअप निर्देश प्रदान करता है, और एक वास्तविक उदाहरण—टास्क मैनेजमेंट एप्लिकेशन—के माध्यम से इसकी क्षमताओं का प्रदर्शन करता है। हमारा लक्ष्य यह दिखाना है कि यह जेनरेटर फुल-स्टैक डेवलपमेंट को कैसे सरल बनाता है और Python डेवलपर्स को स्केलेबल, प्रोडक्शन-रेडी एप्लिकेशन बनाने में सक्षम बनाता है।

यदि आपको MongoDB का पुनरावलोकन चाहिए, तो DataCamp का Introduction to MongoDB in Python कोर्स देखें। 

FastAPI एप्लिकेशन जेनरेटर क्या है?

FARM जेनरेटर निम्नलिखित कंपोनेंट्स के साथ एक पूर्ण वेब एप्लिकेशन स्टैक के निर्माण को स्वचालित करता है:

• फुल-स्टैक सेटअप: एक FastAPI बैक एंड, React फ्रंट एंड, और एक MongoDB डेटाबेस जेनरेट करता है, जो तेज़ विकास के लिए बेहतरी से इंटीग्रेटेड है।
• प्री-कॉन्फ़िगर्ड ऑथेंटिकेशन: सुरक्षित यूज़र एक्सेस के लिए OAuth2 with JWT, मैजिक लिंक ऑथेंटिकेशन, और कुकी मैनेजमेंट शामिल हैं। OAuth2 with JWT ऐसा है जैसे लॉगिन के बाद आपको एक सुरक्षित “VIP पास” (JWT कोड) मिलता है, जिससे आप प्राइवेट एरियाज़ एक्सेस कर सकते हैं।
• Docker Compose इंटीग्रेशन: आसान लोकल डेवलपमेंट और टेस्टिंग के लिए प्री-कॉन्फ़िगर्ड Docker Compose फाइलें प्रदान करता है।
• ऑपरेशनल टूल्स: असिंक्रोनस टास्क प्रोसेसिंग के लिए Celery, लोड बैलेंसिंग के लिए Traefik, और CI/CD के लिए GitHub Actions शामिल हैं, जो प्रोडक्शन-रेडी वातावरण सुनिश्चित करते हैं।

सभी फीचर्स GitHub रिपो में मिल सकते हैं।

डेवलपर्स के लिए लाभ

FARM जेनरेटर महत्वपूर्ण फायदे देता है:

• समय की बचत: ऑथेंटिकेशन या डेटाबेस कनेक्शंस जैसी दोहराव वाली सेटअप गतिविधियाँ हटाता है, जिससे डेवलपर्स तुरंत कोडिंग शुरू कर सकते हैं।
• श्रेष्ठ प्रथाएँ: इंडस्ट्री स्टैंडर्ड का पालन करते हुए स्केलेबल, सुरक्षित और मेंटेन करने योग्य प्रोजेक्ट स्ट्रक्चर सुनिश्चित करता है।
• लचीलापन: एक कस्टमाइज़ेबल नींव प्रदान करता है, जिसे डेवलपर्स अपनी परियोजना की ज़रूरतों के अनुसार बढ़ा सकते हैं।

MongoDB FastAPI एप्लिकेशन जेनरेटर कैसे चलाएँ

जेनरेटर की क्षमताएँ दिखाने के लिए, हम एक सैंपल प्रोजेक्ट सेटअप करके चलेंगे। निम्नलिखित निर्देश मानते हैं कि आपके पास Python 3.8+, Node.js, Docker, और Docker Compose इंस्टॉल हैं।

स्टेप-बाय-स्टेप सेटअप निर्देश

जेनरेटर की क्षमताएँ प्रदर्शित करने के लिए, हम task-manager नामक सैंपल प्रोजेक्ट बनाएँगे। सुनिश्चित करें कि आपने निम्नलिखित प्रीरिक्विज़िट्स इंस्टॉल कर रखे हैं:

• Python 3.11+: अधिमानतः 3.12, जिसे python3.12 --version से सत्यापित करें।
• Node.js: React फ्रंट एंड के लिए।
• Docker Desktop: कंटेनराइज़्ड डेवलपमेंट के लिए।
• MongoDB: लोकल इंस्टॉलेशन (जैसे Homebrew के जरिए brew install [email protected]) या MongoDB Atlas (एक कनेक्शन URI जैसे mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority का उपयोग करें)।
• Cookiecutter: प्रोजेक्ट टेम्पलेट जनरेट करने के लिए।
• Hatch: डिपेंडेंसी मैनेजमेंट के लिए।
• MongoDB Compass (वैकल्पिक): डेटाबेस विज़ुअलाइज़ेशन के लिए।

आगे बढ़ने से पहले, /usr/local/bin/python3.12 -m venv task-manager-venv से एक वर्चुअल एनवायरनमेंट बनाएँ और source task-manager-venv/bin/activate से उसे सक्रिय करें।

1. cookiecutter लाइब्रेरी इंस्टॉल करें: pip install cookiecutter
2. प्रोजेक्ट जनरेट करें: FARM जेनरेटर का उपयोग करके प्रोजेक्ट बनाएँ:

cookiecutter https://github.com/mongodb-labs/full-stack-fastapi-mongodb --no-input project_name="task-manager"
cd task-managerसंचालित द्वारा

3. MongoDB लोकली इंस्टॉल करें या MongoDB Atlas का उपयोग करें:

brew tap mongodb/brew
brew install [email protected]
brew services start [email protected]संचालित द्वारा

Atlas के लिए, साइन अप करें, एक फ्री क्लस्टर बनाएँ, और एक कनेक्शन स्ट्रिंग प्राप्त करें (उदा., mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority) जिसे आप अपनी .env फाइल में उपयोग करेंगे।

4. एनवायरनमेंट वेरिएबल्स कॉन्फ़िगर करें: 

.env फाइल कॉपी करें और एडिट करें:

cp .env.example .env
nano .envसंचालित द्वारा

अपनी MongoDB URI, डेटाबेस नाम, और सीक्रेट्स से अपडेट करें:

MONGODB_URI=mongodb://localhost:27017
MONGO_DATABASE=task_manager
SECRET_KEY=your-secret-key
FIRST_SUPERUSER=[email protected]
FIRST_SUPERUSER_PASSWORD=changethisसंचालित द्वारा

5. Docker Compose से बिल्ड करें और चलाएँ:

सुनिश्चित करें कि Docker Desktop चल रहा है, फिर:

docker compose build --no-cacheसंचालित द्वारा

1. docker compose up -d
2. एप्लिकेशन एक्सेस करें:
• फ्रंट एंड: http://localhost:3000
• बैक एंड: http://localhost/api/v1
• Swagger UI: http://localhost/docs (इंटरेक्टिव API डॉक्यूमेंटेशन)
• ReDoc: http://localhost/redoc
• Flower: http://localhost:5555 (Celery मॉनिटरिंग)
• Traefik UI: http://localhost:8090 (रूटिंग डैशबोर्ड)
3. लॉगिन करें [email protected] (पासवर्ड: changethis) से।
4. ऑथेंटिकेशन टेस्ट करें: Swagger UI (/docs) का उपयोग करके /auth/login या /auth/magic-link एंडपॉइंट्स टेस्ट करें।
5. CI/CD सेटअप करें: GitHub पर पुश करें ताकि शामिल GitHub Actions वर्कफ़्लोज़ ट्रिगर हों।

जेनरेट किए गए फुल-स्टैक प्रोजेक्ट स्ट्रक्चर को एक्सप्लोर करें

जब आप FARM जेनरेटर का उपयोग करते हैं, तो यह task-manager प्रोजेक्ट को सब कुछ सुव्यवस्थित करके बनाता है। इसे एक पहले से बने घर की तरह समझें जहाँ हर कमरे का एक काम है:

• backend/: यह वह रसोई है जहाँ FastAPI बैक एंड काम करता है। इसमें app/ (आपके API कोड के लिए) और conf/ (सेटिंग्स के लिए) जैसे फ़ोल्डर होते हैं जो टास्क और डेटा संभालते हैं।

• frontend/: यह वह लिविंग रूम है जहाँ उपयोगकर्ता आपकी वेबसाइट देखते हैं, Next.js/React द्वारा संचालित। app/ फ़ोल्डर में पेजेज़ (जैसे, about, TaskList) होते हैं जिनमें layout.tsx (पेज फ्रेम) और page.tsx (कंटेंट) जैसी फाइलें होती हैं। public/ फ़ोल्डर आपकी वेबसाइट के आइकन जैसी चीज़ों को स्टोर करता है।

• अन्य फाइलें: आपको docker-compose.yml (Docker के साथ सब कुछ चलाने के लिए), .env (आपकी सीक्रेट सेटिंग्स), और .github/workflows/ (जब आप अपना कोड साझा करते हैं तब ऑटोमैटिक टेस्टिंग के लिए) मिलेंगे।

यह सेटअप बढ़ने के लिए तैयार है, और जेनरेटर डेवलपमेंट को आसान बनाने के लिए बढ़िया टूल्स जोड़ता है!

जेनरेटर की विशेषताओं से आप क्या कर सकते हैं

FARM जेनरेटर में बेहतरीन बिल्ट-इन टूल्स आते हैं जो हर तरह की परियोजनाएँ बनाने में मदद करते हैं। यहाँ सरल तरीके से देखें कि वे क्या करते हैं और कैसे मदद करते हैं:

Docker Compose इंटीग्रेशन: लोकल डेवलपमेंट के लिए अनुकूलित

• यह क्या करता है: Docker Compose एक जादुई बटन जैसा है जो एक कमांड से आपका पूरा प्रोजेक्ट (बैक एंड, फ्रंट एंड, डेटाबेस) सेटअप और रन कर देता है। यह कंटेनरों का उपयोग करता है ताकि सब कुछ अलग-अलग रहे और आपके कंप्यूटर पर आसानी से टेस्ट हो सके।
• यह कैसे मदद करता है: आप docker compose up -d टाइप करके अपना task-manager ऐप शुरू कर सकते हैं और docker compose down से बंद कर सकते हैं। यह आपके कंप्यूटर को गड़बड़ किए बिना आइडिया आज़माने के लिए बेहतरीन है। docker compose ps से स्टेटस जाँचें—अगर सब “Up” है, तो आप तैयार हैं!

उदाहरण: प्रोजेक्ट सेटअप करने के बाद, बस चलाएँ:

cd task-manager
docker compose up -dसंचालित द्वारा

http://localhost:3000 खोलें और अपना फ्रंट एंड देखें—सब कुछ लोकली चल रहा होगा!

बिल्ट-इन ऑथेंटिकेशन सिस्टम

• यह क्या करता है: यह यूज़र अकाउंट्स के साथ एक लॉगिन सिस्टम जोड़ता है, जिसमें एक डिफ़ॉल्ट सुपरयूज़र (जैसे [email protected] पासवर्ड changethis के साथ) शामिल है। यह OAuth2 with JWT टोकन (सुरक्षित लॉगिन कोड) और मैजिक लिंक (लॉगिन के लिए ईमेल लिंक) का उपयोग करता है।
• यह कैसे मदद करता है: आप यूज़र्स को साइन अप, लॉगिन या मैजिक लिंक से आपकी ऐप तक पहुँचने दे सकते हैं। http://localhost/docs पर Swagger UI में आज़माएँ—लॉगिन टेस्ट करने के लिए /api/v1/login/oauth देखें। यह उन ऐप्स के लिए बढ़िया है जहाँ केवल चुनिंदा लोग चीज़ें देख सकें, जैसे एक निजी टास्क लिस्ट।

उदाहरण: डिफ़ॉल्ट यूज़र से लॉगिन करें:

1. http://localhost/docs पर जाएँ।
2. /api/v1/login/oauth खोजें, [email protected] और change this दर्ज करें, और “Execute” पर क्लिक करें। आपको प्राइवेट पेजेज़ के लिए उपयोग करने हेतु एक JWT टोकन मिलेगा!

टास्क मैनेजर API

Oauth API के लिए डेमो

Oauth API के लिए रिटर्न

FastAPI बैक एंड फीचर्स

आइए FastAPI-संचालित बैक एंड की मुख्य विशेषताओं पर करीब से नज़र डालें और देखें कि यह डेटाबेस ऑपरेशंस, API डिज़ाइन और स्केलेबिलिटी को कैसे सरल बनाता है।

• MongoDB Motor: यह वह इंजन है जो आपकी MongoDB डेटाबेस से बहुत तेज़ी से बात करता है, भले ही एक साथ ढेरों रिक्वेस्ट क्यों न हों।
• MongoDB ODMantic: इसे एक ऐसे हेल्पर की तरह समझें जो MongoDB में डेटा सेव और खोजने को आसान बनाता है, जैसे टास्क्स को सलीके से बॉक्सों में रखना।
• सामान्य CRUD सपोर्ट: CRUD का मतलब है create, read, update, delete। यह फीचर बिना शून्य से शुरू किए डेटा (जैसे टास्क) जोड़ने, देखने, बदलने या हटाने के लिए रेडीमेड टूल्स देता है।
• मानक-आधारित: यह OpenAPI और JSON Schema जैसे नियमों का पालन करता है, ताकि आपकी API स्पष्ट रहे और अन्य टूल्स या ऐप्स के साथ काम कर सके।
• यह कैसे मदद करता है: आप जल्दी से टास्क स्टोर करने के लिए बैक एंड बना सकते हैं। जेनरेटर यह सेटअप कर देता है, ताकि आप इसके दिए गए कोड का उपयोग करके नए टास्क फीचर्स जैसी अपनी आइडियाज़ जोड़ सकें।

उदाहरण: backend/app/api/tasks.py में एक त्वरित टास्क व्यूअर जोड़ें:

from fastapi import APIRouter, Depends
from odmantic import AIOEngine, Model
from motor.motor_asyncio import AsyncIOMotorClient
router = APIRouter(prefix="/tasks", tags=["tasks"])
class Task(Model):
    title: str
async def get_db():
    client = AsyncIOMotorClient("mongodb://localhost:27017")
    return AIOEngine(client, database="task_manager")
@router.get("/")  # View all tasks
async def get_tasks(db: AIOEngine = Depends(get_db)):
    return await db.find(Task)संचालित द्वारा

docker compose up --build से रीबिल्ड करने के बाद http://localhost/api/v1/tasks पर इसे टेस्ट करें।

Next.js/React फ्रंट एंड

React फ्रंट एंड वह जगह है जहाँ उपयोगकर्ता आपकी ऐप से इंटरैक्ट करते हैं। आइए देखें कि यह कैसे स्ट्रक्चर्ड है और चमकदार, रेस्पॉन्सिव पेज बनाने में कौन से टूल्स मदद करते हैं।

• मिडलवेयर ऑथराइज़ेशन: यह एक गेटकीपर की तरह काम करता है, कुछ पेज देखने से पहले जाँचता है कि यूज़र लॉगिन है या नहीं (उदा., केवल लॉगिन यूज़र ही /TaskList देखें)।
• React Hook Form के साथ फॉर्म वैलिडेशन: यह सुनिश्चित करता है कि फॉर्म्स (जैसे टास्क जोड़ने का फॉर्म) सेव करने से पहले सही जानकारी रखें, ताकि खाली टास्क अंदर न घुस पाएँ।
• Redux के साथ स्टेट मैनेजमेंट: यह चीज़ों पर नज़र रखता है, जैसे कौन से टास्क सेलेक्ट हैं, जिससे आपका ऐप बहुत सारा डेटा होने पर भी स्मूद और तेज़ रहता है।
• TailwindCSS, HeroIcons और HeadlessUI के साथ CSS और टेम्पलेट्स: ये पहले से बने डिज़ाइन टूल्स जैसे हैं। TailwindCSS आपके पेज स्टाइल करता है, HeroIcons बढ़िया आइकन जोड़ता है, और HeadlessUI बेहतरीन काम करने वाले बटन और मेन्यू देता है।
• यह कैसे मदद करता है: आप आसान फॉर्म्स और सुरक्षित एक्सेस के साथ एक अच्छा दिखने वाला टास्क पेज बना सकते हैं। जेनरेटर डिज़ाइन सेटअप करता है, ताकि आप टास्क जोड़ने या अन्य फीचर्स पर फोकस कर सकें।

उदाहरण: frontend/app/TaskList/page.tsx में एक साधारण टास्क फॉर्म जोड़ें:

import { useState } from 'react';
export default function TaskList() {
  const [task, setTask] = useState({ title: '' });
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    fetch('http://localhost/api/v1/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(task),
    });
    setTask({ title: '' });
  };
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold">Add Task</h1>
      <form onSubmit={handleSubmit}>
        <input
          className="border p-2"
          value={task.title}
          onChange={e => setTask({ title: e.target.value })}
          placeholder="Task name"
        />
        <button className="bg-blue-500 text-white p-2" type="submit">Add</button>
      </form>
    </div>
  );
}संचालित द्वारा

http://localhost:3000/TaskList पर जाकर एक टास्क जोड़ें।

अपने टास्क मैनेजर को बढ़ाएँ

जेनरेटर आपको एक ठोस शुरुआत देता है। उदाहरण के लिए, आप:

• CRUD टूल्स का उपयोग करके टास्क को पूरा चिह्नित करने के लिए बटन जोड़ें।
• अपनी टास्क लिस्ट को निजी रखने के लिए ऑथेंटिकेशन का उपयोग करें।
• TailwindCSS के साथ स्टाइल करें ताकि यह शानदार दिखे।
• Celery सेट करें ताकि ईमेल के जरिए टास्क रिमाइंडर भेजे जा सकें।

अन्य विचार जिन्हें एक्सप्लोर करें

इन फीचर्स के साथ, आप सिर्फ टास्क मैनेजर से कहीं अधिक बना सकते हैं:

• ब्लॉग या वेबसाइट: MongoDB में पोस्ट स्टोर करें, उन्हें दिखाने के लिए FastAPI का उपयोग करें, और Next.js से एक अच्छा साइट डिज़ाइन करें।
• ऑनलाइन स्टोर: MongoDB में प्रोडक्ट्स सेव करें, ऑर्डर्स को Celery से हैंडल करें, और Next.js के साथ शॉप पेज बनाएँ।
• लाइव अपडेट्स: MongoDB, FastAPI की लाइव क्षमताओं और Next.js डैशबोर्ड का उपयोग करके रियल-टाइम जानकारी (जैसे गेम स्कोर) दिखाएँ।

निष्कर्ष

FARM एप्लिकेशन जेनरेटर FastAPI, React और MongoDB को एकीकृत करने वाले प्री-कॉन्फ़िगर्ड, प्रोडक्शन-रेडी स्टैक के जरिए फुल-स्टैक डेवलपमेंट को सरल बनाता है। सेटअप कार्यों के ऑटोमेशन, श्रेष्ठ प्रथाओं के पालन और लचीली आर्किटेक्चर के कारण यह Python डेवलपर्स के लिए बहुमूल्य टूल है। चाहे आप टास्क मैनेजर बना रहे हों या जटिल वेब एप्लिकेशन, FARM जेनरेटर डेवलपमेंट को तेज़ करता है और स्केलेबिलिटी सुनिश्चित करता है। आज ही सेटअप निर्देशों का पालन करके इसे आज़माएँ, और इसकी पूरी क्षमताओं को अनलॉक करने के लिए GitHub रिपॉज़िटरी पर डॉक्यूमेंटेशन एक्सप्लोर करें!

यदि आप और सीखना चाहते हैं, तो ये संसाधन मददगार हैं:

• आधिकारिक रिपॉज़िटरी: सोर्स कोड एक्सप्लोर करें, पूरा डॉक्यूमेंटेशन पढ़ें, अपडेट देखें या योगदान दें।
• FastAPI डॉक्यूमेंटेशन: FastAPI की विशेषताओं और यह बैक एंड को कैसे शक्ति देता है, के बारे में और जानें।
• Introduction to FastAPI कोर्स: FastAPI के साथ मज़बूत, प्रोडक्शन-ग्रेड APIs बनाएँ, HTTP ऑपरेशंस, वैलिडेशन और async एक्ज़ीक्यूशन में महारत हासिल करते हुए कुशल डेटा और ML पाइपलाइंस तैयार करें।