برای اطمینان از استفاده از React، باید پروژه های دنیای واقعی بسازید. اما چه پروژه هایی ارزش ساختن در سال 2024 را دارند؟

من فهرستی از هفت پروژه را جمع آوری کرده ام که فکر می کنم برای تبدیل شدن به یک توسعه دهنده React مطمئن ایده آل هستند، از برنامه های ساده گرفته تا پیچیده. این به شما الهام می‌دهد که چه برنامه‌هایی بسازید.

من همچنین شما را از طریق کل پشته فناوری که برای ساخت هر پروژه استفاده می کنم، و همچنین خلاصه ای از نحوه ساخت هر یک گام به گام راهنمایی خواهم کرد.

بیا شروع کنیم!

🤖 برنامه ChatGPT AI

همانطور که ChatGPT قدرتمندتر می شود، می توانید با استفاده از ChatGPT API برنامه های چشمگیری بسازید.

این یک برنامه شروع عالی است، زیرا برای اکثر برنامه‌ها، تنها کاری که باید انجام دهید این است که متن یا تصویری را به ChatGPT API ارسال کنید، دستورالعمل‌هایی را به آن بدهید و پاسخی برای شما ارسال می‌کند.

می‌توانید از ChatGPT API برای ایجاد یک خلاصه‌کننده متن، یک برنامه ترجمه، برنامه‌ای که توضیح می‌دهد یک قطعه کد چه کاری انجام می‌دهد استفاده کنید. امکانات واقعا بی پایان هستند.

یکی از برنامه‌های ساده هوش مصنوعی مبتنی بر ChatGPT که من ساخته‌ام، «Draw a UI» است، که در آن می‌توانید یک مدل سریع از یک رابط کاربری ترسیم کنید، آن را به ChatGPT ارسال کنید و در واقع HTML ایجاد شده را برای شما بازگرداند. به اسکرین شات شما!

من این برنامه را با استفاده از Next.js و همچنین بسته tldraw npm می‌سازم که به شما امکان می‌دهد در برنامه React خود تصاویر بکشید.

سپس، آن اسکرین شات را به یک کنترلر مسیر Next.js در انتهای پشتی ارسال کنید که از بسته openai npm برای صحبت با ChatGPT استفاده می‌کند و سپس کد HTML را برای شما ارسال می‌کند.

👨‍💻 وب سایت شخصی

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

بیاموزید که چگونه اجزای اصلی را ایجاد کنید، تصاویر را اضافه کنید، به پروفایل های رسانه های اجتماعی خود پیوند دهید و غیره. هنگامی که شروع به ساخت پروژه های بیشتری می کنید، می توانید آنها را در وب سایت خود به نمایش بگذارید.

نکته مهم در مورد یک وب سایت شخصی این است که می توانید آن را تا جایی که می خواهید گسترش دهید. می توانید وبلاگ یکپارچه خود را اضافه کنید، یا می توانید در مورد چیزهایی که یاد گرفته اید یا در حال حاضر روی آنها کار می کنید صحبت کنید.

برای ساختن وب سایت شخصی خود، من استفاده از Next.js را توصیه می کنم زیرا ساخت صفحات جداگانه ای که به صورت ایستا رندر می شوند را بسیار آسان می کند، که برای SEO خوب است.

برای تصاویر، می توانید از کتابخانه یکپارچه next/image استفاده کنید. و برای ایجاد یک وبلاگ، من به شدت توصیه می کنم از بسته ContentLayer استفاده کنید، که می توانید از آن برای نوشتن همه پست های وبلاگ خود به صورت علامت گذاری یا MDX استفاده کنید.

ContentLayer عالی است زیرا نوع محتوای علامت گذاری شده شما را ایمن می کند پس می دانید هر پست وبلاگ شامل چه داده هایی است. این همچنین یک راه عالی برای شروع با TypeScript در React است، اگرچه ممکن است در ابتدا ترسناک به نظر برسد.

💬 اپلیکیشن چت

