Build a Frontend for displaying the projects ideas.#3
Build a Frontend for displaying the projects ideas.#3surajgoraicse wants to merge 7 commits intoking04aman:mainfrom
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds a complete frontend application for displaying MERN project ideas with filtering capabilities. The application is built using Next.js, TypeScript, and Tailwind CSS with ShadCN components for a modern UI.
Key changes:
- Complete frontend setup with TypeScript configuration and UI components
- Project data structure with 30 curated MERN stack project ideas organized by difficulty levels
- Interactive filtering system allowing users to browse projects by skill level
Reviewed Changes
Copilot reviewed 27 out of 36 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/tsconfig.json | TypeScript configuration for Next.js with modern ES2017 target |
| frontend/src/data/data.ts | Core data structure containing 30 project ideas categorized by difficulty |
| frontend/src/components/projects/Projects.tsx | Main component with filtering logic and localStorage persistence |
| frontend/src/components/cards/ProjectCard.tsx | Individual project card component displaying project details |
| frontend/src/components/ui/* | Collection of reusable UI components (buttons, cards, toggles, etc.) |
| frontend/src/app/layout.tsx | Root layout with theme provider and navigation |
| frontend/package.json | Dependencies including Next.js 15, React 19, and UI libraries |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| | "POSTGRES"; | ||
|
|
||
| export type Tags = { | ||
| level: "Begineer" | "Intermediate" | "Advanced"; |
There was a problem hiding this comment.
Corrected spelling of 'Begineer' to 'Beginner'.
| Implement CRUD operations to manage tasks. | ||
| Add features like task filtering, sorting, and marking tasks as completed. | ||
| Include user authentication to allow users to have personalized todo lists.`, | ||
| tag: { level: "Begineer", id: 1 }, |
There was a problem hiding this comment.
Corrected spelling of 'Begineer' to 'Beginner'.
| import ProjectCard from "../cards/ProjectCard"; | ||
| import { Skeleton } from "../ui/skeleton"; | ||
|
|
||
| type LevelsType = Tags["level"] | "All"; |
There was a problem hiding this comment.
The LevelsType includes 'Begineer' which should be 'Beginner' to match the corrected spelling.
| ) as LevelsType | null; | ||
| if ( | ||
| saved && | ||
| ["Begineer", "Intermediate", "Advanced", "All"].includes(saved) |
There was a problem hiding this comment.
Corrected spelling of 'Begineer' to 'Beginner'.
| variant="outline" | ||
| type="single" | ||
| > | ||
| <ToggleGroupItem value="Begineer">Begineer</ToggleGroupItem> |
There was a problem hiding this comment.
Corrected spelling of 'Begineer' to 'Beginner'.
| </CardAction> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <p className="text-sm text-gray-800"> |
There was a problem hiding this comment.
Hard-coded color class 'text-gray-800' doesn't respect the theme system. Use semantic color tokens like 'text-muted-foreground' for better dark mode compatibility.
| <p className="text-sm text-gray-800"> | |
| <p className="text-sm text-muted-foreground"> |
|
Hi @surajgoraicse, Thanks for your contribution. Please implement suggested improvements. |
2 participants
No description provided.