diff --git a/fullstack/fullstack-blog-wendell/.gitignore b/fullstack/fullstack-blog-wendell/.gitignore new file mode 100644 index 00000000..5ef6a520 --- /dev/null +++ b/fullstack/fullstack-blog-wendell/.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 diff --git a/fullstack/fullstack-blog-wendell/README.md b/fullstack/fullstack-blog-wendell/README.md new file mode 100644 index 00000000..e215bc4c --- /dev/null +++ b/fullstack/fullstack-blog-wendell/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. diff --git a/fullstack/fullstack-blog-wendell/app/api/posts/[id]/route.ts b/fullstack/fullstack-blog-wendell/app/api/posts/[id]/route.ts new file mode 100644 index 00000000..8ad32b06 --- /dev/null +++ b/fullstack/fullstack-blog-wendell/app/api/posts/[id]/route.ts @@ -0,0 +1,17 @@ +import { NextResponse } from "next/server"; +import { posts } from "@/data/posts"; + +export async function GET( + request: Request, + { params }: { params: Promise<{ id: string }> }, // Await params for Next.js 16 +) { + const { id } = await params; + // Convert id to number if your data uses numbers for IDs + const post = posts.find((p) => p.id === id); // String === String + + if (!post) { + return NextResponse.json({ error: "Post not found" }, { status: 404 }); + } + + return NextResponse.json(post); +} diff --git a/fullstack/fullstack-blog-wendell/app/api/posts/route.ts b/fullstack/fullstack-blog-wendell/app/api/posts/route.ts new file mode 100644 index 00000000..92245cf5 --- /dev/null +++ b/fullstack/fullstack-blog-wendell/app/api/posts/route.ts @@ -0,0 +1,6 @@ +import { NextResponse } from "next/server"; +import { posts } from "@/data/posts"; // Direct import here! + +export async function GET() { + return NextResponse.json(posts); +} diff --git a/fullstack/fullstack-blog-wendell/app/favicon.ico b/fullstack/fullstack-blog-wendell/app/favicon.ico new file mode 100644 index 00000000..718d6fea Binary files /dev/null and b/fullstack/fullstack-blog-wendell/app/favicon.ico differ diff --git a/fullstack/fullstack-blog-wendell/app/globals.css b/fullstack/fullstack-blog-wendell/app/globals.css new file mode 100644 index 00000000..a7ba4489 --- /dev/null +++ b/fullstack/fullstack-blog-wendell/app/globals.css @@ -0,0 +1,20 @@ +@import "tailwindcss"; + +@theme { + /* Register your custom colors here to generate utilities */ + --color-primary: #00b894; + --color-secondary: #0984e3; + --color-background: #f9fafb; /* This creates 'bg-background' */ + --color-foreground: #2d3436; /* This creates 'text-foreground' */ + + --font-sans: "Inter", sans-serif; +} + +/* You no longer need to define them in :root separately for Tailwind utilities */ + +@layer base { + body { + /* Now 'bg-background' is a known utility! */ + @apply bg-background text-foreground antialiased; + } +} diff --git a/fullstack/fullstack-blog-wendell/app/layout.tsx b/fullstack/fullstack-blog-wendell/app/layout.tsx new file mode 100644 index 00000000..c2ecf970 --- /dev/null +++ b/fullstack/fullstack-blog-wendell/app/layout.tsx @@ -0,0 +1,23 @@ +import "./globals.css"; +import { Header } from "@/components/layout/Header"; +import { Footer } from "@/components/layout/Footer"; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + {/* Sticky Header for that premium feel */} +
+ + {/* This renders your page.tsx or your posts/[id]/page.tsx */} +
{children}
+ +