یک برنامه وب واقعاً پویا یک برنامه چت است، چیزی که احتمالاً هر روز از آن استفاده می کنید. خوب است که برنامه هایی بسازید که با آن ها آشنا هستید، زیرا به شما ایده خوبی از اینکه از چه قسمت هایی تشکیل شده است، می دهد.

یک برنامه چت از نظر اجزای آن ساده است. شما فقط به یک قسمت پیام ها، یک ورودی برای تایپ پیام های جدید و فهرست ی از افراد برای گپ زدن نیاز دارید.

این یک پروژه عالی است زیرا می تواند به همان اندازه که دوست دارید ساده یا پیچیده باشد. برای ساختن چیزی شبیه به این، از Vite برای ایجاد پروژه React و قدرت بخشیدن به بک‌اند با Supabase استفاده می‌کنم.

در اینجا با Supabase به هیچ کد سمت سرور نیاز ندارید، و همچنین به شما قابلیت چت بلادرنگ را کاملا رایگان می دهد. شما می توانید احراز هویت را برای شناسایی کاربران اضافه کنید (با استفاده از Supabase Auth)، و همه کاربران ایجاد شده را در یک نوار کناری قرار دهید تا با آنها چت کنید.

سپس می توانید یک جدول برای پیام ها ایجاد کنید و هر زمان که شخصی در متنی تایپ کرد، آنها را به Supabase ارسال کنید. برای گسترش بیشتر، می‌توانید این امکان را برای آن‌ها فراهم کنید که تصاویر و ویدیو را با Supabase Storage اضافه کنند.

در نهایت، می‌توانید با استفاده از اشتراک‌ها، بسته به کاربری که با آن چت می‌کنید، پیام‌ها را در زمان واقعی نمایش دهید.

💳 اپلیکیشن تجارت الکترونیک

نوع بعدی اپلیکیشنی که در مورد آن صحبت خواهیم کرد، اپلیکیشن تجارت الکترونیک است.

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

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

یک تصویر مرتبط با توضیحات و همچنین دکمه خرید به آنها بدهید. شما حتی نیازی به گفت ن احراز هویت ندارید. برای ساختن این، من از Next.js ادغام شده با Stripe برای رسیدگی به خریدها استفاده می کنم.

اگر یک محصول فیزیکی می فروشید، سیستم موجودی لازم نیست خیلی پیچیده باشد. این می تواند به سادگی داشتن یک عدد در یک پایگاه داده باشد که می تواند هر زمان که سهام اضافه می شود به روز شود و هر زمان که شخصی خرید می کند کاهش یابد.

🛒 بازار آنلاین

بازار آنلاین توسعه اپلیکیشن تجارت الکترونیک است. این کمی پیچیده تر است زیرا شما محصولات بیشتری را اضافه می کنید.

همچنین ممکن است اضافه کردن آپشن های اضافی مانند نظرات، که برای خرید آنلاین ضروری است را در نظر بگیرید.

چالش در این مورد اضافه کردن سبد خرید است. برای ایجاد یک تجربه کاربری خوب در یک وب سایت با محصولات زیاد، می خواهید به مشتریان اجازه دهید چندین محصول را به سبد خرید خود اضافه کنند.

برای گفت ن سبد خرید، از همان پشته قبلی، Next.js و Stripe برای مدیریت و خرید محصولات استفاده می‌کنم. خوشبختانه، یک بسته عالی به نام استفاده-خرید-سبد خرید وجود دارد که کاملاً با پرداخت Stripe ادغام می شود.

می توانید از آن برای ساخت یک سبد خرید کامل با قابلیت گفت ن و حذف اقلام و همچنین پاکسازی سبد خرید از جعبه استفاده کنید.

برای بررسی، می‌توانید یک لایه پایگاه داده مانند Supabase اضافه کنید، یا می‌توانید بررسی‌ها را به یک سرویس شخص ثالث برون سپاری کنید که به شما امکان می‌دهد نظرات را ادغام کنید، مثلاً Trustpilot.

