- Similar editor for inspiration:
- https://github.com/ikuaitu/vue-fabric-editor built on vue
npx create-next-app@latest- install libraries
shadcn/ui
- to run:
npm run dev
- https://nextjs.org/docs/getting-started/project-structure
- avoid middleware.ts if possible because it runs only on edge but we want to be able to deploy our app to any server
- Route Groups:
- Private folders:
- http://fabricjs.com/
- https://github.com/fabricjs/fabric.js
- http://fabricjs.com/docs/
- https://github.com/Automattic/node-canvas#compiling
- Create Editor page, component and useEditor.ts hook
- why we use canvasContainerRef
- Canvas resizing is difficult hence we are using a div as canvasContainerRef and we will use a resize observer to see if canvasContainerRef is resized and use the width and height from there to set width and height of canvas
npm install [email protected] --saveandnpm install -D @types/[email protected]- the browser version is important because it is the only version that will not use node-canvas as dependency
- 🚨 TODO: Fix the canvas flickering issue on resizing
- add components: Navbar, Sidebar, Toolbar, and Footer
- 🚨 TODO: Fix the color picker related warnings in console
- https://hono.dev/docs/getting-started/basic
- NextJS: https://hono.dev/docs/getting-started/vercel
- Does not use file and folder structure like NextJS
- hence more scalable than NextJS
- It's fast
- It integrates well with NextJS
- Runs on several runtime environments
- we will learn more about RPC routes
- https://hono.dev/docs/api/routing
- https://hono.dev/docs/guides/best-practices
- https://hono.dev/docs/guides/best-practices#building-a-larger-application
- https://hono.dev/docs/guides/validation
- hono has thin minimial validation. so use a third party library for validation like zod
- https://hono.dev/docs/guides/rpc
- don't forget to chain your rpc routes
- also declare them in a separate variable as
const route =...
- https://hono.dev/docs/guides/rpc#client
- React Query setup with Nextjs
- create unsplash dev account for third party images
- https://replicate.com/docs/
- Some popular text to image models: flux.1, sdxl etc
bytedance / sdxl-lightning-4stepis more better than the base stable diffusion model- https://huggingface.co/black-forest-labs/FLUX.1-dev
-
Note: NextAuth v4 is now called as Auth.js which is v5 so make sure you are on the correct website
-
https://authjs.dev/ ✅ v5 - we will be using this
-
- Setup:
- Installation: https://authjs.dev/getting-started/installation?framework=Next.js
- Do the setup and test by visiting the url: http://localhost:3000/api/auth/providers to see if providers is empty and working fine
-
- Authentication:
- OAuth with Github
- Test: http://localhost:3000/api/auth/providers and http://localhost:3000/api/auth/signin and http://localhost:3000/api/auth/signout
- https://neon.tech/
- Drizzle orm setup
- https://authjs.dev/getting-started/adapters/drizzle
- https://authjs.dev/getting-started/adapters/drizzle#schemas
- build login, logout(temporary) and register pages
- google oauth:
- https://console.cloud.google.com/
- create a project -> apis and services -> oauth consent screen -> Choose External --> Click Create -> Save
- Credentials --> OAuth Client ID --> Web Application --> Name: CanvasPro --> Authorized redirect URIs: http://localhost:3000/api/auth/callback/google
-
https://authjs.dev/getting-started/authentication/credentials
-
For google and github we have used db session strategy but for credentials we will use jwt strategy
-
db session strategy will create sessions with user id while jwt strategy sessions will not have an id. In order to add id follow this: https://authjs.dev/guides/extending-the-session
-
make sure to add password to the user schema so that it is saved in db.
-
npm run db:generate -
npm run db:migrate -
npm run db:studio -
Note: Better to avoid credentials provider and stick to OAuth providers, magic link etc. And if that's the case, then we can use the db session strategy for all providers and get rid of jwt strategy
- create a test.ts route to make it protected route
- https://hono.dev/docs/middleware/third-party
- https://github.com/honojs/middleware/tree/main/packages/auth-js
npm i @hono/auth-js @auth/core
- https://authjs.dev/getting-started/session-management/login?framework=sveltekit#client-side
- Get Session
- primary, secondary sidebars and main content area
- Create Schema for Projects
- https://orm.drizzle.team/docs/rqb#foreign-keys
- explains why relations and foreign keys are used in drizzle
- generate and apply migration
- https://orm.drizzle.team/docs/rqb#foreign-keys
- Create an API for project creation
- patch method
54. Recent Designs or Projects, Infinite Scroll with useInfiniteQuery, open in new tab, copy and delete design
- TODO: 🚨 Bug: Generate AI image and ai bg remover is not working
- Important: zustand is a client side state management library and if the component controlled by zustand are rendered on server side then it will cause some hydration issues. So make sure to use zustand only on client side. Also note that "use client" will not make sure that the component is not rendered on server side
-
Stripe - create account --> create business ---> Get api key ---> Create product ---> ex: monthly subscription with recurring billing --> after creating product get into pricing section and find pricing id.
-
stripe listen --forward-to localhost:3000/api/subscriptions/webhook- pls do not close this for the testing purpose -
stripe trigger payment_intent.succeeded -
test card: 4242 4242 4242 4242
-
Make customer portal for test active: https://dashboard.stripe.com/test/settings/billing/portal
-
Create a webhook endpoint for prod
-
Note: We are not using Image tag from next js beause I am currently using the free tier which has limit on the image optimization. If you have a paid plan then you can use the Image tag from next js which is recommended