Please help me build a lab download center webpage using FastAPI, JavaScript, and other tech stacks. The webpage should include the following features:
1. The backend uses the Seafile API to retrieve the files in the repository. The frontend's first row displays a dropdown menu showing each file for the user to select.
2. The frontend's second row requires the user to enter an email address, which must be an educational or academic email. There is a \"Send Verification Code\" button to the right 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 sending emails is limited to once per minute per IP address.
3. The frontend's third row requires the user to enter the verification code.
4. The fourth row requires the user to fill in their school/institution.
5. The fifth row requires the user to fill in their name.
6. All input fields must not be empty; both frontend and backend should validate this to prevent malicious submissions.
7. The last row has a submit button. After clicking, if the backend verifies the code is correct, it uses the Seafile API to generate a share link for the corresponding file and sends the link to the user's email. At the same time, the frontend automatically redirects to that link.
8. Meanwhile, the backend inserts a record into the SQLite database, including the file name, email, school/institution, name, share link, and submission time.
9. The interface should be in English.
10. The page should be as aesthetically pleasing as possible.
11. Finally, write a Dockerfile to package the entire project into an image.
Using AI to Build a Full-Stack Project: A Personal Account
Using AI to Build a Full-Stack Project: A Personal Account
The lab had a requirement: while making datasets publicly available for download, they also wanted to track how many people downloaded them and similar information. Hence, this project was born.
CITE Lab MoCap and Humanoid Group Download Center
Initially, I thought of using the more familiar FastAPI + SQLite to implement it. I fed the following prompt directly to AI (Claude 3.7 Sonnet), and the result was quite usable. There were two main bugs: one was that the SMTP email sending didn't use encryption, and the other was that the NJU Box version was too old, so I still had to manually find the corresponding Seafile API.
However, the interface was mediocre, and many features were not easy to extend. So I thought of refactoring the project using more advanced tools like Next.js. But whether I asked AI to refactor based on existing code or started from scratch with prompts, the results were terrible—there were even compilation errors, not just runtime bugs. I also tried the latest AI IDEs, but they were unsatisfactory.
In the end, it still required human effort. I spent a day first building a framework, then fed the files from the previous FastAPI project to AI one by one, asking it to reference them and implement the corresponding functionality in the current Next.js project. Then I gradually had it make small feature improvements, combined with manual bug fixing, and finally achieved the results shown in the two screenshots above.
Current features:
@Que: "There is no bad AI, only humans who aren't stubborn enough."