turbomac

Project details: Nuggets Articles

Technology stack

• Next.js 13
  • Zustand
  • Tailwind CSS
  • Framer-motion
• Nest.js
  • Prisma
  • mysql
• Socket.io
• TurboRepo
• TurboPack
• Netlify

Tool library:

• Daisyui
• @neodrag/react
• ahooks

Project Advantages

• TypeScript Full Stack Development
• Based on the latest technology (Next.js 13, TurboPack, RSC) practice
• TurboRepo manages project structure
• Component development, clear code logic
• The page is simple and elegant
• Rich animation effects

Effect display

• Online experience: TurboMac

TopBar Status Bar:

• Dark/Light mode switching
• Add ContextMenu globally

Open and close the APP:

• The top range of each APP can be dragged and dropped , and double-clicked on the top range to enlarge

Start LaunchedPad:

• It can also be triggered through 4 corners of the hover window

Terminal

• You can jump to file path and open file
• Switch historical command record by up and down keys
• Complete history through the Tab key
• Open or close the APP on the command line

TurboChat

• Instant messaging
• Scrolling load
• File upload
• Transition animation

ChatGPT

• Access to OpenAI API and use ChatGPT online

VSCode

• View source code online with github1s

Project start

Go to the github project address to pull the project source code.

The terminal enters the folder directory and runs npm install or pnpm install

Create .env files in the client and server folders respectively

client/.env

 NEXT_PUBLIC_OPENAI_API_KEY= 你自己的 OpenAI Key
NEXT_PUBLIC_NODE_ENV= dev

# 部署到服务器相关
# NEXT_PUBLIC_HOST = 例如https://175.24.18:8080/
# NEXT_PUBLIC_WEBSOCKET = 例如https://175.24.18:81/

server/.env

 # 部署上线 mysql
# DATABASE_URL= "mysql://ljq:[email protected]:3306/my_mac"
# 本地mysql 将自己的 usernamepassworddatabase名字换入
DATABASE_URL= "mysql://username:password@localhost:3306/database"
# 下面为腾讯云 ID 和 KEY 填入自己的信息
TX_SECRET_ID = 'AKID8J....'
TX_SECRET_KEY = 'vaz81....'
# COS 存储桶
TX_BUCKET = 'turbomac-13093...'
TX_REGION = 'ap-shanghai'

cd enters the server folder, executes npx prisma migrate dev --name init to initialize the database, and executes prisma generate to use prisma client.

There are two ways to run client and server:

• (Recommended) Enter the client and server folders to run npm run dev or pnpm run dev respectively
• Run turbo dev directly in the root directory

After running, the server will be on port 8080 and the client will be on port 3000. Open localhost:3000 and you will see the page. Registered user: Go to postman/apifox and other interface request tools, register user interface: http://localhost:8080/register

Log in to TurboChat

How to add other apps