Next.js (T3 Stack) Website Development

[z327774948]

Development Concept

https://basketball-bros.net is a basketball game website that I developed. Of course, I didn't develop the game itself; I was responsible for developing the website. This approach is similar to applying AI models, where you don't directly develop an LLM but use a third-party LLM to provide services to users.

Game Play

"Baskeball Bros" can be played in single-player or two-player mode. You can choose to play against the computer or challenge a friend to see who can dunk on the opponent's hoop. The player who dunks wins.

This gameplay is reminiscent of the modes found in the old 4399 online games.

Detailed Operation Guide

Single Player Mode

You can participate in tournaments around the world to win trophies or choose to compete against stronger opponents to improve your skills and gain experience.

Two Player Mode

Player 1:

• Use W, A, S, D keys to move on the court
• Press W to jump
• Press W again to shoot and score spectacularly

Player 2:

• Use the arrow keys to move
• Press the up arrow to jump
• Press L to shoot

Game Tips

• Shooting from outside the circle earns extra points
• Performing a mid-air flip while shooting grants stylish scores
• You can steal the ball by knocking down your opponent
• The speaker icon in the upper right corner allows you to customize game sounds
• Participate in tournament mode to compete with other players

Game Rules

Score as many points as possible before time runs out. Pay attention to defending against your opponent's steals and accumulate points. The side with the highest score wins.

Website Development Experience

Technical Aspects

I used the T3 Stack (Next.js app 15) to build the frontend, utilizing next-intl for multilingual support. My feeling is that this is an infrastructure framework, where the upper-level interface and APIs require custom development. Developing from scratch (0 to 1) can be quite challenging. However, if you can establish a set of business templates to adapt to common business needs, the development speed can be significantly increased.

Development Challenges

The biggest issue I faced while developing https://basketball-bros.net was the JSON translation problem. Whether using deepseek or claude-3.5-sonnet, long token inputs often lead to model attention issues, which is a common problem with language models. Therefore, my solution was to manually segment the JSON and send it to the LLM piece by piece. Here’s my prompt:

This is not a complete English JSON; I need you to:
Translate it into zh-CN
Do not translate the JSON keys
Maintain the structure of the translated JSON to be consistent with the original, even if the JSON is incomplete

I found that if you throw a long JSON directly at the AI for translation, the AI's segmentation behavior is not what I wanted.

Of course, the best way for AI to handle JSON is still function_calling, but writing function_calling is cumbersome, and I haven't checked if claude-3.5-sonnet supports it.

Shift in Thinking

From being a programmer to creating websites and products, I realized my biggest shift is weighing ROI (i.e., the time cost of developing a website versus the traffic & revenue output ratio). If developing a simple website, it’s often best not to develop it at all, and just modify a template to get it online.

In website creation and requirement analysis, the focus should not be on development but on thinking from the user's perspective about what features will meet their needs. Sometimes, I feel that development can be a burden.

Programmers often have a common issue: they create features/products they think are cool, taking a month or more, but when launched, they sink without a trace, receiving little to no attention.

Therefore, I believe the thought process for developing products should be: what do users need => features => define the product MVP path => launch quickly, gather feedback => if feedback is good, continue iteration; otherwise, abandon the product.

Conclusion

In summary, a good product should involve researching user needs and quickly launching via an MVP path. Ideally, avoid development or minimize the proportion of development time (for programmers).

Lastly, a little advertisement: the Basketball Bros game website https://basketball-bros.net welcomes everyone to play. Tomorrow, I will integrate GitHub comments for more interactivity, breaking boundaries so users won't feel lonely.