Dhis AI SaaS App (Next.js + OpenAI + Stripe + AWS) – Cashar Buuxa oo Af-Somali ah

Full Courses11 saac 15 daqiiqo53 cutubAf-Soomaali
Daawo YouTube

Sharaxaad

Koorsadan waa mid ka mid ah kuwa ugu dhaadheer ee kanaalka Dugsiiye la soo galiyay, waxaanan ku dhisayaa AI SaaS app oo dhammaystiran. Waxaa loogu talagalay developer-ka doonaya inuu barto sida loo dhiso application SaaS ah oo lacag laga qaato.

Technology-ga aan isticmaalayo waa Next.js, TypeScript, Tailwind, Shadcn, Prisma iyo MongoDB Atlas, OpenAI Vision API, AWS S3 iyo Stripe. Waxaan ka billaabayaa setup-ka, kadibna login page-ka oo NextAuth iyo Google Auth ku shaqeeya, Google Developer Console-ka, auth options-ka iyo sida roles iyo credits loogu daro session-ka. Dashboard-ka waxaan ka dhisayaa layout, sidebar routes oo admin iyo user u kala duwan, user avatar, log out, navbar iyo mobile menu. Qaybta ugu xiisaha badan waa design page-ka: tldraw ayaan ku xirayaa si user-ku wireframe u xariiqo, kadibna OpenAI Vision API ayaa code ka soo saaraya. Waxaan sharraxayaa sida tokens-ka loo xisaabiyo, sida sawirka AWS S3 loogu upload-gareeyo, presigned URL-ka iyo beddelidda SVG ilaa PNG.

Ugu dambayn waxaan dhisayaa data table, admin dashboard, update credit form, pricing page, payment modal, Stripe Checkout iyo webhooks, iyo isku xirka lacag-bixinta local-ka ah sida EVC Plus, Zaad iyo Sahal oo aan taleefan real ah ku tijaabinayo. Code-ka oo dhan repo furan ayuu ku jiraa.

English summary

An 11-hour 15-minute Somali-language (Af-Soomaali) course from Dugsiiye building a complete AI SaaS application from scratch. The stack is Next.js, TypeScript, Tailwind, Shadcn, Prisma with MongoDB Atlas, NextAuth with Google sign-in, the OpenAI Vision API, AWS S3 and Stripe. Learners build the auth flow with roles and credits, a dashboard with separate admin and user sidebar routes, and a design page wired to tldraw so a user can sketch a wireframe that the Vision API turns into code. It covers OpenAI token accounting, uploading images to S3, presigned URLs, SVG to PNG conversion, code preview with Prism, a paginated data table, an admin credit dashboard, a pricing page, Stripe Checkout and webhooks, and Somali local payments through EVC Plus, Zaad and Sahal. The full source is in a public repo. Free on YouTube.

Waxaad ku baranaysaa

  • Setup-ka Next.js, Tailwind iyo Shadcn
  • Authentication-ka NextAuth iyo Google Auth, iyo ku darista roles iyo credits
  • Prisma ORM iyo isku xirka MongoDB Atlas
  • Ku xiridda tldraw iyo OpenAI Vision API si wireframe code looga dhigo
  • Upload-ka sawirka AWS S3, presigned URL iyo xisaabinta tokens-ka
  • Stripe Checkout, webhooks iyo maamulka credits-ka
  • Ku xiridda EVC Plus, Zaad iyo Sahal ee lacag-bixinta local-ka ah

