feat: Implement simple blog with Next.js

fullstack/fullstack/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

fullstack/fullstack/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

fullstack/fullstack/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

fullstack/fullstack/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

fullstack/fullstack/app/api/posts/[id]/route.ts

@@ -0,0 +1,15 @@
+import { posts, getPage } from "../../../../data/posts";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } },
+) {
+  const { id } = await params;
+
+  const post = await getPage(id);  
+
+  return new Response(JSON.stringify(post), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json'}
+    })
+}

fullstack/fullstack/app/api/posts/route.ts

@@ -0,0 +1,13 @@
+
+import { posts, getPage } from '../../../data/posts';
+export async function GET(request: Request) {
+    return new Response(JSON.stringify(posts), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json'}
+    })
+    // return new Response(JSON.stringify(request), {
+    //     status: 200,
+    //     headers: { 'Content-Type': 'application/json'}
+    // })
+}
+

fullstack/fullstack/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono, Inter } from "next/font/google";
+import "@/styles/globals.css";
+import "@/styles/components.css";
+import { cn } from "@/lib/utils";
+
+const inter = Inter({subsets:['latin'],variable:'--font-sans'});
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "NextJS Blog",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={cn("h-full", "antialiased", "font-sans", inter.variable)}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

fullstack/fullstack/app/page.tsx

@@ -0,0 +1,39 @@
+import { posts, getPage } from "../data/posts";
+
+export default function Home() {
+  return (
+    <div className='min-h-screen flex flex-col'>
+      <nav className="title-container">
+        <h1 className="title">Blog Posts.</h1>
+      </nav>
+      <main className="">
+        <div className="flex flex-1 p-20 flex-col items-center justify-center">
+          <ul>
+            {posts.map((post) => {
+              return (
+                <li key={post.id} className="mb-4 list-disc">
+                  <a
+                    className="text-xl font-semibold links"
+                    href={`./posts/${post.id}`}
+                  >
+                    {post.title}
+                  </a>
+                  <h2 className="text-gray-500">{post.excerpt}</h2>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </main>
+      <footer className='border mt-auto'>
+        <p className="text-center text-gray-500 py-4">
+          &copy; {new Date().getFullYear()} NextJS Blog. All rights reserved. Submission by Louise Gabriel Vilar
+        </p>
+      </footer>
+    </div>
+  );
+}
+
+
+
+

fullstack/fullstack/app/posts/[id]/page.tsx

@@ -0,0 +1,28 @@
+import { getPage } from "@/data/posts";
+import type { Post } from "@/app/types/post";
+import type { Props } from "@/app/types/props";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export default async function Home({ params }: Props) {
+  const { id } = await params;
+  const blog: Post | undefined = await getPage(id);
+  return (
+    <main className="">
+      <div className="">
+        <div className="title-container">
+          <h1 className="title">{blog?.title}</h1>
+        </div>
+        <div className="content-container p-20">
+          <p className="desc">{blog?.content}</p>
+          <p className="time">{blog?.date}</p>
+          <div className='flex p-20'>
+            <Button variant="default">
+              <Link href="/">Previous</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

fullstack/fullstack/app/types/post.ts

@@ -0,0 +1,8 @@
+    // types/post.ts
+export type Post = {
+  id: number
+  title: string
+  excerpt: string
+  content: string
+  date: string
+}

fullstack/fullstack/app/types/props.ts

@@ -0,0 +1,5 @@
+export type Props = {
+  params: {
+    id: string;
+  };
+};

fullstack/fullstack/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-vega",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "styles/components.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

fullstack/fullstack/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-9",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

fullstack/fullstack/data/posts.ts

@@ -0,0 +1,42 @@
+import type { Post } from "../app/types/post";
+
+export const posts: Post[] = [
+  {
+    id: 1,
+    title: "Getting Started with Next.js",
+    excerpt: "Learn the basics of Next.js and how to create your first app",
+    content:
+      "Next.js is a React framework that enables server-side rendering and generating static websites...",
+    date: "2025-04-15",
+  },
+  {
+    id: 2,
+    title: "Styling in Next.js",
+    excerpt: "Different ways to style your Next.js application",
+    content:
+      "There are multiple ways to style your Next.js application including CSS modules, Tailwind CSS...",
+    date: "2025-04-16",
+  },
+  {
+    id: 3,
+    excerpt: "Data fetching methods in Next.js",
+    title: "Data Fetching in Next.js",
+    content:
+      "Next.js provides several data fetching methods such as getStaticProps, getServerSideProps...",
+    date: "2025-04-17",
+  },
+  {
+    id: 4,
+    title: "API Routes in Next.js",
+    excerpt: "How to create API routes in Next.js",
+    content:
+      "Next.js allows you to create API routes inside the pages/api directory. These routes can be used to handle form submissions, interact with databases...",
+    date: "2025-04-18",
+  }
+];
+
+
+export async function getPage(userId: string): Promise<Post | undefined> {
+    return posts.find((post) => post.id === Number(userId))
+}
+

fullstack/fullstack/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

fullstack/fullstack/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}