وب‌سرویس مجید

پروژه‌های متن‌باز | OpenSource Projects

کاربرد: این کتابخانه به شما کمک می‌کنه تا با استفاده از انتقال‌های magicmove، انیمیشن‌های جذاب و روان بین صفحات یا المان‌ها در اپلیکیشن‌های React ایجاد کنید — مثل وقتی که یک تصویر از یک صفحه به صفحه دیگر با انیمیشن حرکت می‌کنه. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای یک تجربه کاربری حرفه‌ای و س ...

  • #react
  • #animation
  • #magicmove
  • #transitions
  • #uiux
  • #frontend
  • #webdev
  • #javascript
  • #singlepageapp
  • #smoothUX

این پروژه چیه؟ یک کتابخانه سبک و بدون وابستگی برای اضافه کردن افکت tilt (کج شدن) به کامپوننت‌های React هنگام حرکت ماوس هست. ️ با استفاده از این ابزار، کامپوننت‌ها به صورت پارالاکسیک به حرکت ماوس واکنش نشان می‌دهند و حس تعاملی بیشتری ایجاد می‌کنند. کاربرد: برای ایجاد رابط‌های کاربری جذاب و پویا در صف ...

  • #React
  • #TiltEffect
  • #Parallax
  • #UIUX
  • #Lightweight
  • #ZeroDependencies
  • #InteractiveUI
  • #Frontend
  • #WebDesign
  • #ReactComponents

کاربرد: این کتابخانه به تو اجازه می‌ده تا با استفاده از React و کامپوننت‌های آشنا، فایل‌های PDF ایجاد کنی مثل این می‌مونه که یه صفحه وب بسازی، ولی خروجی‌اش یه PDF تمیز و حرفه‌ای باشه! در چه شرایطی بهتره استفاده بشه؟ وقتی نیاز داری گزارش‌های پویا، فاکتورهای فروش، رزومه، یا سند قرارداد رو به صورت خودک ...

  • #react
  • #pdf
  • #document_generation
  • #typescript
  • #web_development
  • #dynamic_forms
  • #reporting
  • #frontend
  • #javascript
  • #jsx

این یک کامپوننت ری‌اکت است که به راحتی اجازه نمایش فایل‌های PDF را در برنامه‌های وب می‌دهد، با استفاده از کتابخانه قدرتمند PDF.js از موزیلا. کاربرد: این کامپوننت برای نمایش فایل‌های PDF در رابط کاربری ری‌اکت طراحی شده و بدون نیاز به دانلود یا بازکردن مرورگر، محتوای PDF را مستقیماً در صفحه نمایش می‌د ...

  • #react
  • #pdfjs
  • #pdf_viewer
  • #web_development
  • #document_viewer
  • #react_component
  • #frontend
  • #javascript
  • #mikecousins
  • #pdf_library

کاربرد: این کتابخانه یک کامپوننت ری‌اکت برای نمایش سند‌های PDF در برنامه‌های وب فراهم می‌کند. امکاناتی مثل زوم، جستجو، چرخش صفحه و ناوبری بین صفحات را به راحتی فراهم می‌کند. در چه شرایطی بهتره استفاده بشه؟ وقتی نیاز داری یک فایل PDF رو مستقیماً در مرورگر کاربر نمایش بدی، بدون نیاز به دانلود یا استفا ...

  • #PDFViewer
  • #ReactComponent
  • #DocumentViewer
  • #WebApp
  • #FilePreview
  • #ReactLibrary
  • #OnlinePDF
  • #UserInterface
  • #FrontendTool
  • #InteractivePDF

این یک افزونه مرورگر برای بررسی عملکرد کامپوننت‌های React است. ️ کاربرد: این ابزار به تو کمک می‌کنه تا بفهمی کدوم کامپوننت‌ها دارن عملکرد ضعیفی دارن، چقدر زمان می‌برن تا رندر بشن و چه تعداد بار دوباره رندر می‌شن. ️‍️ در چه شرایطی بهتره استفاده بشه؟ وقتی داری روی یک پروژه بزرگ React کار می‌کنی و متوج ...

  • #React
  • #Performance
  • #DevTools
  • #WebDevelopment
  • #Frontend
  • #Optimization
  • #JavaScript
  • #Debugging
  • #ReactComponents
  • #WebPerf

