Gloria backend setup #4
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @glo-ree-yah, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request sets up the foundational backend and integrates the frontend for image upload functionality. It introduces new API routes for handling file uploads and serving static content, alongside a reusable React component for the frontend that supports drag-and-drop and live previews. The main application pages have been updated to prominently feature this new upload capability, and backend configurations for file storage and database connection have been adjusted. Additionally, the previous authentication middleware has been disabled, and frontend development scripts have been streamlined.
Highlights
- Backend API for Image Uploads: The backend now features new API endpoints: '/api/upload' for handling image submissions and '/uploads/:name' for serving these uploaded files statically. This establishes the core infrastructure for file management.
- Reusable Frontend Image Uploader Component: A new, versatile 'ImageUploader' React component has been introduced. This component supports drag-and-drop, direct file selection, and provides a live preview of the chosen image before upload, enhancing user experience.
- Enhanced Frontend User Interface: The frontend UI has been significantly updated, with the main landing page and dashboard now integrating the 'ImageUploader'. A new dedicated '/upload' page has also been added, centralizing the image submission process.
- Backend File Storage Configuration: The backend is configured to store all uploaded images in a dedicated 'uploads' directory, ensuring proper organization and persistence of files. This directory is also correctly ignored by Git.
- Dependency and Build Process Updates: The project's dependency management has been updated, specifically incorporating Prisma client and CLI, and adjusting the database connection string in the Prisma schema. Frontend development scripts have also been streamlined.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request sets up a new backend for image uploads and integrates it with the frontend. While the core functionality is present, there are several areas for improvement. The backend has a critical path traversal vulnerability that needs to be addressed immediately. There are also several instances of code duplication, hardcoded values, and suboptimal practices in both the frontend and backend that affect maintainability, security, and performance. Additionally, some temporary or backup files have been committed and should be removed.
|
|
||
| export const filesRoutes = new Elysia() | ||
| .get('/uploads/:name', ({ params, set }) => { | ||
| const filePath = path.join(UPLOAD_DIR, params.name) |
There was a problem hiding this comment.
The current implementation is vulnerable to path traversal attacks. A malicious user could provide a path like ../../etc/passwd in params.name to access sensitive files outside of the intended uploads directory. You must sanitize the input to ensure the final resolved path is within UPLOAD_DIR.
| @@ -0,0 +1,41 @@ | |||
| { | |||
There was a problem hiding this comment.
This backup file, along with package.jsonN and package.jsonY, appears to be a temporary file that was accidentally committed. These files should not be part of the repository as they add unnecessary clutter. Please remove them and consider adding a pattern like *.bak to your .gitignore file to prevent this in the future.
| onDragLeave={() => setDrag(false)} | ||
| onDrop={onDrop} | ||
| className={cn( | ||
| "mx-auto flex h-[321px] w-full max-w-[660px] flex-col items-center justify-center rounded-[12px] border-2 border-dashed p-8 text-center transition", |
There was a problem hiding this comment.
Using hardcoded pixel values for height and width makes the component less flexible and not responsive. It's better to use Tailwind's utility classes to define sizes, which allows for responsive design. Consider using relative units or responsive variants like md:h-....
| import Link from "next/link"; | ||
| import { UploadCloudIcon, FolderIcon, UserIcon } from "@/components/ui/icons"; | ||
|
|
||
| export default function UploadPage() { |
There was a problem hiding this comment.
This page re-implements the file upload logic, which is already encapsulated in the ImageUploader component. This creates significant code duplication, making maintenance harder. This page should be refactored to use the reusable ImageUploader component.
| className=" | ||
| mx-auto rounded-[20px] bg-[#5865F2] px-5 py-10 | ||
| " | ||
| style={{ width: "1105px", height: "545px" }} |
There was a problem hiding this comment.
Using hardcoded pixel values in inline styles is not recommended as it makes the layout rigid and not responsive. It's better to use Tailwind's utility classes for sizing and spacing to ensure the design adapts to different screen sizes.
| <div className="mx-auto mt-8 w-full max-w-[1105px] rounded-xl border bg-white p-4"> | ||
| <div className="mb-2 text-sm text-neutral-600">Preview</div> | ||
| {/* eslint-disable-next-line @next/next/no-img-element */} | ||
| <img |
There was a problem hiding this comment.
Using the standard <img> tag bypasses Next.js's image optimization features, such as automatic resizing, format conversion, and lazy loading. This can lead to slower page loads. It's recommended to use the <Image> component from next/image instead.
| console.log('--------------------------------------------------'); | ||
| }); | ||
| .use(staticPlugin({ assets: UPLOAD_DIR, prefix: '/uploads' })) | ||
| .use(filesRoutes) |
There was a problem hiding this comment.
The staticPlugin is already configured to serve files from the /uploads directory. This filesRoutes handler is redundant and creates a potential conflict. The first registered handler will process the request, making this one likely unreachable. It's best to have a single, clear way of serving static files. I recommend removing this route handler and relying solely on staticPlugin.
| <div className="flex items-center gap-3"> | ||
| <div className="h-16 w-16 overflow-hidden rounded-xl bg-white/20 ring-1 ring-white/40"> | ||
| {/* eslint-disable-next-line @next/next/no-img-element */} | ||
| <img src={preview} alt="Preview" className="h-full w-full object-cover" /> |
There was a problem hiding this comment.
Using the standard <img> tag bypasses Next.js's built-in image optimizations, which can lead to slower performance. You should use the <Image> component from next/image to benefit from features like lazy loading, automatic resizing, and modern format support.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
New /upload page: apps/frontend/src/app/upload/page.tsx
New ImageUploader component: apps/frontend/src/components/ImageUploader.tsx
New icons: apps/frontend/src/components/ui/icons.tsx
Dev server runs on port 3000.