Skip to content

Implement product listing page #246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
theoldguard99 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Implement product listing page #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions frontend/next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "fakestoreapi.com",
pathname: "/img/**",
},
],
},
experimental: {
optimizePackageImports: ["@mui/material", "@mui/icons-material"],
},
};

export default nextConfig;
7 changes: 0 additions & 7 deletions frontend/next.config.ts
View file
Open in desktop

This file was deleted.

28 changes: 17 additions & 11 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,28 @@
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "next lint",
"clean": "node -e \"require('fs').rmSync('.next',{recursive:true,force:true})\""
},
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.2.4"
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^7.3.8",
"@mui/material": "^7.3.8",
"@mui/material-nextjs": "^7.3.8",
"next": "14.2.21",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^9",
"eslint-config-next": "15.2.4",
"@eslint/eslintrc": "^3"
"eslint-config-next": "14.2.21",
"tailwindcss": "^4",
"typescript": "^5"
}
}
25 changes: 23 additions & 2 deletions frontend/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
Expand All @@ -24,3 +22,26 @@ body {
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}

@keyframes loading-spin {
to {
transform: rotate(360deg);
}
}

.loading-page {
min-height: 100vh;
background: linear-gradient(to bottom, #0a0a0a, #374151);
display: flex;
align-items: center;
justify-content: center;
}

.loading-page__spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: rgba(255, 255, 255, 0.9);
border-radius: 50%;
animation: loading-spin 0.8s linear infinite;
}
37 changes: 24 additions & 13 deletions frontend/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import type { Metadata, Viewport } from "next";
import { Inter, Playfair_Display } from "next/font/google";
import { ThemeRegistry } from "@/components/ThemeRegistry";
import "./globals.css";

const geistSans = Geist({
variable: "--font-geist-sans",
const inter = Inter({
variable: "--font-sans",
subsets: ["latin"],
display: "swap",
});

const geistMono = Geist_Mono({
variable: "--font-geist-mono",
const playfair = Playfair_Display({
variable: "--font-brand",
subsets: ["latin"],
display: "swap",
});

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Bilan",
description: "Browse and search products",
};

export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 5,
};

export default function RootLayout({
Expand All @@ -23,11 +32,13 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<html lang="en" className={`${inter.variable} ${playfair.variable}`}>
<head>
<link rel="preconnect" href="https://fakestoreapi.com" />
<link rel="dns-prefetch" href="https://fakestoreapi.com" />
</head>
<body className="antialiased">
<ThemeRegistry>{children}</ThemeRegistry>
</body>
</html>
);
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/app/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function Loading() {
return (
<div className="loading-page">
<div className="loading-page__spinner" aria-hidden />
</div>
);
}
112 changes: 12 additions & 100 deletions frontend/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,103 +1,15 @@
import Image from "next/image";
import { fetchProducts } from "@/lib/api";
import { ProductListing } from "@/components/ProductListing";

export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
src/app/page.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
export default async function Home() {
let products: Awaited<ReturnType<typeof fetchProducts>> = [];
let error: string | null = null;

<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
);
try {
products = await fetchProducts();
} catch (err) {
error = err instanceof Error ? err.message : "Failed to load products";
}

return <ProductListing initialProducts={products} error={error} />;
}
17 changes: 17 additions & 0 deletions frontend/src/app/products/[id]/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Link from "next/link";

export default function ProductNotFound() {
return (
<div className="min-h-screen flex items-center justify-center p-6">
<div className="text-center">
<h1 className="text-xl font-semibold text-foreground">Product not found</h1>
<Link
href="/"
className="mt-4 inline-block text-foreground/70 hover:text-foreground font-medium"
>
← Back to products
</Link>
</div>
</div>
);
}
Loading