این پروژه یک کتابخانه برای مدیریت دسترسی‌ها در کامپوننت‌های React است. ️ کاربرد: این ابزار به تو اجازه می‌ده تا نمایش کامپوننت‌ها یا بخش‌هایی از رابط کاربری رو بر اساس نقش کاربر یا دسترسی‌هایش کنترل کنی. در چه شرایطی بهتره استفاده بشه؟ وقتی تو یک اپلیکیشن بزرگ داری که کاربران با نقش‌های مختلف (مثل ا ...

  • #React
  • #Permissions
  • #Authorization
  • #UI
  • #Components
  • #RoleBasedAccess
  • #FrontendSecurity
  • #ReactLibrary
  • #AccessControl
  • #RBAC

کاربرد: این مجموعه‌ای از اصول و تفکرات است که mithi در هنگام نوشتن کد با React به آنها توجه می‌کند. شامل راهنمایی‌هایی درباره نحوه ساخت کامپوننت‌ها، مدیریت حالت، ساختار پروژه و بهترین روش‌های توسعه با React است. در چه شرایطی بهتره استفاده بشه؟ وقتی داری با React کار می‌کنی و می‌خوای کدهات تمیز، قابل ...

  • #React
  • #Frontend
  • #JavaScript
  • #WebDevelopment
  • #UI
  • #CodeQuality
  • #BestPractices
  • #CleanCode
  • #ReactHooks
  • #DevTips

این یک کامپوننت ورودی تلفن برای برنامه‌های React است که قابلیت فرمت‌بندی خودکار شماره تلفن را دارد و بسیار قابل سفارشی‌سازی است. کاربرد: این کامپوننت به شما کمک می‌کنه تا ورودی شماره تلفن رو به صورت حرفه‌ای و با پشتیبانی از کشورهای مختلف پیاده‌سازی کنید. همچنین به کاربر کمک می‌کنه شماره رو به فرمت ص ...

  • #react
  • #phone_input
  • #form_validation
  • #user_experience
  • #internationalization
  • #frontend
  • #customizable_component
  • #responsive_design
  • #web_development
  • #input_component

کاربرد: این پلتفرم متن‌باز به تو کمک می‌کنه تا ReactJS رو با تمرین عملی یاد بگیری. شامل مجموعه‌ای از پروژه‌های واقعی و تعاملی هست که می‌تونی اجرا کنی، تغییر بدی و نتیجه‌ش رو ببینی. در چه شرایطی بهتره استفاده بشه؟ اگر تازه کار با React رو شروع کردی یا می‌خوای مهارت‌هات رو تقویت کنی، این پروژه عالیه. ...

  • #ReactJS
  • #LearnReact
  • #WebDevelopment
  • #Frontend
  • #HandsOnLearning
  • #ReactProjects
  • #OpenSource
  • #CodingPractice
  • #JavaScript
  • #React_Play

این یک کامپوننت ری‌اکت برای نمایش نمودارهای تعاملی با استفاده از plotly.js است که توسط تیم Plotly توسعه داده شده کاربرد: این کتابخانه به تو اجازه می‌ده تا به راحتی نمودارهای پیچیده و تعاملی مثل نمودارهای خطی، میله‌ای، پراکندگی، هیستوگرام و غیره رو در برنامه‌های ری‌اکت نمایش بدی در چه شرایطی بهتره اس ...

  • #data_visualization
  • #react
  • #plotly
  • #charts
  • #dashboard
  • #interactive
  • #javascript
  • #web_dev
  • #data_analysis
  • #frontend

این یک برنامهٔ سادهٔ فروشگاهی (POS) است که با استفاده از Node.js و React.js ساخته شده است. کاربرد: این پروژه برای مدیریت فروش در فروشگاه‌های کوچک یا کافه‌ها مناسب است و امکان ثبت سفارش، محاسبه قیمت و نمایش فاکتور را فراهم می‌کند. در چه شرایطی بهتره استفاده بشه؟ وقتی به دنبال یک سیستم سبک و بدون نیاز ...

  • #POS_System
  • #ReactJS
  • #NodeJS
  • #PointOfSale
  • #JavaScript
  • #WebApp
  • #SmallBusiness
  • #Frontend
  • #Backend
  • #OpenSource

کاربرد: این کتابخانه رسمی، امکان استفاده از Popper رو در کامپوننت‌های React فراهم می‌کنه. Popper یک کتابخانه قدرتمند برای موقعیت‌دهی المان‌ها مثل توولتیپ، دراپ‌داون و مُدال نسبت به یک المان دیگه هست. در چه شرایطی بهتره استفاده بشه؟ وقتی نیاز داری المانی رو به صورت پویا و هوشمند نسبت به یک المان دیگه ...

  • #react
  • #popper
  • #ui
  • #tooltip
  • #dropdown
  • #popover
  • #floatingui
  • #webdev
  • #frontend
  • #javascript

کاربرد: این کامپوننت ری‌اکت به شما کمک می‌کنه تا المان‌هایی مثل مودال، لایتباکس یا نوار بارگذاری رو از ساختار والد خود خارج کرده و به جایی مثل document.body منتقل کنید. این کار از مشکلات استایل و لایه‌بندی (مثل zindex) جلوگیری می‌کنه. در چه شرایطی بهتره استفاده بشه؟ وقتی که المان‌های شما در یک بسته ...

  • #React
  • #Portal
  • #Modal
  • #UI
  • #Component
  • #Frontend
  • #WebDevelopment
  • #JavaScript
  • #DevTools
  • #UX

یک تمپلیت مدرن و رایگان از پورتفولیو شخصی با قابلیت شخصی‌سازی بالا که با React ساخته شده و مناسب نمایش پروژه‌ها، مهارت‌ها و درباره‌ی شماست. کاربرد: این تمپلیت برای افرادی که می‌خوان یک وبسایت شخصی حرفه‌ای داشته باشن، عالیه — مثل توسعه‌دهندگان، طراحان یا فریلنسرها. در چه شرایطی بهتره استفاده بشه؟ وقت ...

  • #React
  • #PortfolioTemplate
  • #FreeTemplate
  • #WebDeveloper
  • #Frontend
  • #PersonalWebsite
  • #DeveloperPortfolio
  • #OpenSource
  • #ReactJS
  • #FreelancerTool

این کتابخانه به تو امکان میده تا افکت‌های پست‌پردازش (postprocessing) رو به راحتی در صحنه‌های three.js که با reactthreefiber ساخته شدن اعمال کنی. کاربرد: این ابزار برای اضافه کردن افکت‌های بصری مثل motion blur، bloom، depth of field، film grain و غیره به انیمیشن‌ها و صحنه‌های سه‌بعدی استفاده میشه. د ...

  • #react_three_fiber
  • #post_processing
  • #threejs
  • #webgl
  • #3D_effects
  • #bloom
  • #motion_blur
  • #digital_art
  • #creative_coding
  • #r3f

کاربرد: این پروژه از کامپوننت‌های بدون رابط کاربری (Renderless) استفاده می‌کنه تا منطق رفتارهای تعاملی مثل مدیریت وضعیت، رویدادها و کنترل ورودی‌ها رو در ری‌اکت به صورت تمیز و قابل استفاده مجدد فراهم کنه در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای منطق کامپوننت‌های ری‌اکت رو از ظاهرشون جدا کنی، این ...

  • #React
  • #RenderlessComponents
  • #StateManagement
  • #UIComposition
  • #ReusableLogic
  • #JavaScript
  • #Frontend
  • #DeclarativeUI
  • #ReactPatterns
  • #ComponentDesign

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

  • #React
  • #PDFGenerator
  • #PrintReady
  • #UIComponents
  • #DynamicDocuments
  • #InvoiceGenerator
  • #WebDevelopment
  • #FrontendTools
  • #ReusableComponents
  • #TypeScript

این کتابخانه یک سایدبار حرفهای و سفارشی‌سازی‌پذیر برای برنامه‌های React ارائه می‌دهد که به توسعه‌دهندگان کمک می‌کند تا منوی کناری زیبا و پویا بسازند. کاربرد: این کامپوننت برای ساخت نوارهای کناری مدیریتی در داشبوردهای ادمین، برنامه‌های مدیریت کسب‌وکار و سیستم‌های داخلی مناسب است. در چه شرایطی بهتره ا ...

  • #react
  • #sidebar
  • #dashboard
  • #adminpanel
  • #components
  • #uiux
  • #darkmode
  • #responsive
  • #webdev
  • #reactjs

کاربرد: این ابزار یک ابزار نمونه‌سازی برای توسعه‌دهندگان و طراحان است که به راحتی امکان ساخت سریع نمونه‌های تعاملی از برنامه‌های React را فراهم می‌کند. ️ در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای یک ایده رو سریع تست کنی، یا قبل از شروع توسعه کامل، یک نمونه کارکردی از رابط کاربری بسازی. این ابزار ...

  • #React
  • #Prototyping
  • #UI_Design
  • #Frontend_Development
  • #Developer_Tools
  • #Design_To_Code
  • #Interactive_Design
  • #Web_Development
  • #Rapid_Prototyping
  • #React_Tools

کاربرد: این پروژه یک الگوی آماده برای ساخت برنامه‌های پیشرفتة تحت وب (PWA) با قابلیت رندرینگ سمت سرور (SSR) است که برای سئو بهینه‌سازی شده و تجربه کاربری عالی و سرعت بالای صفحه را فراهم می‌کند. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای یک برنامه تحت وب سریع، قابل دسترس و دوستدار موتورهای جستجو بس ...

  • #PWA
  • #React
  • #SSR
  • #SEO
  • #Performance
  • #WebApp
  • #Boilerplate
  • #NextJS
  • #OfflineFirst
  • #FastLoading

کاربرد: این یک کتابخانه ری‌اکتیو برای ساخت رابط‌های کاربری تعاملی با پایتون است، مثل React ولی به زبان پایتون با استفاده از JSX شبیه یا کامپوننت‌های پایتونی می‌تونی UI بسازی بدون نیاز به جاوااسکریپت در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای یک اپ وب تعاملی بسازی ولی دوست نداری با جاوااسکریپت سر و ...

  • #reactpy
  • #python
  • #webui
  • #reactive
  • #interactive_ui
  • #data_dashboard
  • #no_javascript
  • #pyodide
  • #component_based
  • #web_apps

چه چیزیه؟ ReactQL یک کیت شروع جهانی (Universal Starter Kit) برای ساخت برنامه‌های مدرن وب با React و GraphQL هست. این پروژه ترکیبی قدرتمند از فناوری‌های پیشرفته مثل React 16، Apollo 2، MobX، Emotion، Webpack 4، React Router 4 و PostCSS رو ارائه می‌ده و از سرور ساید رندرینگ (SSR) و کد جنراتور GraphQL ...

  • #React
  • #GraphQL
  • #Apollo
  • #SSR
  • #Webpack
  • #MobX
  • #Emotion
  • #StarterKit
  • #WebDevelopment
  • #FullStack

این یک کامپوننت ری‌اکت است که از طریق وب‌کم دستگاه، کدهای QR را می‌خواند. کاربرد: این کتابخانه برای پروژه‌هایی که نیاز دارند کد QR را از طریق دوربین دستگاه کاربر اسکن کنند، مناسب است. مثل سیستم‌های ورود و خروج، پرداخت دیجیتال، یا تأیید هویت. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خواهید یک اسکنر QR ...

  • #QRScanner
  • #ReactComponent
  • #WebcamQR
  • #ReactJS
  • #Frontend
  • #Authentication
  • #DigitalPayment
  • #EventTicketing
  • #BrowserBased
  • #QRCodeReader

این کامپوننت یک سازنده پرس‌وجو (Query Builder) برای فریم‌ورک React است که به کاربران اجازه می‌دهد به راحتی شرایط جست‌وجو را به صورت بصری بسازند و مدیریت کنند. کاربرد: این کتابخانه برای ساخت رابط‌های کاربری که نیاز به ساخت پرس‌وجوهای پیچیده دارند (مثل فیلترهای پیشرفته در داشبوردها، سیستم‌های گزارش‌گی ...

  • #react
  • #querybuilder
  • #react_components
  • #dynamic_filters
  • #form_builder
  • #json_query
  • #sql_generator
  • #ui_components
  • #dashboard_tools
  • #advanced_search

این پروژه یک راهنمای جامع برای یادگیری مفاهیم پرکاربرد در TanStack Query (معروف به React Query) است. این کتابخانه به توسعه‌دهندگان کمک می‌کند تا مدیریت داده‌های آسنکرون در برنامه‌های React را به‌راحتی انجام دهند. کاربرد: این آموزش به شما کمک می‌کند تا با مفاهیمی مثل fetching، caching، syncing و upda ...

  • #react_query
  • #tanstack_query
  • #reactjs
  • #data_fetching
  • #caching
  • #frontend
  • #web_dev
  • #javascript
  • #api_integration
  • #react_hooks

کاربرد: این کتابخانه مجموعه‌ای از کامپوننت‌های زیبا و واکنش‌گرا برای ساخت سریع رابط‌های کاربری مدرن با تمی رنگی و جذاب ارائه می‌دهد. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای یک وب‌اپلیکیشن زیبا و حرفه‌ای رو سریع بسازی و دوست نداری از صفر طراحی کنی. مناسب پروژه‌هایی که به دنبال تمی رنگی، مدرن و ک ...

  • #ReactComponents
  • #UI_Library
  • #RainbowDesign
  • #WebDevelopment
  • #ModernUI
  • #FastPrototyping
  • #DashboardDesign
  • #FrontendTools
  • #ReactJS
  • #ColorfulUI

‍ این پروژه یک کتابخانه ابزاری از هوک‌های سفارشی برای React است که توسعه‌دهندگان را در ساخت کامپوننت‌های تعاملی و پویا کمک می‌کند. کاربرد: این مجموعه هوک‌های آماده را برای مدیریت state، اثرات جانبی، تعامل با مرورگر، فرم‌ها، و داده‌های واکنش‌گرا فراهم می‌کند تا نیاز به نوشتن مجدد کدهای تکراری را کاهش ...

  • #ReactHooks
  • #CustomHooks
  • #ReactUtils
  • #WebDevelopment
  • #Frontend
  • #JavaScript
  • #ReactJS
  • #DeveloperTools

کاربرد: این کتابخانه رسمی ارتباط React و Redux است و به توسعه‌دهندگان اجازه می‌دهد تا به راحتی از state مرکزی در اپلیکیشن‌های ری‌اکت استفاده کنند. با استفاده از این کتابخانه، کامپوننت‌های ری‌اکت می‌توانند به Redux store متصل شوند و state را بخوانند یا action ارسال کنند. در چه شرایطی بهتره استفاده بش ...

  • #react
  • #redux
  • #state_management
  • #frontend
  • #web_development
  • #javascript
  • #ui
  • #ux
  • #shopping_cart
  • #dark_mode

این یک پروژهٔ شروع‌کننده (Starter Kit) برای ساخت برنامه‌های مدرن وب با استفاده از تکنولوژی‌های پیشرفته است. کاربرد: این استارتر به تو کمک می‌کنه بدون دردسر تنظیمات اولیه، یک پروژهٔ کامل با React، Redux، TypeScript و Bootstrap راه‌اندازی کنی. ️ در چه شرایطی بهتره استفاده بشه؟ اگر می‌خوای یک پروژهٔ SP ...

  • #react
  • #redux
  • #typescript
  • #webpack
  • #bootstrap
  • #starter
  • #spa
  • #webdev
  • #frontend
  • #styled_components

این کتابخانه ارتباط بین Redux و Firebase رو ساده می‌کنه و امکان استفاده از Firebase به صورت یک state manager در اپلیکیشن‌های React رو فراهم می‌آره. کاربرد: این ابزار به شما کمک می‌کنه تا داده‌های Firebase رو به صورت خودکار در Redux store مدیریت کنید و با استفاده از React Hooks و Higher Order Compone ...

  • #react
  • #redux
  • #firebase
  • #realtime_database
  • #authentication
  • #cloud_firestore
  • #hooks
  • #HOC
  • #state_management
  • #javascript

این پروژه یک ساختار از پیش ساخته‌شده برای توسعه برنامه‌های تحت وب با بک‌اند پایتون/فلسک و فرانت‌اند ری‌اکت/ردکس است. ️ کاربرد: این قالب (boilerplate) به توسعه‌دهندگان کمک می‌کند تا سریع‌تر یک برنامه کامل با احراز هویت JWT، رابط کاربری مدرن با Material UI و مدیریت حالت با Redux راه‌اندازی کنند. در چه ...

  • #React
  • #Redux
  • #Flask
  • #JWT
  • #MaterialUI
  • #FullStack
  • #Python
  • #JavaScript
  • #WebDevelopment
  • #MVP

کاربرد: این مخزن یک مجموعه‌ی دست‌نخورده از لینک‌های آموزشی و منابع مرتبط با React، Redux، ES6 و فناوری‌های مرتبط است که توسط Mark Erikson جمع‌آوری شده. این منابع به توسعه‌دهندگان کمک می‌کنند تا مهارت‌های خود را در زمینه‌های توسعه رابط کاربری مدرن ارتقا دهند. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خ ...

  • #React
  • #Redux
  • #Frontend
  • #JavaScript
  • #ES6
  • #WebDevelopment
  • #ReactJS
  • #ReduxToolkit
  • #LearningResources
  • #DeveloperTools

چه کاربردی داره؟ این راهنما به تو کمک می‌کنه تا با استفاده از TypeScript، برنامه‌های React و Redux رو به صورت کاملاً تایپ‌شده و امن بنویسی. ️ این پروژه بهترین روش‌ها، الگوها و نمونه کدهای عملی رو برای ادغام TypeScript با React و Redux ارائه میده. در چه شرایطی بهتره استفاده بشه؟ اگر داری روی یک پروژه ...

چیه؟ یک کتابخانه سبک و قدرتمند برای دریافت داده‌ها در کامپوننت‌های React به صورت دکلراتیو و قابل ترکیب کاربرد: به تو کمک می‌کنه بدون دردسر مدیریت حالت‌های بارگذاری، خطاها و داده‌ها، به راحتی اطلاعات رو از APIها بخونی در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای منطق دریافت داده رو تمیز و خوانا نگه د ...

  • #data_fetching
  • #React
  • #declarative
  • #composable
  • #API_integration
  • #hooks
  • #frontend
  • #web_dev
  • #Heroku
  • #refetch

چه کاری انجام میده؟ این پلاگین برای وب‌پک طراحی شده تا قابلیت Fast Refresh (که قبلاً با نام Hot Reloading شناخته میشد) رو به کامپوننت‌های React اضافه کنه. این یعنی وقتی توی کد یک کامپوننت React تغییری ایجاد میکنی، بدون اینکه صفحه رفرش بشه، تغییرات به صورت زنده دیده میشن و حالت کامپوننت حفظ میشه. در ...

  • #react
  • #webpack
  • #fast_refresh
  • #hot_reloading
  • #frontend_development
  • #web_dev
  • #developer_tools
  • #ui_development

کاربرد: این ابزار به تو کمک می‌کنه تا رِرِندرهای غیرضروری و آن‌ماونت‌های ناخواسته در کامپوننت‌های React رو شناسایی کنی. ️‍️ با استفاده از این ابزار می‌تونی عملکرد برنامه‌ات رو بهبود بدی و از افت سرعت ناشی از رِرِندرهای اضافی جلوگیری کنی. در چه شرایطی بهتره استفاده بشه؟ وقتی که اپلیکیشن React تو دچار ...

  • #React
  • #Performance
  • #RenderTracker
  • #Debugging
  • #Optimization
  • #ReactComponents
  • #Frontend
  • #WebDev
  • #UseMemo
  • #UseCallback

این کتابخانه یک راه‌حل سبک و انعطاف‌پذیر برای ایجاد پنل‌های قابل تغییر اندازه در رابط‌های مبتنی بر React فراهم می‌کند. کاربرد: با استفاده از این کتابخانه می‌توانی پنل‌هایی بسازی که کاربر بتواند با کشیدن مرز بین آن‌ها، عرض یا ارتفاعشون رو تغییر بده. ️ در چه شرایطی بهتره استفاده بشه؟ وقتی به یک رابط د ...

  • #ResizablePanels
  • #ReactComponents
  • #UIUX
  • #WebDevelopment
  • #Frontend
  • #DragAndResize
  • #ReactLibrary
  • #DeveloperTools
  • #ResponsiveDesign
  • #CustomLayout

کاربرد: این یک کتابخانهٔ ری اکت برای ساخت کاروسل واکنش‌گرا و قابل لمس (سوایپ) است که به راحتی با دستگاه‌های موبایل و دسکتاپ کار می‌کند. در چه شرایطی بهتره استفاده بشه؟ وقتی به یک اسلایدر زیبا و سبک نیاز داری که هم در موبایل با حرکت انگشت (سوایپ) کار کنه و هم در دسکتاپ با کلیک روی فلش‌ها. مناسب برای ...

  • #react
  • #carousel
  • #responsive
  • #swipe
  • #slider
  • #ui
  • #ux
  • #javascript
  • #frontend
  • #react_component

یک نمونه سایت رزومه شخصی با قابلیت شخصی‌سازی بالا که با فناوری‌های مدرن وب ساخته شده است. کاربرد: این پروژه به تو کمک می‌کنه تا یک سایت رزومه حرفه‌ای و واکنش‌گرا ایجاد کنی بدون اینکه نیاز باشه از صفر شروع کنی. از React.js، TypeScript، Next.js و Tailwind CSS استفاده شده که تمامی این‌ها ترکیبی قدرتمند ...

  • #react
  • #nextjs
  • #tailwindcss
  • #typescript
  • #portfolio_website
  • #developer_portfolio
  • #resume_template
  • #web_development
  • #frontend
  • #personal_website

این یک بسته کوچک و جذاب برای افزودن میکرواینتراکشنهای شاد و پویا به برنامه‌های ری‌اکت است تا کاربران را برای انجام کارهای کوچک تشویق کنید و لبخندی بر لب آن‌ها بیاورید کاربرد: این کتابخانه برای ایجاد اثرات بصری لحظه‌ای مثل بارش ایموجی، افکت انفجار رنگی یا نمایش هدیه کوچک پس از یک عمل کاربری (مثل کلیک ...

  • #react
  • #microinteractions
  • #userexperience
  • #uiux
  • #animations
  • #frontend
  • #javascript
  • #webdev
  • #reactlibrary
  • #design

یک کامپوننت قابل کشیدن و تغییر اندازه برای React که به راحتی می‌تونی توی پروژه‌های خودت ادغام کنی کاربرد: این کتابخونه زمانی می‌تونه خیلی مفید باشه که نیاز داشته باشی کاربر رو بتونه یه عنصر رو جابجا کنه یا اندازه‌ش رو تغییر بده، مثل یه پنل قابل تنظیم یا یه ویجت شخصی‌سازی‌شده ️ در چه شرایطی بهتره است ...

  • #react
  • #draggable
  • #resizable
  • #ui_components
  • #web_development
  • #dashboard
  • #frontend
  • #javascript
  • #custom_layout
  • #widget_manager

این ابزار توسعه‌دهندگان را در دیباگ کردن برنامه‌های React Router یاری می‌دهد و به راحتی می‌توان خطاها را شناسایی کرد. با استفاده از این دوتوولز، خطاهای hydration به سرعت پیدا می‌شوند و ردیابی شبکه (network tracing) هم آسان می‌شود. کاربرد: این ابزار برای دیباگ کردن روتینگ در برنامه‌های React طراحی شد ...

  • #ReactRouter
  • #DevTools
  • #Debugging
  • #HydrationError
  • #NetworkTracing
  • #FrontendDev
  • #ReactJS
  • #WebDevelopment
  • #DeveloperTools
  • #ReactDebugging

کاربرد: این تمپلیت یک ساختار آماده برای ساخت وبسایت‌های SaaS یا پنل‌های مدیریتی با استفاده از React و MaterialUI فراهم می‌کنه. شامل صفحات پیش‌ساخته، کامپوننت‌های قابل استفاده مجدد و سیستم روتینگ منظم است که توسعه رو سریع‌تر می‌کنه. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای یک پروژه SaaS یا داشبور ...

  • #React
  • #SaaS
  • #MaterialUI
  • #AdminDashboard
  • #WebTemplate
  • #Frontend
  • #Dashboard
  • #MUI
  • #DeveloperTools
  • #ReactTemplate

کاربرد: این ابزار به تو کمک می‌کنه تا مشکلات عملکردی در اپلیکیشن‌های React رو شناسایی کنی و رندرهای کند رو از بین ببری با استفاده از reactscan می‌تونی بفهمی کدوم کامپوننت‌ها دارن اجرا می‌شن بدون اینکه نیاز باشه، یا کجاها داری rerenderهای غیرضروری داری. در چه شرایطی بهتره استفاده بشه؟ وقتی اپلیکیشن R ...

  • #React
  • #Performance
  • #Debugging
  • #WebDev
  • #Optimization
  • #Frontend
  • #ReactScan
  • #UseMemo
  • #UseCallback
  • #RenderIssues

کاربرد: این کتابخانه به کمک هوک‌ها و کامپوننت‌های ری‌اکت، امکان ایجاد افکت‌های پارالکس در هنگام اسکرول رو فراهم می‌کنه می‌تونی باهاش برای بنرها، تصاویر یا هر المان دیگه‌ای در صفحه، حرکت‌های نرم و جذاب رو تعریف کنی. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای طراحی توسعه‌یافته و پویا داشته باشی، مثل ...

  • #react
  • #parallax
  • #scrollEffects
  • #webDesign
  • #animation
  • #landingPage
  • #UIUX
  • #frontend
  • #creativeDesign
  • #hooks

این پروژه چیه؟ یک فریم‌ورک ری‌اکت برای سرورساید رندرینگ که باعث میشه صفحات وب بسیار سریع لود بشن و ناوبری بین صفحات بدون delay و روان انجام بشه. کاربرد: برای ساخت اپلیکیشن‌های ری‌اکت با عملکرد بالا، بهینه‌سازی SEO و تجربه کاربری بهتر در لود اولیه صفحه. در چه شرایطی بهتره استفاده بشه؟ وقتی به دنبال ک ...

  • #react
  • #server_side_rendering
  • #performance
  • #SEO
  • #web_development
  • #fast_loading
  • #javascript
  • #scalable_apps

این کتابخانه، دکمه‌های اشتراک‌گذاری در شبکه‌های اجتماعی و نمایش تعداد اشتراک‌ها را برای برنامه‌های React فراهم می‌کند. کاربرد: با استفاده از این کتابخانه می‌تونی به راحتی دکمه‌های اشتراک‌گذاری در شبکه‌هایی مثل Facebook, Twitter, LinkedIn, WhatsApp و بیشترشون رو به وبسایتت اضافه کنی، بدون نیاز به اسک ...

  • #react
  • #social_share
  • #web_development
  • #ui_components
  • #javascript
  • #frontend
  • #share_buttons
  • #react_components
  • #seo
  • #user_engagement

کاربرد: این پروژه یک سبد خرید ساده برای فروشگاه‌های آنلاین است که با React و TypeScript ساخته شده. قابلیت‌های اصلی شامل افزودن محصول به سبد، حذف آیتم، به‌روزرسانی تعداد و مشاهده مجموع قیمت است. در چه شرایطی بهتره استفاده بشه؟ اگر دنبال یک نمونه سبک و تمیز برای شروع یک پروژه فروشگاهی هستی، این گزینه ...

  • #react
  • #typescript
  • #shopping_cart
  • #ecommerce
  • #frontend
  • #web_development
  • #react_hooks
  • #type_safe
  • #ui_ux
  • #javascript

کاربرد: این ابزار یک ابزار بصری‌سازی برای کامپوننت‌های React است که به تو کمک می‌کنه ساختار درخت کامپوننت‌ها، شامل Fiber، Router نسخه ۴ و Redux رو به صورت گرافیکی ببینی. در چه شرایطی بهتره استفاده بشه؟ وقتی داری روی یک پروژه React بزرگ کار می‌کنی و نیاز داری ساختار کامپوننت‌ها، ارتباطات و وضعیت Redu ...

  • #ReactDevTools
  • #ComponentTree
  • #ReduxDebugging
  • #ReactFiber
  • #VisualDebugging
  • #ReactRouter
  • #FrontendDev
  • #ReactSight
  • #DebuggingTool
  • #ReactVisualization

این یک کتابخانه سبک و سریع برای افزودن طرح شبکه‌ای (Grid Layout) به برنامه‌های React است با استفاده از این کامپوننت، دیگر نیازی به نوشتن کدهای زیاد CSS برای چیدمان فلکسیبل نیست کاربرد: این پروژه به تو کمک می‌کنه تا به راحتی و با حداقل کد، یک سیستم شبکه‌ای انعطاف‌پذیر در اپلیکیشن React خود پیاده‌سازی ...

  • #React
  • #Flexbox
  • #GridLayout
  • #ResponsiveDesign
  • #WebDev
  • #UIComponents
  • #Frontend
  • #ReactComponents
  • #DeveloperTools

کاربرد: این کتابخانه به تو اجازه میده تا با استفاده از React، SVG و d3geo، نقشه‌های زیبا و تعاملی بسازی. از TopoJSON پشتیبانی می‌کنه و با یک API توصیفی (Declarative) کار می‌کنه که استفاده ازش رو ساده و لذت‌بخش می‌کنه در چه شرایطی بهتره استفاده بشه؟ وقتی به دنبال نمایش داده‌های جغرافیایی در یک اپلیکی ...

  • #react
  • #svg
  • #maps
  • #data_visualization
  • #topojson
  • #d3geo
  • #geospatial
  • #web_development
  • #interactive_maps
  • #frontend

این پروژه یک قالب فول‌استک است که ترکیبی از React در فرانت‌اند و Django به عنوان بک‌اند و API است. بر پایه تم Soft Dashboard طراحی شده و برای توسعه سریع اپلیکیشن‌های مدیریتی و داشبوردهای پویا مناسب است. کاربرد: این استک برای ساخت اپلیکیشن‌های مدیریتی، سیستم‌های CRM، داشبوردهای آنالیز داده و پروژه‌ها ...

  • #fullstack
  • #react
  • #django
  • #dashboard_template
  • #web_app
  • #jwt_auth
  • #startup_MVP
  • #admin_panel
  • #app_generator
  • #modern_ui

این یک کتابخانهٔ ری‌اکت است که با استفاده از کامپوننت‌های مرتبه بالاتر (HOC)، لیست‌های معمولی را به لیست‌های قابل مرتب‌سازی تبدیل می‌کند. کاربرد: این کتابخانه به شما اجازه می‌دهد تا به راحتی لیست‌های قابل کشیدن و رها کردن (draganddrop) بسازید که هم برای دستگاه‌های لمسی مناسب است، هم انیمیشن‌های نرم ...

  • #react
  • #drag_and_drop
  • #sortable_list
  • #HOC
  • #accessibility
  • #touch_friendly
  • #UI_components
  • #animation
  • #web_development
  • #javascript

کاربرد: این کتابخانه امکان کشیدن و رها کردن (Drag and Drop) المان‌ها در کامپوننت‌های React رو فراهم می‌کنه و با ادغام SortableJS، مدیریت آسان‌تری برای لیست‌های قابل مرتب‌سازی ارائه می‌ده. در چه شرایطی بهتره استفاده بشه؟ وقتی نیاز داری لیستی از آیتم‌ها رو به صورت تعاملی و با قابلیت کشیدن و رها کردن د ...

  • #drag_and_drop
  • #react
  • #sortable
  • #ui_components
  • #web_development
  • #javascript
  • #frontend
  • #interactive_ui
  • #task_manager
  • #component_library

این یک ساختار کامل بر پایه React برای ساخت برنامه‌های تک‌صفحه‌ای (SPA) است که ترکیبی از فناوری‌های مدرن جلوی سایت را در خود جای داده است. کاربرد: این پروژه به تو کمک می‌کنه تا یک SPA حرفه‌ای با استفاده از React و اکوسیستم اطرافش بسازی. شامل مدیریت حالت، مسیریابی، و ابزارهای توسعه‌ای مثل Webpack و Ba ...

  • #React
  • #SPA
  • #Frontend
  • #Webpack
  • #Babel
  • #JavaScript
  • #WebDev
  • #SinglePageApp
  • #ReactRouter
  • #StateManagement

این یک کتابخانه ری اکت است که به شما امکان می‌دهد صفحه یا یک کانتینر را به بخش‌های قابل تغییر اندازه، قابل اسکرول و قابل نشانه‌گذاری تقسیم کنید. کاربرد: وقتی می‌خوای یک رابط کاربری پویا بسازی که کاربر بتونه بخش‌های مختلف صفحه رو جابجا کنه، اندازه‌شون رو تغییر بده یا بینشون اسکرول کنه، این کتابخانه خ ...

  • #react
  • #ui_components
  • #responsive_layout
  • #resizable_panels
  • #split_view
  • #dashboard_ui
  • #web_development
  • #javascript
  • #front_end
  • #layout_manager

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

  • #ReactSpectrum
  • #UIComponents
  • #Accessibility
  • #ResponsiveDesign
  • #Adobe
  • #WebDevelopment
  • #DesignSystem
  • #React
  • #UX
  • #CrossPlatform

کاربرد: این کتابخانه به شما امکان میده تا تشخیص گفتار رو به راحتی در برنامه‌های React پیاده‌سازی کنید. با استفاده از Web Speech API، کاربران می‌تونن با صدای خود با اپلیکیشن تعامل داشته باشن. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای یک رابط کاربری دسترس‌پذیر (accessible) بسازی، یا نیاز داری کاربر ...

  • #speech_recognition
  • #react
  • #web_accessibility
  • #voice_control
  • #voice_commands
  • #user_experience
  • #web_api
  • #frontend
  • #javascript
  • #voice_ui

کاربرد: این کتابخانه شامل مجموعه‌ای از کامپوننت‌های لودینگ اسپینر برای استفاده در پروژه‌های React هست که به توسعه‌دهندگان کمک می‌کنه تا انیمیشن‌های بارگذاری زیبا و حرفه‌ای رو به راحتی در برنامه‌های خود پیاده‌سازی کنند. در چه شرایطی بهتره استفاده بشه؟ وقتی که نیاز داری یک وضعیت بارگذاری رو به کاربر ن ...

  • #react
  • #loading_spinner
  • #ui_components
  • #web_development
  • #javascript
  • #frontend
  • #npm_package
  • #user_experience

این یک کامپوننت ری‌اکت است که به شما امکان می‌دهد یک صفحه یا پنل را به دو بخش عمودی یا افقی تقسیم کنید که کاربر بتواند با کشیدن خط تقسیم، اندازه هر بخش را تغییر دهد. کاربرد: این کامپوننت برای رابط‌های کاربری دو پنلی مثل ویرایشگرهای کد، نمایش کنار به کنار محتوا و پیش‌نمایش، یا هر جایی که نیاز به تقسی ...

  • #React
  • #SplitPane
  • #UIComponents
  • #ResponsiveDesign
  • #DeveloperTools
  • #WebDevelopment
  • #DragAndResize
  • #Layout
  • #Frontend
  • #ReactComponents

کاربرد: این کتابخانه یک ابزار انیمیشن‌دهی برای React است که بر پایه فیزیک فنر (spring physics) کار می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا انیمیشن‌های روان و طبیعی ایجاد کنند. در چه شرایطی بهتره استفاده بشه؟ وقتی به دنبال انیمیشن‌های پویا و واکنش‌گرا هستی، مخصوصاً در UIهای پیچیده که نیاز به حرکت‌ه ...

  • #react
  • #animation
  • #spring_physics
  • #ui_ux
  • #frontend
  • #web_development
  • #interactive_design
  • #motion_design
  • #javascript
  • #frontend_development

کاربرد: این کتابخانه یک کامپوننت صفحه‌کش پایینی (Bottom Sheet) برای برنامه‌های ری‌اکت فراهم می‌کند که با استفاده از reactspring انیمیشن‌های نرم و روان ایجاد می‌کند. همچنین طراحی آن کاملاً قابل دسترس (Accessible) است و تجربه کاربری لذت‌بخشی را ارائه می‌دهد. در چه شرایطی بهتره استفاده بشه؟ وقتی به دنب ...

  • #react
  • #bottomsheet
  • #accessibility
  • #animations
  • #uisdk
  • #webaccessibility
  • #smoothui
  • #frontend
  • #reactcomponents
  • #userexperience

یک رندرر ری‌اکت برای چیپ OLED با مدل SSD1306 روی رزبری پای است کاربرد: این پروژه به شما اجازه می‌دهید از React برای ساخت رابط‌های کاربری ساده روی نمایشگرهای کوچک OLED استفاده کنید. با استفاده از این کتابخانه، می‌توانید المان‌های ری‌اکت مثل div، text و حتی component بنویسید و خروجی آن را روی یک صفحه‌ ...

یک پروژهٔ شروع‌کنندهٔ قدرتمند برای ساخت اپلیکیشن‌های React با قابلیت Server Side Rendering (SSR) است. این تنظیمات از جدیدترین ابزارها مانند Webpack 4، Babel 7 و TypeScript پشتیبانی می‌کند و با قابلیت‌هایی مثل CSS Modules و i18n (بین‌المللی‌سازی)، توسعهٔ اپلیکیشن‌های حرفه‌ای را آسان می‌کند. کاربرد: ا ...

  • #React
  • #SSR
  • #TypeScript
  • #Webpack
  • #Babel
  • #CSSModules
  • #i18n
  • #StarterKit
  • #WebDevelopment
  • #Frontend

چه چیزیه؟ یک کیت شروع‌کننده مدرن برای React که با ابزارهای پیشرفته مثل Bun، TypeScript، Tailwind CSS، tRPC و Cloudflare Workers کار می‌کنه. این پروژه یک مونوریپو (monorepo) آماده برای تولیده و برای ساخت برنامه‌های تحت‌وب سریع طراحی شده. کاربرد: این کیت به تو کمک می‌کنه تا بدون دردسر تنظیمات اولیه، ش ...

  • #ReactStarterKit
  • #TypeScript
  • #TailwindCSS
  • #tRPC
  • #Bun
  • #CloudflareWorkers
  • #Monorepo
  • #WebDev
  • #FastWebApps
  • #ModernStack

فروشگاهی سریع، آفلاین و مدرن برای تجارت الکترونیک با قابلیت دسترسی همیشگی کاربرد: این پروژه یک PWA (اپلیکیشن وب پیشرونده) مبتنی بر React برای فروشگاه‌های اینترنتیه که عملکردی شبیه اپلیکیشن موبایل داره. با پشتیبانی کامل از حالت آفلاین، کاربران حتی بدون اینترنت هم می‌تونن از فروشگاه دیدن کنن و خرید رو ...

  • #eCommerce
  • #PWA
  • #React
  • #HeadlessCommerce
  • #OfflineFirst
  • #Magento2
  • #OpenSource
  • #WebPerformance
  • #ProgressiveWebApp
  • #Storefront

کاربرد: این کتابخانه مجموعه‌ای از کامپوننت‌های ساده و قابل استفاده از Bootstrap 5 روی پلتفرم React ارائه می‌ده، تا توسعه‌دهندگان بتوانند به راحتی رابط‌های کاربری زیبا و واکنش‌گرا بسازند. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای با استفاده از React و Bootstrap 5 یه پروژه سریع و بدون دردسر راه‌اند ...

  • #React
  • #Bootstrap
  • #UIComponents
  • #Frontend
  • #WebDevelopment
  • #ResponsiveDesign
  • #reactstrap
  • #JavaScript
  • #ReactComponents
  • #WebDesign

این کتابخانه یک جدول سوپر واکنش‌گرا برای ری‌اکت ارائه می‌دهد که داده‌ها را در صفحات کوچک به‌راحتی قابل مشاهده نگه می‌دارد. کاربرد: وقتی با داده‌های جدولی زیاد در صفحه‌های موبایل یا دستگاه‌های کوچک کار می‌کنی، این کتابخانه بهت کمک می‌کنه که اطلاعات به‌صورت خوانا و منظم نمایش داده بشن. در چه شرایطی به ...

  • #responsive_table
  • #react_component
  • #mobile_friendly
  • #data_display
  • #ui_library
  • #web_development
  • #javascript
  • #frontend_tool

این یک راه‌حل سبک و قدرتمند برای مدیریت state در اپلیکیشن‌های React است که توسط تیم Atlassian توسعه داده شده. کاربرد: این کتابخانه به تو اجازه می‌ده تا state رو به صورت مرکزی و قابل اشتراک در کل اپلیکیشن مدیریت کنی، بدون نیاز به کتابخانه‌های سنگین مثل Redux. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خ ...

  • #react
  • #state_management
  • #sweet_state
  • #atlassian
  • #javascript
  • #frontend
  • #web_dev
  • #ui
  • #hooks
  • #context_api

کاربرد: این کامپوننت ری‌اکت، امکان کشویی (Swipe) بین صفحات یا ویوها رو فراهم می‌کنه، مثل تب‌ها یا اسلایدرهای موبایلی. ایده‌آل برای ساخت تجربه‌های کاربری تعاملی و نرم در دستگاه‌های لمسی. در چه شرایطی بهتره استفاده بشه؟ وقتی به دنبال جایگزینی سبک و کارآمد برای کتابخانه‌های سنگین اسلایدر هستی. بهترین ع ...

  • #react
  • #swipeable
  • #mobileUI
  • #PWA
  • #userExperience
  • #touchFriendly
  • #components
  • #frontend
  • #webdev
  • #reactjs

این یک تمپلیت سبک و مینیمال برای شروع پروژه‌های مدرن وب با فناوری‌های محبوب است. کاربرد: این تمپلیت برای توسعه‌دهندگانی مناسب است که می‌خواهند با استفاده از TanStack Start، یک پروژه مدرن، سریع و قابل توسعه بسازند. این پروژه از Better Auth برای احراز هویت، Drizzle ORM برای مدیریت دیتابیس و shadcn/ui ...

  • #react
  • #tanstack
  • #drizzleorm
  • #shadcn
  • #auth
  • #starter_template
  • #webdev
  • #fullstack
  • #typescript
  • #minimal_template