Building a Complete Frontend and Backend Project with AI

wCloudywHappyw

154

AI Translation中文 → English

This content was translated automatically by AI and may contain inaccuracies

AI·GEN

AI-generated summary

The lab had a requirement to make datasets publicly available for download while also recording information such as how many people downloaded them, which led to this project.

CITE Lab MoCap and Humanoid Group Download Center

Initially, I thought about using FastAPI + SQLite, which I'm more comfortable with. I fed the following prompt directly to AI (Claude 3.7 Sonnet), and the output was quite usable. There were mainly two bugs: one was that SMTP email sending didn't use encryption, and the other was that the version of NJU Box was too old, so I still had to manually find the corresponding Seafile API.

CodeBlock Loading...

However, the interface was mediocre, and many features were not easy to extend. So I thought about refactoring this project using more modern technologies like Next.js. But whether I let AI reference existing code to refactor or started from scratch with prompts, the results were quite poor, even resulting in compilation errors rather than runtime bugs. I also tried several of the latest AI IDEs, but they were unsatisfactory as well.

In the end, I still had to rely on manual work. I spent a day building a framework first, then fed the files from the previous fastapi implementation to AI one by one, asking it to reference and complete the corresponding functionality in the current Next.js project. Then I gradually had it implement small feature improvements one by one, combined with manual bug fixing, and finally achieved the results shown in the two images above.

Current features:

Tech stack: Next.js + TypeScript + Tailwind CSS + Ant Design + Seafile API + MongoDB + Redis
Frontend provides a download interface where users can select files to download (multi-select supported).
Supports downloads only from educational/academic email addresses, and requires proper email verification before downloading.
Provides download terms that must be read before proceeding.
Backend records user download history, including username, filename, download time, and other information, and provides an admin panel for viewing.
Files are stored on Seafile (NJU Box), and this project only generates a temporary link for users to download, avoiding direct exposure of file links and saving server bandwidth.
Parses the readme.md file in Seafile and displays it on the download interface as file documentation.
Supports configuring subpaths for deployment on existing websites.
Supports dark mode.
Uses AI to parse organization names based on email addresses.

@Que: "There's no such thing as a useless AI, only humans who aren't stubborn enough."

The lab had a requirement to make datasets publicly available for download while also recording information such as how many people downloaded them, which led to this project.

CITE Lab MoCap and Humanoid Group Download Center

Please help me build a lab download center webpage using fastapi, JavaScript and other technologies. The webpage should include the following features:
1. The backend uses the seafile API to retrieve files in the repository, and the frontend displays each file in a dropdown menu in the first row for users to select the corresponding file.
2. The second row of the frontend requires users to enter their email address, which must be an educational or academic email. There is a "Send Verification Code" button on the right side of the input field. After the user clicks it, the backend uses an SMTP server to send a verification code to the user's email. Both frontend and backend should validate the email format, and each IP address can only send one email per minute.
3. The third row of the frontend requires users to enter the verification code.
4. The fourth row requires users to enter their school/organization.
5. The fifth row requires users to enter their name.
6. All input fields cannot be empty, and both frontend and backend should validate this to prevent malicious submissions.
7. The last row has a submit button. After clicking, if the backend determines the verification code is correct, it uses the seafile API to generate a shared link for the corresponding file and sends the link to the user's email, while the frontend automatically redirects to that link.
8. At the same time, the backend inserts a record into the sqlite database, including file name, email, school/organization, name, shared link, and submission time.
9. The interface should use English.
10. The page should be as aesthetically pleasing as possible.
11. Finally, write a dockerfile to package the entire project into an image.

CodeBlock Loading...

Current features:

Tech stack: Next.js + TypeScript + Tailwind CSS + Ant Design + Seafile API + MongoDB + Redis
Frontend provides a download interface where users can select files to download (multi-select supported).
Supports downloads only from educational/academic email addresses, and requires proper email verification before downloading.
Provides download terms that must be read before proceeding.
Backend records user download history, including username, filename, download time, and other information, and provides an admin panel for viewing.
Files are stored on Seafile (NJU Box), and this project only generates a temporary link for users to download, avoiding direct exposure of file links and saving server bandwidth.
Parses the readme.md file in Seafile and displays it on the download interface as file documentation.
Supports configuring subpaths for deployment on existing websites.
Supports dark mode.
Uses AI to parse organization names based on email addresses.

@Que: "There's no such thing as a useless AI, only humans who aren't stubborn enough."