{"id":20865640,"url":"https://github.com/adeelibr/portfolio-saas-chat-app","last_synced_at":"2025-03-12T15:14:53.343Z","repository":{"id":215528161,"uuid":"739160758","full_name":"adeelibr/portfolio-saas-chat-app","owner":"adeelibr","description":"Portfolio SaaS application for multi lingual chat using nextjs, firebase, next-auth, free \u0026 pro tier features along with stripe checkouts/subscriptions","archived":false,"fork":false,"pushed_at":"2024-01-06T21:30:01.000Z","size":1360,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-19T08:26:52.433Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://portfolio-saas-chat-app.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adeelibr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-04T23:06:18.000Z","updated_at":"2024-03-12T01:06:44.000Z","dependencies_parsed_at":"2024-01-05T00:57:11.260Z","dependency_job_id":"9a5d4977-ef6f-4146-927d-d27fad241323","html_url":"https://github.com/adeelibr/portfolio-saas-chat-app","commit_stats":null,"previous_names":["adeelibr/portfolio-saas-chat-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adeelibr%2Fportfolio-saas-chat-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adeelibr%2Fportfolio-saas-chat-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adeelibr%2Fportfolio-saas-chat-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adeelibr%2Fportfolio-saas-chat-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adeelibr","download_url":"https://codeload.github.com/adeelibr/portfolio-saas-chat-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243238974,"owners_count":20259132,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T05:50:17.865Z","updated_at":"2025-03-12T15:14:53.321Z","avatar_url":"https://github.com/adeelibr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n# Portfolio SaaS Chat App\n\nWelcome to the Portfolio SaaS Chat App, a versatile chat application built with cutting-edge technology. Experience the seamless integration of various technologies in one platform. Check it out here: [Portfolio SaaS Chat App](https://portfolio-saas-chat-app.vercel.app/).\n\n## Technologies Used\n\n- [Next.js](https://nextjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Shadcn](https://ui.shadcn.com/)\n- [Zustand](https://github.com/pmndrs/zustand)\n- [NextAuth.js](https://next-auth.js.org/)\n- [Firebase](https://firebase.google.com/)\n  - Extension: [Translate Text in Firebase](#) \u003c!-- Replace # with the link --\u003e\n  - Extension: [Run Payments with Stripe in Firebase](#) \u003c!-- Replace # with the link --\u003e\n- [Stripe](https://stripe.com/)\n- [Zod](https://github.com/colinhacks/zod)\n- [TypeScript](https://www.typescriptlang.org/)\n\n## Features\n\n### Free Tier\n\n- **Google Account Login**: Secure and easy login using your Google account.\n- **Chat Rooms**: Create up to 3 chat rooms.\n- **Message Limit**: Each chat room supports 20 messages.\n- **Room Members**: Include up to 2 members per chat room (including the creator).\n- **Language Translation**: Translate chat messages between 2 languages.\n\n### Paid Tier (5.99 EUR)\n\n- **Unlimited Messages**: No limit on the number of messages in chats.\n- **Unlimited Participants**: Add as many participants as you like in chat rooms.\n- **Unlimited Chat Rooms**: Create as many chat rooms as needed.\n- **Extended Language Support**: Supports up to 10 languages.\n\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\n## Setting Up the Application: A Guide for Personal Reference 😃\n\nThis is a step-by-step guide to setting up a web application using NextJS 13. It includes features like Stripe payments, dark \u0026 light modes, and more like stripe portal links, stripe webhooks, shadcn, tailwind css, firebase v9, firebase rules, next auth with google provider, zod for form authentication, zustand for global state management, dark \u0026 light mode, protected routes, free tier features \u0026 paid tier features\n\n- First we install NextJS 13 via the cli for the project\n- We first create `\u003cHeader /\u003e` component\n- We then install `shadcn-ui` for components\n- Add logo in header, ensure that dark:filter is set for inverse colors in Header component\n- Add `\u003cDarkModeToggle\u003e` and dark mode from `shadcn-ui` follow the docs there in the library (It's all about taking smart decisions, not re-inventing the wheel)\n  - \u003cb\u003eNote to self:\u003c/b\u003e Make smart decisions, get quickly to PMF\n- Add `\u003cUserButton /\u003e` and add `\u003cUserAvatar /\u003e`\n- Add `next-auth` for authentication, follow the documentation for providers \u0026 adapters\n  - create a firebase project for web\n  - in your `auth.ts` file, make sure add adapters, providers, callbacks to access firebase user.id for user authentication\n- Add `middleware.ts` for protected routes with `next-auth`\n- Add `\u003cClientProvider /\u003e` to ensure `session` is available everywhere in your \u003cb\u003eclient side\u003c/b\u003e application \n- Add `NEXTAUTH_URL, NEXTAUTH_SECRET` in your .env file (when deploying on vercel you don't have to pass `NEXTAUTH_URL` it will take care of that on it's own)\n- Note: for any click handlers, the component will always be a \u003cb\u003eclient component by using \"use client\"\u003c/b\u003e\n- Go to google console, select the project\n  - In the google console, add URL to whitelist localhost (\u0026 later your production URL) for authentication\n- Set up `\u003cHome /\u003e` i.e, `app/page.tsx` along with main layout i.e, `app/layout.tsx`\n- Add `\u003cPricing\u003e` i.e, `app/pricing/page.tsx` file\n  - Make a `PricingCard` component, in a way where you can also use this in the `/register` (protected route) page as well\n  - Thing to notice in the `PricingCard` component is that we need to add a stripe product price ID, this is very important because it will tell us the role of the user i.e, `pro` \u0026 etc\n- Add `/register` page\n- Add `\u003cCheckout /\u003e` button component\n  - On button click, it will push a document to the firestore db, stripe extension will then create a checkout session \u0026 redirect the user to checkout page\n- IMPORTANT: Add `firebase.ts` file \n  - Go on firebase console \u0026 generate keys for your web project, from going to the settings page for your XYZ project\n- IMPORTANT: Add `firebase-admin.ts` file\n  - export adminAuth which allows us to authenticate users\n  - export adminDb which allows us to do CRUD operations on database\n  - Go on firebase console \u0026 generate keys for your web project, from going to the `settings page \u003e service accounts` for your XYZ project \u0026 generate key for Node.js project.\n- Add next-auth-d.ts file to override the work you are doing to get firebase user.id in session, so that typescript gives you intellisense\n- Create `\u003cFirebaseAuthProvider /\u003e` to sync user.id for `Authentication` module in firebase console, to authenticate user's browser session with firebase authentication session\n- Add `\u003cFirebaseAuthProvider /\u003e` in `app/layout.tsx` file\n- Go to `\u003cCheckout /\u003e` button component\n  - In firebase console add `stripe` extension, it will ask you for a stripe key\n  - Go to your stripe account \u0026 generate a `restricted key` for your project with \u003cb\u003eright permissions\u003c/b\u003e\n    - Once it starts setting the extension up, it will give you rules that you can simply copy and paste \u0026 add it in your rules config\n  - Come back to the extension setup in firebase and copy secret \u0026 click `create secret` button \u0026 do the same for stripe webhooks secret as well (it requires certain permissions)\n    - For stripe webhooks create the webhook with the right permissions that you are advised by firebase documentation for help (2:46:50 for help in the video)\n- Add the `translate test in firestore` extension while the other stripe extension is being setup\n  - Make sure to set the collection path in our case it was `chats/{chatId}/messages\n- Go to stripe console \u0026 add a product\n  - IMPORTANT: make sure to add `firebaseRole: \"pro\"` in the product metadata\n- Go to `\u003cCheckout /\u003e` button component \u0026 complete checkout flow, you have everything you need for this flow\n- Test the checkout flow \u0026 check DB for confirmation that record is there or not\n- Add `\u003cSubscriptionProvider /\u003e` \u0026 add your `lib/converters/Subscription.ts` \u0026 `types/Subscription.ts`\n  - install `zustand` for subscription state management\n  - create `/store/store.ts` file with your global state\n  - add `\u003cSubscriptionProvider /\u003e` in your main `layout.tsx` file\n- Add `\u003cUpgradeBanner /\u003e`\n- Add `\u003cManageAccountButton /\u003e` in `\u003cCheckoutButton /\u003e`\n  -  Add `actions/generatePortalLink` in `ManageAccountButton`\n- Add a new route `(user)`\n - Add `layout.tsx` for these page under `(user)` directory\n  - Add `/chat` page\n    - create `CreateChatButton`\n      - add rules in firebase for /chats/** rule sets i.e, chats/:chatId, chats/:chatId/members, chats/:chatId/members/:member, chats/:chatId/messages/:messageId\n      - create a new chat, redirect the user to chat\n      - ensure the user is pro or not and handle permissions there accordingly\n    - add a new converter for `ChatMembers` \u0026 add refs\n    - add toast from `shadcn-ui`\n    - create `ChatList`, `ChatListRows`, `ChatListRow`\n    - add `Message` converter\n    - add `useLanguageStore` hook in store.ts\n    - add `\u003cLanguageSelect /\u003e` component in Header\n  - Add `/chat/:chatId` page\n    - Add `ChatInput`\n    - Add `ChatMessages`\n    - Add `ChatMembersBadge`\n    - Add `AdminControls`\n      - Add `InviteUser`\n      - Add `ShareLink`\n      - Add `DeleteChat`\n    - Add `hooks/useIsAdmin.ts`\n- Deploy to `vercel`\n  - Once deployed link made\n  - Go to google console and update the authentication link in `Authorized JavaScript origins` \u0026 `Authorized redirect URLs`\n\n### Note to Self:\n- Make smart, efficient decisions to reach a Product-Market Fit (PMF) quickly.\n- Always test features thoroughly before deployment.\n\nHappy coding! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadeelibr%2Fportfolio-saas-chat-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadeelibr%2Fportfolio-saas-chat-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadeelibr%2Fportfolio-saas-chat-app/lists"}