- To setup the project locally, clone the repo and install the dependencies using the following command :
npm install
#or
yarn install
#or
pnpm install
- To run the development server, run the following command in your terminal :
npm run dev
#or
yarn dev
#or
pnpm run dev
The project should be up and running at : http://localhost:3000
- Do Generative Fill, Image Restore, Object Recolor etc.
- Sign in with Clerk.js using Google, GitHub or Apple.
- User data maintained using Webhooks from Clerk.js and Stripe in MongoDB
- Buy Credits using Stripe to edit more images.
- Creating svg for the app using AI(ChatGPT and DALL•E) and a proper folder structure.
- Creating navbars specific to mobile and desktop views
- Using ShadCn UI library and it's button, alert-dialog and sheet components.
- Caching mongodb connections to optimize the performance as the Next.js app runs at EDGE.
- Creating transaction model to handle transactions, image model for handling image tranformations and user model for user related queries.
- Creating error handlers to handle different type of errors.
- Server actions for handling database queries and form submissions, like user actions.
- Webhooks(using Clerk) to
create/update/delete/read users
from and to our database. - Declaring types in a separate 'types' folder which contains index.d.ts file making the types to be available globally.
- Ngrok and webhook testing on local machine.
- Using the render feature in React hook forms to create custom fields.
- Integrating Cloudinary's image upload widget and setting upload presets on the Cloudinary Website.
- Adding Stripe as a payment gateway and understand how payments work.
- Next.js
- Stripe
- Typescript
- Cloudinary AI
- Clerk.js
- React Hook Form
- Zod