1.Coding Basics-Product Planning and Technology Selection

Before we start actual coding, we need to think about this question: What type of AI product is it?

What type of AI product are you using?

There are two categories suitable for us:

1. Pure tool AI products.
2. Platform AI products.

But it is best to start with tool-based AI products. For example, aibarbie, which I talked about a few days ago, has a Vincentian graph function to solve specific needs + an overall closed loop of product payment. It can be done very quickly and provides more confidence.

So what I think is like this, I will write a rough framework example to explain this set of logic, and everyone only needs to pay attention to the specific demand points.

Demand points refer to: core functional modules that use AI to solve user needs.

Structure of product content

The overall structure is mainly divided into several abstract concepts:

1. Core functional requirements module
2. Tokens module, which is the mechanism used to calculate consumption.
3. User/Authentication.
4. Subscription/Payment.
5. Miscellaneous (Blog, agreement, etc.).

Through these large abstract parts, a most basic AI product can be completed.

Full stack framework selection

The only way to be faster is a full-stack framework.

Then choose to choose only two full-stack frameworks Nuxt and Next according to ecology and activity.

Let’s talk about the core issues and benefits of the two frameworks. I used the two frameworks in deep water.

• Performance: In terms of performance of ssr, Nuxt is not as good as Next. On csr, react cannot have as good performance as vue, but the problem is that a large number of seo and scp and a series of c-end core indicators depend on ssr. And what is the performance difference of csr in modern browser scenarios?
• Ecology: Next is better than Nuxt in terms of ecological performance. Although most libraries of the React series generally have Vue, the deep water area and number of issues of some libraries are not very testable. In addition, most overseas service manufacturers support the React series more than Vue.
• Front-end development ease of use: The front-end development ease of use has always been the strength of the V series, and Next is the most popular one. It handles the boundary issues between server components and client components very well, without any mental burden.
• Back-end development ease of use: But in terms of the server side of the two frameworks, it is obvious that Next's server actions are a cheat-level development experience, Nuxt can perform server-side development but the experience is very poor.

After comprehensive consideration, Next is actually the best overseas AI project framework and the framework with the most overseas projects. Ecology is always the most important part of development.

NextJs App route documentation

When writing such a simple thing, it doesn’t matter which framework you use, as long as it can be completed.

Database and orm selection

There is a lot of comparative information on databases, but we chose Postgre for performance and more modern considerations.

There are three more mainstream types of Orm, Sequelize, TypeORM, Prisma.

But Prisma is suitable under the Next community ecosystem. First of all, the Prisma documentation is complete and easy to read, and secondly, it has strong ecological and community support. And Typeorm is more used in pure back-end scenarios. The last one is Sequelize, its community activity is somewhat worse than the first two.

Database: Postgre

Orm: Prisma

Login

The login required on the Web side only requires Twitter, Google, FaceBook, Email login + an integrated login authentication library or login service provider. To automatically help you handle user id and information, as well as binding relationships.

In theory, you should choose a login service provider, because a complete user service obviously not only includes login, but also logout, user monitoring, anti-brushing, security, disaster recovery, etc., but what is the cost of the service provider?

~is the bill. In my historical experience, I have used service providers such as supabse and firebase. But when the number of users of my project began to increase, the size of my bills also increased proportionally, and it was difficult for me to migrate the data.


Therefore, my choice is mainly based on two points: free and easy to migrate. Just choose an authentication library that can realize the login of most manufacturers and functional closed loop. Functions such as user monitoring, anti-brushing, security, and disaster recovery were not needed in my early days.

When I have a certain amount of income from the project, I can buy good database services from various cloud services to meet the needs of monitoring, backup, and security, which is obviously a better choice. (Instead of me now, I have to keep the login manufacturer's database and then add another database. My development complexity has also increased a lot. Some friends will definitely ask why I don't just use the login manufacturer's database, because its database is not an exclusive thread and cannot be used as an application database. It can only be used as a pure login authentication database.)

Then next-auth is a perfect choice.

Login authentication: next-auth

AI API and AI call library

Regarding the AI API, there is no doubt that Open Router provides more than 200 mainstream models in the market. At its own agent level, the same model can be switched by multiple service providers, and the price will be cheaper.

Coupled with easy payment and few restrictions, this is undoubtedly the best agency.

As for the client calling library, it is vecel's ai library. The name of this library is ai. It also provides sdk support from multiple manufacturers. You can always trust the development strength of vecel, with powerful functions, reasonable design and complete scenarios. 

But if you have to face more complex scenarios in the middle and later stages, you should write sse or webSocket yourself.

AI API: Open Router

AI library: ai(vecel)

Payment channel

PayPal and Stripe are the more mainstream payment methods. The only bad thing is that the API is very complicated, but they have many payment gateway service providers and isolation layer manufacturers, which can simplify calls and callbacks on a large scale to help you handle it.

I recommend a very niche upgrade.chat, which can handle the subscription collection and debit card credit card of Palpal personal account (merchant number is really troublesome). However, we will encounter some troublesome development problems when using it. The most important development problem is that there is no order ID association.

But in any case, it will be a good partner for your initial verification of business projects.

Of course Lemonsqueezy is also a good choice. Domestic users can also apply without company qualifications, but the only problem is that its rates are too high. Here is an article about its access and use.

Payment Integrator: upgrade.chat

Payment methods: PayPal, Stripe, Lemonsqueezy

UI libraries and CSS

You can use whatever ui library you like. radix/ui and chakra are my favorites. For simple projects I like radix/ui.

But in fact, radix/ui has some performance issues. The maturity and complexity of chakra components are more suitable for more complex projects.

css is tailwindcss.

UI:radix/ui(shack)

css：tailwindcss

Status Management

No reason is needed. The state library on the market is easy to use at different levels, but the state library and hydration issues need to be handled carefully.

Status management: zustand

Verify

No reason is needed, the market-proven library has powerful hierarchical functions.

Status management: zod

Deployment

Normally there are two options:

1. ServerLess, represented by: Vecel, Cloudflare, S3
2. Instance Docker, represented by: AWS EC2 instance

Obviously, here is the lowest-cost deployment method (Vecel is really expensive). The cheapest is Cloudflare, even though it is the most intrusive to the code (because it requires the use of the entire Cloudflare ecological suite).

Another consideration is that we need to scale up later, and Cloudflare is undoubtedly an artifact for development.

Deployment Ecosystem: Cloudflare

End

In this chapter we mainly explain some ideas for project selection and product construction in the early stages, and in the next chapter we will start building the project infrastructure and database.

For the library parts introduced in the article, there are some basic parts. Partners need to go to the official website and refer to relevant materials for a superficial understanding in order to better follow the next chapter. The following points are probably understood:

1. What is Next?
2. Conventional routing and rendering method of App routing in Next.
3. Cloudflare.

Because we are not going to talk about the basics of development, if there are related questions, partners are welcome to ask and discuss in the group. If you ask more questions, you will write articles to answer them uniformly. Under the whole topic, there will be no knowledge points that are "obvious" on the official website.

Basic background knowledge is supplemented in:

Drizzle

D1