Cutubyada

  1. 0:00Hordhaca Koorsada Next.js + OpenAI + Stripe + AWS Af Soomaali
  2. 5:00Sida uu u Shaqeeyo SaaS App-ka (Demo) Af Soomaali
  3. 10:00Shuruudaha Koorsada iyo Waxyaalaha Aad u Baahan Tahay Af Soomaali
  4. 15:00Setup-ka Next.js, Tailwind CSS iyo Shadcn Af Soomaali
  5. 23:00Sida Loo Isticmaalo Shadcn Components Af Soomaali
  6. 27:22Dhisidda Login Page-ka iyo Isku-xirka Google Auth Af Soomaali
  7. 37:26Setup-ka NextAuth iyo Google Developer Console Af Soomaali
  8. 45:00Qorista Auth Options iyo Isku-xirka Providers-ka Af Soomaali
  9. 52:15Setup-ka Prisma ORM iyo MongoDB Atlas Af Soomaali
  10. 1:05:00Helitaanka Session-ka ee Client-ka iyo Server-ka Af Soomaali
  11. 1:20:00Modification-ka Auth Options si loo Helo Roles iyo Credits Af Soomaali
  12. 1:32:00Dhisidda Dashboard Layout iyo Sidebar-ka Af Soomaali
  13. 1:45:21Sameynta Dynamic Sidebar Routes ee Admin iyo User Af Soomaali
  14. 2:05:00Dhisidda User Avatar iyo Log Out Functionality Af Soomaali
  15. 2:15:00Dhisidda Navbar-ka iyo Mobile Menu (Sheet Component) Af Soomaali
  16. 2:26:20Dhisidda Design Page-ka iyo Isku-xirka tldraw Library Af Soomaali
  17. 2:41:14Sameynta Generate Button iyo Loading State Af Soomaali
  18. 2:50:00Sida OpenAI Vision API u Xisaabiso Tokens-ka Af Soomaali
  19. 3:00:00Setup-ka AWS S3 Bucket iyo IAM User Permissions Af Soomaali
  20. 3:09:55Qorista API Route-ka ee Design Generation Af Soomaali
  21. 3:20:25Upload-ka Sawirka ee AWS S3 iyo Beddelidda SVG to PNG Af Soomaali
  22. 3:35:00Sameynta Presigned URL iyo Xisaabinta Cabbirka Sawirka Af Soomaali
  23. 3:55:00Qorista Algorithm-ka Xisaabinta Tokens-ka OpenAI Af Soomaali
  24. 4:15:31Isku-xirka GPT-4 Vision API iyo System Prompting Af Soomaali
  25. 4:25:00Isku-xirka Frontend-ka iyo API-ga Design-ka Af Soomaali
  26. 4:36:34Isticmaalka Prisma Studio si loogu Shubo Credits Af Soomaali
  27. 4:40:00Keydinta Code-ka la Generate-gareeyay ee Database-ka Af Soomaali
  28. 5:10:00Dhisidda Preview Model iyo Iframe-ka Code-ka Af Soomaali
  29. 5:26:41Sameynta Tab Buttons (Preview vs Code View) Af Soomaali
  30. 5:36:15Isticmaalka Prism JS si loo Highlight-gareeyo Code-ka Af Soomaali
  31. 5:40:25Sameynta Copy to Clipboard Hook iyo Sonner Toast Af Soomaali
  32. 5:55:25Sida Loo Dejiyo Pricing Strategy-ga SaaS App-ka Af Soomaali
  33. 6:05:00Akhrinta Code-yadii Hore ee Database-ka (Prisma findMany) Af Soomaali
  34. 6:09:30Dhisidda Data Table (Pagination, Sorting, iyo Filtering) Af Soomaali
  35. 6:20:30Sameynta Actions Column (Preview iyo Delete Functionality) Af Soomaali
  36. 6:36:45Sameynta View Code Page adigoo Isticmaalaya React Query Af Soomaali
  37. 6:58:30Dhisidda Admin Dashboard iyo User List Page Af Soomaali
  38. 7:15:55Dhisidda Update Credit Form (Dialog Component) Af Soomaali
  39. 7:25:00Qorista API Route-ka ee Update User Credit Af Soomaali
  40. 7:33:30Isku-xirka Update Mutation iyo Refreshing Data Af Soomaali
  41. 7:43:00Dhisidda Pricing Page iyo Plans Grid Af Soomaali
  42. 8:30:00Styling-ka Pricing Cards iyo Most Popular Badge Af Soomaali
  43. 8:45:30Dhisidda Payment Modal (Local vs Online Payment) Af Soomaali
  44. 8:56:45Sameynta State Management ee Payment Methods Af Soomaali
  45. 9:15:00Dhisidda Phone Number Input ee Local Payments Af Soomaali
  46. 9:20:00Isku-xirka Stripe Checkout Session (API Route) Af Soomaali
  47. 9:41:30Redirecting User-ka ee Stripe Checkout Page Af Soomaali
  48. 9:50:00Sida Webhooks u Shaqeeyaan iyo Setup-ka Stripe CLI Af Soomaali
  49. 10:00:00Qorista Stripe Webhook API Route (Handling Events) Af Soomaali
  50. 10:10:00Isku-xirka EVC Plus, Zaad, iyo Sahal (Local Payments API) Af Soomaali
  51. 10:32:00Testing-ka Local Payments adigoo Isticmaalaya Real Phone Af Soomaali
  52. 10:55:00Handling Errors iyo Succeeded Payments ee Local API Af Soomaali
  53. 11:15:00Gunaanadka Koorsada iyo Talooyin Mustaqbalka ah Af Soomaali

Su'aalo

Maxaan hore u baahanahay?
React iyo JavaScript aasaas ah. Next.js, Prisma iyo Stripe meesha ayaan ka bilaabaynaa.
Code-ka halkee ayaan ka helayaa?
Repo furan ayuu ku jiraa, link-giisana description-ka ayuu ku yaal.
Ma hal mar baan daawadaa?
Maya. Waa 11 saac iyo 15 daqiiqo. Qaybi qaybaha, cashar walbana gacantaada ku qor.

La xiriira

Koorso/course/build-saas-apps-fullstack-somaliKoorso/course/nextjs-app-router-fullstack-somali

Videoyo la mid ah

Baro React.js + Tailwind + Redux — Full React.js Course Af Somali 22+ Hours22 saac 4 daqiiqoDhis Web App Real Ah (PHP + MySQL + AJAX + Bootstrap) – Cashar Buuxa oo Af-Somali ah6 saac 25 daqiiqoBaro React Native Af Soomali | Dhis IOS Iyo Android Apps Adiga Oo Qoraya Single Code Base3 saac 54 daqiiqo