🚚 برنامه SaaS (نرم افزار به عنوان سرویس)

آخرین تحول در انجام فروش آنلاین با React یک برنامه SaaS است.

در این برنامه، معمولاً با پرداخت هزینه اشتراک ماهانه یا سالانه، امکان دسترسی مشتریان به سرویس نرم افزاری خاصی را که ایجاد کرده اید، فراهم می کنید.

می توانید یک برنامه SaaS به عنوان نسخه پولی برنامه ای که قبلاً ساخته اید، مانند برنامه هوش مصنوعی یا برنامه چت، ایجاد کنید.

به طور خلاصه، اگر بتوانید برنامه‌ای بسازید که کاربران برای بهره‌وری بیشتر، سرگرمی یا آموزش به آن‌ها هزینه بپردازند، تنها کاری که برای ساختن یک برنامه SaaS باید انجام دهید این است که برای استفاده از آن هزینه‌ای از آن مشتریان دریافت کنید. .

یک برنامه SaaS می‌تواند کاربران را بر اساس استفاده یا در یک دوره زمانی معین، مانند یک ماه یا یک سال، شارژ کند.

این کار را می توان با کمک Stripe یا یک تاجر رکوردهایی مانند Paddle انجام داد که مالیات را آسان تر می کند. هر دوی آنها می توانند اشتراک ها را اداره کنند.

توصیه می کنم از Stripe Checkout استفاده کنید تا به مشتریان اجازه دهید اشتراک خود را مدیریت کنند و در صورت لزوم آن را لغو کنند.

📱کلون اپلیکیشن دنیای واقعی

در نهایت، جاه‌طلبانه‌ترین پروژه ساختن یک شبیه‌سازی از برنامه‌ای است که واقعاً دوست دارید یا هر روز از آن استفاده می‌کنید.

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

برای مثال، اگر بخواهید چیزی مانند یوتیوب را شبیه سازی کنید، نه تنها رابط کاربری را ایجاد می کنید و آن را شبیه به یوتیوب می کنید، بلکه به عملکردهایی که YouTube دارد، مانند منوها، کشوها و اعلان ها نیز نیاز خواهید داشت. و امکان گفت ن و مشاهده ویدیوها، نظرات، لایک ها و غیره.

اگر بخواهم یک کلون یوتیوب بسازم، از Supabase یا پایگاه داده MySQL مانند PlanetScale به همراه Next.js و احراز هویت با Supabase یا NextAuth استفاده می کنم.

من رابط کاربری را با TailwindCSS و Radix UI می‌سازم. Radix کتابخانه ای است که مؤلفه های ساده (اولیه) را ارائه می دهد که می توانند به راحتی استایل دهی شوند، اما کاملاً کاربردی هستند که باعث صرفه جویی در وقت شما می شود.

برای آپلود ویدیوها و رسانه ها، من از یک پلتفرم اختصاص داده شده برای پخش ویدیوها مانند Mux استفاده می کنم که یک API توسعه دهنده عالی ارائه می دهد.

برای ذخیره تصاویر و سایر رسانه ها و پیوست ها، من از ذخیره سازی Supabase استفاده می کنم.

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

🛠️ آیا می خواهید همه پروژه ها را بسازید؟

می توانید دقیقاً نحوه ساخت هر پروژه را در این فهرست در داخل React Bootcamp کاملاً جدید بیاموزید:

✨ معرفی: React Bootcamp

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

بوت کمپ دارای هر منبعی است تا به شما در موفقیت در React کمک کند:

🎬 200+ ویدیوی عمیق

🕹️ بیش از 100 چالش عملی React

🛠️ 5+ پروژه نمونه کارها چشمگیر

📄 بیش از 10 برگه تقلب ضروری React

🥾 یک بوت کمپ کامل Next.js

🖼️ مجموعه کاملی از ویدیوهای متحرک

روی زیر کلیک کنید تا React Bootcamp را برای خودتان امتحان کنید.

به React Bootcamp کلیک کنید" width="1105" height="394" loading="lazy">

خبرکاو