From 41ca105abb234b6d0a0911b9d5cba26cb439591e Mon Sep 17 00:00:00 2001 From: jiayuqi7813 <1783671926@qq.com> Date: Tue, 24 Dec 2024 17:06:09 +0800 Subject: [PATCH] update readme --- README-CN.md | 40 ++++++++++++++++++++++++++++++++++++++++ README.md | 48 +++++++++++++++++++++++++++--------------------- 2 files changed, 67 insertions(+), 21 deletions(-) create mode 100644 README-CN.md diff --git a/README-CN.md b/README-CN.md new file mode 100644 index 0000000..193116b --- /dev/null +++ b/README-CN.md @@ -0,0 +1,40 @@ +# co-coding + +## 项目简介 + +Co-Coding 是一个 meme 项目,灵感来源自 https://www.youtube.com/watch?v=ycTOEWqjeHI。你不觉得与你的朋友一起协同来做算法题是件狠酷的事情吗?该项目基于 Next.js 构建,并使用了 Monaco Editor。 + +## 主要特性: +- 算法题版本的双人成行: 通过独特的协作机制,让两人协同完成算法题。 +- 换行即换人: 用户每次按下换行键,编辑权限自动切换到另一位用户,形成交替输入的协作模式。 +- 共同完成: 两人需要通过交替操作共同完成代码逻辑。 +- 实时更新: 通过 WebSockets 实现代码的实时同步,无缝展示对方的输入。 + +## 技术栈 + +- 前端:Next.js, React, TypeScript +- 后端:Node.js, Express +- 实时通信:Socket.IO +- 代码编辑器:Monaco Editor +- 容器化:Docker + +## 快速开始 + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +使用浏览器打开 [http://localhost:3000](http://localhost:3000) 来查看效果 + +## TODO +- [ ] 支持多语言编辑器 +- [ ] 支持更多人协同 +- [ ] leetcode算法题支持 +- [ ] 更多自定义规则 +- [ ] 自定义字符串限制 diff --git a/README.md b/README.md index e215bc4..62082f5 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,24 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Co-Coding -## Getting Started +## Project Introduction -First, run the development server: +Co-Coding is a meme project inspired by [this video](https://www.youtube.com/watch?v=ycTOEWqjeHI). Don't you think collaborating with your friends to solve algorithm problems is incredibly cool? This project is built with [Next.js](https://nextjs.org/) and uses the [Monaco Editor](https://microsoft.github.io/monaco-editor/). + +## Key Features: +- **Two-Person Algorithm Adventure**: A unique collaboration mechanism where two people solve algorithm problems together. +- **Switch on Enter**: When one user presses Enter, editing permissions automatically switch to the other user, creating an alternating input experience. +- **Collaborative Completion**: Both users must work together, taking turns to complete the code logic. +- **Real-Time Updates**: Uses WebSockets for real-time synchronization, seamlessly displaying the other user's input. + +## Tech Stack + +- **Frontend**: Next.js, React, TypeScript +- **Backend**: Node.js, Express +- **Real-Time Communication**: Socket.IO +- **Code Editor**: Monaco Editor +- **Containerization**: Docker + +## Quick Start ```bash npm run dev @@ -14,23 +30,13 @@ pnpm dev bun dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel +Open [http://localhost:3000](http://localhost:3000) in your browser to see the app in action. -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +## TODO +- [ ] Support for multiple languages in the editor +- [ ] Enable collaboration for more users +- [ ] Integration with LeetCode problems +- [ ] More customizable rules +- [ ] Support for custom string constraints -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +---