Executive Summary कार्यकारी सारांश
Zedemy is a full-featured educational platform designed to empower learners, content creators, and programmers. It enables users to read curated technical blogs, submit authenticated articles, code in-browser with autosave, and earn verifiable completion certificates. जेडेमी एक पूर्ण-विशेषताओं वाला शैक्षिक मंच है, जो शिक्षार्थियों, सामग्री निर्माताओं और प्रोग्रामरों को सशक्त बनाने के लिए डिज़ाइन किया गया है। यह उपयोगकर्ताओं को क्यूरेटेड तकनीकी ब्लॉग पढ़ने, प्रमाणित लेख सबमिट करने, ब्राउज़र में ऑटोसेव के साथ कोडिंग करने और सत्यापनीय पूर्णता प्रमाणपत्र अर्जित करने में सक्षम बनाता है।
Built by Sanjay Patidar, Zedemy leverages a serverless architecture with React, Vite, Tailwind CSS, AWS Lambda, API Gateway, and DynamoDB, deployed on Vercel for high performance and SEO optimization. संजय पाटीदार द्वारा निर्मित, जेडेमी React, Vite, Tailwind CSS, AWS Lambda, API Gateway और DynamoDB के साथ एक सर्वरलेस आर्किटेक्चर का उपयोग करता है, जो उच्च प्रदर्शन और SEO अनुकूलन के लिए Vercel पर तैनात है।
Project Objectives प्रोजेक्ट उद्देश्य
| Objective उद्देश्य | Description विवरण |
|---|---|
| Centralized Knowledge Platform केंद्रीकृत ज्ञान मंच | Create a unified space for consuming and creating content सामग्री उपभोग और निर्माण के लिए एक एकीकृत स्थान बनाएँ |
| Contributor-Driven Model योगदानकर्ता-प्रधान मॉडल | Allow authenticated users to submit blog content with review प्रमाणित उपयोगकर्ताओं को समीक्षा के साथ ब्लॉग सामग्री सबमिट करने की अनुमति दें |
| Certification Workflow प्रमाणपत्र कार्यप्रवाह | Offer downloadable and verifiable certificates for learning completion सीखने की पूर्णता के लिए डाउनलोड करने योग्य और सत्यापनीय प्रमाणपत्र प्रदान करें |
| In-Browser Code Experimentation ब्राउज़र में कोड प्रयोग | Provide a persistent, low-friction code editor experience एक स्थायी, कम-घर्षण कोड एडिटर अनुभव प्रदान करें |
| SEO Optimization SEO अनुकूलन | Optimize blog pages for structured SEO and scalability संरचित SEO और स्केलेबिलिटी के लिए ब्लॉग पेजों को अनुकूलित करें |
System Architecture सिस्टम आर्किटेक्चर
Image: Zedemy System Architecture
छवि: जेडेमी सिस्टम आर्किटेक्चर
Components: घटक:
- Frontend: React, Vite, Tailwind CSS, React Router, hosted on Vercel फ्रंटएंड: React, Vite, Tailwind CSS, React Router, Vercel पर होस्टेड
- Backend: API Gateway → AWS Lambda → DynamoDB बैकएंड: API Gateway → AWS Lambda → DynamoDB
- Infrastructure: Vercel CDN, AWS ACM (SSL), Vercel Rewrites इंफ्रास्ट्रक्चर: Vercel CDN, AWS ACM (SSL), Vercel Rewrites
Frontend Stack फ्रंटएंड स्टैक
Image: Zedemy Frontend Architecture
छवि: जेडेमी फ्रंटएंड आर्किटेक्चर
| Tech तकनीक | Why It Was Used इसे क्यों उपयोग किया गया |
|---|---|
| React.js | Component-based UI with dynamic routing डायनामिक रूटिंग के साथ कंपोनेंट-आधारित UI |
| Vite | High-speed build tool for SSR-compatible builds SSR-संगत बिल्ड के लिए उच्च-गति बिल्ड टूल |
| Tailwind CSS | Utility-first CSS for responsive design रिस्पॉन्सिव डिज़ाइन के लिए यूटिलिटी-फर्स्ट CSS |
| React Router | Handles page navigation and dynamic slugs पेज नेविगेशन और डायनामिक स्लग्स को संभालता है |
| React Helmet | Injects SEO metadata per page प्रति पेज SEO मेटाडेटा इंजेक्ट करता है |
| @uiw/react-codemirror | In-browser code editor with autosave and theming ऑटोसेव और थीमिंग के साथ ब्राउज़र में कोड एडिटर |
| Redux | Central state management for auth and posts प्रमाणीकरण और पोस्ट के लिए केंद्रीकृत स्थिति प्रबंधन |
| React Toastify | Non-blocking notifications for user actions उपयोगकर्ता कार्यों के लिए गैर-अवरोधक सूचनाएँ |
| React Lazyload | Deferred loading for performance optimization प्रदर्शन अनुकूलन के लिए विलंबित लोडिंग |
Backend Stack बैकएंड स्टैक
Image: Zedemy Backend Architecture
छवि: जेडेमी बैकएंड आर्किटेक्चर
| Tech तकनीक | Why It Was Used इसे क्यों उपयोग किया गया |
|---|---|
| AWS API Gateway | Handles HTTP requests from frontend फ्रंटएंड से HTTP अनुरोधों को संभालता है |
| AWS Lambda | Stateless functions for post and certificate handling पोस्ट और प्रमाणपत्र हैंडलिंग के लिए स्टेटलेस फ़ंक्शन |
| DynamoDB | Structured NoSQL storage for posts and certificates पोस्ट और प्रमाणपत्रों के लिए संरचित NoSQL भंडारण |
Data Flow: डेटा प्रवाह:
- User submits post or marks completion उपयोगकर्ता पोस्ट सबमिट करता है या पूर्णता चिह्नित करता है
- API Gateway routes to Lambda functions API Gateway Lambda फ़ंक्शंस को रूट करता है
- Lambda processes and stores in DynamoDB Lambda प्रोसेस करता है और DynamoDB में संग्रहीत करता है
- Certificate generation triggered on completion पूर्णता पर प्रमाणपत्र जनन शुरू होता है
Deployment & DevOps तैनाती और DevOps
Image: Zedemy Deployment Pipeline
छवि: जेडेमी तैनाती पाइपलाइन
Deployment Workflow: तैनाती कार्यप्रवाह:
- Feature branches pushed to GitHub GitHub पर फीचर ब्रांच पुश किए गए
- Vercel auto-triggers build via GitHub hooks Vercel GitHub हुक के माध्यम से स्वचालित रूप से बिल्ड शुरू करता है
- Vite optimizes and bundles code Vite कोड को अनुकूलित और बंडल करता है
- Assets served over Vercel CDN Vercel CDN पर परिसंपत्तियाँ प्रदान की जाती हैं
- Vercel rewrites route API calls to AWS Gateway Vercel रीराइट्स API कॉल को AWS Gateway पर रूट करता है
Performance and SEO प्रदर्शन और SEO
| Feature फीचर | Implementation कार्यान्वयन |
|---|---|
| Meta Tags and Canonical मेटा टैग और कैनोनिकल | Injected dynamically using React Helmet React Helmet का उपयोग करके गतिशील रूप से इंजेक्ट किया गया |
| OG & Twitter Tags OG और ट्विटर टैग | Auto-generated per post for sharing previews साझा करने के पूर्वावलोकन के लिए प्रति पोस्ट स्वचालित रूप से उत्पन्न |
| Dynamic Slug Pages डायनामिक स्लग पेज | Rendered dynamically with SEO metadata SEO मेटाडेटा के साथ गतिशील रूप से रेंडर किया गया |
| CDN Delivery CDN डिलीवरी | Vercel CDN ensures sub-1000ms load Vercel CDN 1000ms से कम लोड सुनिश्चित करता है |
| Indexed Content इंडेक्स्ड सामग्री | 20+ blog posts indexed by Google 20+ ब्लॉग पोस्ट Google द्वारा इंडेक्स्ड |
Code Editor Features कोड एडिटर फीचर्स
- Language Modes: JavaScript, HTML, CSS, Markdown, Python, JSON भाषा मोड: JavaScript, HTML, CSS, Markdown, Python, JSON
- Theming: Dracula, Okaidia, VS Code, Darcula थीमिंग: Dracula, Okaidia, VS Code, Darcula
- Autosave: Real-time persistence using localStorage ऑटोसेव: localStorage का उपयोग करके वास्तविक समय में स्थायित्व
- Multi-Tab: Multiple editors with draggable windows मल्टी-टैब: ड्रैग करने योग्य विंडो के साथ एकाधिक एडिटर
- Download: Save code as .txt or .jpeg डाउनलोड: कोड को .txt या .jpeg के रूप में सहेजें
Certification Workflow प्रमाणपत्र कार्यप्रवाह
- Users mark posts as completed, tracked in completionLogs उपयोगकर्ता पोस्ट को पूर्ण के रूप में चिह्नित करते हैं, completionLogs में ट्रैक किया जाता है
- Lambda validates completion and generates certificate Lambda पूर्णता को सत्यापित करता है और प्रमाणपत्र उत्पन्न करता है
- Certificates stored with UUID, userId, and category UUID, userId और श्रेणी के साथ प्रमाणपत्र संग्रहीत किए जाते हैं
- Verification via public search at certificate-verification प्रमाणपत्र-सत्यापन पर सार्वजनिक खोज के माध्यम से सत्यापन
Challenges and Solutions चुनौतियाँ और समाधान
| Challenge चुनौती | Solution समाधान |
|---|---|
| Routing /post/:slug without SSR SSR के बिना /post/:slug रूटिंग | Used Vercel rewrites and dynamic metadata injection Vercel रीराइट्स और गतिशील मेटाडेटा इंजेक्शन का उपयोग किया |
| Persistent editor across sessions सत्रों में स्थायी एडिटर | Autosave using localStorage with cleanup logic localStorage के साथ ऑटोसेव और सफाई तर्क |
| Certificate validation without login लॉगिन के बिना प्रमाणपत्र सत्यापन | Public certificate search via query strings क्वेरी स्ट्रिंग्स के माध्यम से सार्वजनिक प्रमाणपत्र खोज |
| Avoiding backend overuse बैकएंड के अत्यधिक उपयोग से बचना | Used frontend-local logic for editor and themes एडिटर और थीम्स के लिए फ्रंटएंड-स्थानीय तर्क का उपयोग किया |
Scalability Roadmap स्केलेबिलिटी रोडमैप
| Feature फीचर | Description विवरण |
|---|---|
| Admin Dashboard एडमिन डैशबोर्ड | Analytics, post moderation, and user control विश्लेषण, पोस्ट मॉडरेशन और उपयोगकर्ता नियंत्रण |
| Analytics विश्लेषण | Google Tag Manager or Plausible integration Google Tag Manager या Plausible एकीकरण |
| CMS Integration CMS एकीकरण | Convert post creation to headless CMS flow पोस्ट निर्माण को हेडलेस CMS प्रवाह में परिवर्तित करें |
| Payment Integration भुगतान एकीकरण | Stripe for paid certifications or courses प्रमाणपत्रों या पाठ्यक्रमों के लिए Stripe |
| AI Assistant AI सहायक | LLM-based auto-post generator or editor AI LLM-आधारित स्वचालित पोस्ट जनरेटर या एडिटर AI |
Frequently Asked Questions
Common queries about the Zedemy project, its technology, purpose, and deployment.
Is Zedemy a real project or a demo?
What tech stack powers Zedemy?
How is SEO implemented in Zedemy?
How does the code editor work?
How are certificates verified?
What performance metrics were achieved?
Can Zedemy scale for more users?
Final Reflection अंतिम विचार
Zedemy is an original, production-ready platform that integrates blogging, coding, and certification into a seamless educational experience. जेडेमी एक मूल, उत्पादन-तैयार मंच है जो ब्लॉगिंग, कोडिंग और प्रमाणन को एक सहज शैक्षिक अनुभव में एकीकृत करता है।
Built from scratch, it showcases technical expertise in serverless architecture, SEO, and modern frontend development. स्क्रैच से निर्मित, यह सर्वरलेस आर्किटेक्चर, SEO और आधुनिक फ्रंटएंड विकास में तकनीकी विशेषज्ञता को प्रदर्शित करता है।
Authored by: Sanjay Patidar, Full-Stack Developer लेखक: संजय पाटीदार, फुल-स्टैक डेवलपर