-
Notifications
You must be signed in to change notification settings - Fork 1
/
steps.txt
171 lines (148 loc) · 8.88 KB
/
steps.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
- Create the Next project (npx create-next-app@latest neurogen-ai --typescript --tailwind --eslint)
Would you like to use `src/` directory? » No
Would you like to use App Router? » Yes
Would you like to customize the default import alias? » No
- Init Shadcn UI into the project (npx shadcn-ui@latest init)
Would you like to use TypeScript? » Yes
Which style would you like to use? » Default
Which color would you like to use as base color? » Slate
Where is your global CSS file? » app/globals.css
Would you like to use CSS variables for colors? » no / yes
Where is your tailwind.config.js located? » tailwind.config.js
Configure the import alias for components: » @/components
Configure the import alias for utils: » @/lib/utils
Are you using React Server Components? » no / yes
Write configuration to components.json. Proceed? » yes
- Stuctured the folder
Created dashboard, landing route in app folder
- Setup a Clerk account and create a new project as "neurogen-ai"
Install Clerk into our App
Add Clerk API key to .env file
import and use ClerkProvider from "@clerk/nextjs"
Create middleware.ts file
Create Auth and Routes folder into app
Create Sign-in and Sign-up pages with the correct folder structure
update the .env file for signin and signup routes
Create a Layout file and Add the sign-in/up form styles in (auth) folder
Successfully work the Clerk Auth
- Create layout.ts in the dashboard folder and Add Sidebar into layout
- Create Navbar page
- Updateing Sidebar and mobile sidebar
- Update the dashboard page [app>(dashboard)>(routes)>dashboard>page.tsx]
- Create conversation UI
Create a Heading component includes interface props
Create a form components that use from Shadcn UI
- Conversation AI API configuration
Generate a OpenAI API and Add to .env
Create API folder path [app>api>conversation>route.ts]
API configuration in route.ts
install axios
make post axios request and get response from OpenAI
design the Loader, User avatar, and Bot avatar components (get the user data from @clerk/nextjs)
- Code Generation UI and API configuration
Copy the structure from coversation as code and modified some changes
Copy the API structure from coversation api as code api
Create a default instruction message, and pass it to OpenAI API through axios
Can able to get the response feom GPT model,
Install react-markdown and format the code as readable snippet using markdown.
- Image Generation UI and API configuration
Copy the structure from coversation as image and modified some changes
change form structure in constants.ts
modify form field elements for taking amounts and resolutions
Copy the API structure from coversation api as image api
modify API requests as for image Generation
Create Image element UI
Solve a error with next.config.js
- Music Generation UI and API configuration
Copy the structure from coversation as music and modified some changes
Copy the API structure from coversation api as music api
Create an account in Replicate AI and install Replicate into our project
modified route.ts page in api (Choose the Model from explore option in Replicate dashboad and select "riffusion" then Follow the API guide)
Design the UI in music/page.tsx
- Video Generation UI and API configuration
Copy the structure from music as video and modified some changes
Copy the API structure from music api as video api
In the api/video/route.ts (Choose the Model from explore option in Replicate dashboad and select "zeroscope-v2-xl" then Follow the API guide)
Design the UI in video/page.tsx
- Use Prisma to limit the user for 5 times (install Prisma)
Init Prisma (npx prisma init)
set-up PlanetScale account and create a database
Click "connect to your database" to connect db on the popup in PlanetScale dashboard (3.06.00)
Rreplace the DATABASE_URL var in .env
Modify schema.prisma file according from the PlanetScale
Install Prisma client (npm i @prisma/client)
Create a new file in lib folder as prismadb.ts, and add PrismaClient configuration
Create UserApiLimit model in schema.prisma
push the prisma db (npx prisma generate & npx prisma db push) --> Every time you have you push and generate when you modified "schema.prisma"
(To run and See the tables - npx prisma studio)
Create a new file in "root" of the application as constants.ts, and add Limitation number variable
Create a new file in "lib" as api-limit.ts
Create functions as increaseApiLimit, and checkApiLimit
Import the lib functions into app (coversation, code, ...) and make the limit as works
- Create another function as getApiLimitCount to show the available free credits
in the dashboad>layout.tsx, Import the count and passed to Sidebar component
In the Sidebar, Modify the interface to accept the apiLimitCount as a props
Add UI for upgrade section
- Premium model UI
install zustand (npm i zustand)
Create a "hooks" folder in the root, and create a new file as "use-premium-model.tsx"
Add the structure of the model into use-premium-model.tsx
Create a model provider to run the model with any hydration errors
Create a PremiumModel component
import the PremiumModel component into app>layout.tsx
use the usePremiumModel into PremiumModel component
Install Dialog from Shadcn and use in Premium Model
Add onClick of upgrade button to show the dialog box
Add the usePremiumModel to all AI models to show upgrade box when crossed the API limits
Add the same functionalities to mobile-Navbar
- Create and Setup an account on Stripe
Get an API key and paste it into .env
install stripe (npm i stripe)
create stripe.ts file in "lib"
update schema.prisma for Stripe
update lib>utils.ts file with absoluteUrl function for NEXT_PUBLIC_APP_URL
Create app>api>stripe>route.ts and import dependancies
do the stripe checkout page in route.ts
Create a webhook for our Stripe (Create a file app>api>webhook>route.ts) and update with that 2 events of subsription
Generate STRIPE_WEBHOOK_SECRET key for Test in local environment and create a valiable in .env file
Connect our "Upgrade" button to show the scripe payment or billing details. (components>premium-model.tsx)
for getting the 401 error with stripe api (Not authenticated), to this have to add clerk middleware for /api/webhook
Create a lib>subscription.ts to check the user subscribed or not. (we also have to check the expired date as well)
Develop the Settings page with manage subscription button and upgrade button
Fixed : Error: 'You can’t create a portal session in test mode until you save your customer portal settings in test mode at https://dashboard.stripe.com/test/settings/billing/portal.',
Provide the premium plan features when user subscribed (Allow unlimited generations)
Add the modifications on free-couter.tsx, sidebar.tsx, (dashboad)>layout.tsx, Navbar.tsx and mobile-sidebar.tsx
Go through the individual route and Fix the generation problem (Allow unlimited generation)
api>conversation>route>route
Copy to other individual routes (code, Image, ....)
- Error Handling toast
install react-hot-toast
create a component as toaster-provider.tsx
Add toaster-provider to app>layout.tsx
Add the toast message to all individual routes (code>page.tsx) and premium-model, subscription-button
- Customer Support with Crisp
Create an account on crisp.chat
Copy "CRISP_WEBSITE_ID" for the react integration. (Can integrate as using <script>, but here we are using another method for React)
install crisp-sdk-web
Create a component as crisp-chat.tsx
Create a component as crisp-provider.tsx
Import CrispProvider to app>layout.tsx
- Landing page design
Create layout.tsx file in (landing)
Create a component as landing-navbar.tsx
Create a component as landing-hero.tsx
install typewriter-effect for auto typing hero text
Create a component as landing-content.tsx
- Redesign the application
- Add "postinstall" into package.json
run 'npm run lint' to check if there any error in our application (make sure to push the code)
Build the application on Vercel
Add endpoint on Stripe dashboad (https://neurogen-ai.vercel.app/api/webhook)
select events: checkout.session.completed, invoice.payment_succeeded
(All the events according to what we are using for our application)
After added the endpoint, Copy the "Signing secret" and page it as evn valiable of "STRIPE_WEBHOOK_SECRET" in Vercel
change the "NEXT_PUBLIC_APP_URL" as https://neurogen-ai.vercel.app
Go to the Deployment and Redeploy the App (Vercel)
To Renew the application, I am gonna reset my database, So
npx prisma migrate reset
npx prisma db push