├── .eslintrc.json ├── next.config.js ├── components ├── Nav │ ├── Nav.module.css │ └── Nav.js ├── Pets │ ├── Filters │ │ ├── Filters.module.css │ │ └── Filters.js │ └── Card │ │ ├── Card.js │ │ └── Card.module.css └── Jumbotron │ └── Jumbotron.js ├── public ├── favicon.ico └── vercel.svg ├── styles ├── Home.module.css └── globals.css ├── pages ├── api │ └── cats │ │ ├── index.js │ │ └── [id].js ├── _app.js ├── index.js └── cats │ ├── [id].js │ └── index.js ├── layouts └── Default.js ├── assets └── svg │ ├── heart.svg │ └── heartOutline.svg ├── package.json ├── .gitignore ├── README.md └── data.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | } 4 | -------------------------------------------------------------------------------- /components/Nav/Nav.module.css: -------------------------------------------------------------------------------- 1 | .nav-link { 2 | font-size: 555rem; 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harblaith7/NextJS-Crash-Course/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .cards-container { 2 | width: 80%; 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-around; 6 | } 7 | -------------------------------------------------------------------------------- /pages/api/cats/index.js: -------------------------------------------------------------------------------- 1 | import { cats } from "../../../data"; 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json(cats); 5 | } 6 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | import "bootstrap/dist/css/bootstrap.css"; 3 | 4 | function MyApp({ Component, pageProps }) { 5 | return ; 6 | } 7 | 8 | export default MyApp; 9 | -------------------------------------------------------------------------------- /pages/api/cats/[id].js: -------------------------------------------------------------------------------- 1 | import { cats } from "../../../data"; 2 | 3 | export default function handler(req, res) { 4 | const { id } = req.query; 5 | const cat = cats.find((cat) => cat.id === Number(id)); 6 | 7 | res.status(200).json(cat); 8 | } 9 | -------------------------------------------------------------------------------- /layouts/Default.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Nav from "../components/Nav/Nav"; 3 | 4 | export default function DefaultLayout({ children }) { 5 | return ( 6 | <> 7 |