├── components
    ├── banner.module.css
    ├── app.js
    ├── houseRow.js
    ├── banner.js
    └── houseList.js
├── public
    ├── favicon.ico
    ├── GloboLogo.png
    └── css
    │   └── globals.css
├── pages
    ├── index.js
    ├── api
    │   └── hello.js
    └── _document.js
├── .eslintrc.json
├── next.config.js
├── helpers
    └── currencyFormatter.js
├── package.json
├── .gitignore
├── .vscode
    └── launch.json
└── README.md


/components/banner.module.css:
--------------------------------------------------------------------------------
1 | .logo {
2 |   height: 150px;
3 |   cursor: pointer;
4 | }
5 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RolandGuijt/ps-react-fundamentals/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/GloboLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RolandGuijt/ps-react-fundamentals/HEAD/public/GloboLogo.png


--------------------------------------------------------------------------------
/public/css/globals.css:
--------------------------------------------------------------------------------
1 | .themeFontColor {
2 |   color: coral;
3 | }
4 | 
5 | tr {
6 |   cursor: pointer;
7 | }
8 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import App from "../components/app";
2 | 
3 | const Index = () => <App />;
4 | 
5 | export default Index;
6 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals",
3 |   "rules": {
4 |     "@next/next/no-img-element": "off",
5 |     "@next/next/no-css-tags": "off"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 |   swcMinify: true,
5 | }
6 | 
7 | module.exports = nextConfig
8 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/helpers/currencyFormatter.js:
--------------------------------------------------------------------------------
1 | const currencyFormatter = Intl.NumberFormat("en-US", {
2 |   style: "currency",
3 |   currency: "USD",
4 |   maximumFractionDigits: 0,
5 | });
6 | 
7 | export default currencyFormatter;
8 | 


--------------------------------------------------------------------------------
/components/app.js:
--------------------------------------------------------------------------------
 1 | import Banner from "./banner";
 2 | import HouseList from "./houseList";
 3 | 
 4 | const App = () => {
 5 |   return (
 6 |     <>
 7 |       <Banner>
 8 |         <div>Providing houses all over the world</div>
 9 |       </Banner>
10 |       <HouseList />
11 |     </>
12 |   );
13 | };
14 | 
15 | export default App;
16 | 


--------------------------------------------------------------------------------
/components/houseRow.js:
--------------------------------------------------------------------------------
 1 | import currencyFormatter from "../helpers/currencyFormatter";
 2 | 
 3 | const HouseRow = ({ house }) => {
 4 |   return (
 5 |     <tr>
 6 |       <td>{house.address}</td>
 7 |       <td>{house.country}</td>
 8 |       <td>{currencyFormatter.format(house.price)}</td>
 9 |     </tr>
10 |   );
11 | };
12 | 
13 | export default HouseRow;
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "globomantics",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "next": "12.2.2",
13 |     "react": "18.2.0",
14 |     "react-dom": "18.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "eslint": "8.19.0",
18 |     "eslint-config-next": "12.2.2"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Use IntelliSense to learn about possible attributes.
 3 |   // Hover to view descriptions of existing attributes.
 4 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |   "version": "0.2.0",
 6 |   "configurations": [
 7 |     {
 8 |       "type": "pwa-chrome",
 9 |       "request": "launch",
10 |       "name": "Launch Chrome against localhost",
11 |       "url": "http://localhost:3000",
12 |       "webRoot": "${workspaceFolder}"
13 |     }
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/components/banner.js:
--------------------------------------------------------------------------------
 1 | import { logo } from "./banner.module.css";
 2 | 
 3 | const subtitleStyle = {
 4 |   fontStyle: "italic",
 5 |   fontSize: "x-large",
 6 |   color: "coral",
 7 | };
 8 | 
 9 | const Banner = ({ children }) => {
10 |   return (
11 |     <header className="row mb-4">
12 |       <div className="col-5">
13 |         <img src="./GloboLogo.png" alt="logo" className={logo} />
14 |       </div>
15 |       <div className="col-7 mt-5" style={subtitleStyle}>
16 |         {children}
17 |       </div>
18 |     </header>
19 |   );
20 | };
21 | 
22 | export default Banner;
23 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from "next/document";
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html>
 6 |       <Head>
 7 |         <link
 8 |           href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
 9 |           rel="stylesheet"
10 |         />
11 |         <link rel="stylesheet" href="css/globals.css" />
12 |       </Head>
13 |       <body>
14 |         <div className="container">
15 |           <Main />
16 |         </div>
17 |         <NextScript />
18 |       </body>
19 |     </Html>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/components/houseList.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import HouseRow from "./houseRow";
 3 | 
 4 | const houseArray = [
 5 |   {
 6 |     id: 1,
 7 |     address: "12 Valley of Kings, Geneva",
 8 |     country: "Switzerland",
 9 |     price: 900000,
10 |   },
11 |   {
12 |     id: 2,
13 |     address: "89 Road of Forks, Bern",
14 |     country: "Switzerland",
15 |     price: 500000,
16 |   },
17 | ];
18 | 
19 | const HouseList = () => {
20 |   const [houses, setHouses] = useState(houseArray);
21 | 
22 |   const addHouse = () => {
23 |     setHouses([
24 |       ...houses,
25 |       {
26 |         id: 3,
27 |         address: "32 Valley Way, New York",
28 |         country: "USA",
29 |         price: 1000000,
30 |       },
31 |     ]);
32 |   };
33 | 
34 |   return (
35 |     <>
36 |       <div className="row mb-2">
37 |         <h5 className="themeFontColor text-center">
38 |           Houses currently on the market
39 |         </h5>
40 |       </div>
41 |       <table className="table table-hover">
42 |         <thead>
43 |           <tr>
44 |             <th>Address</th>
45 |             <th>Country</th>
46 |             <th>Asking Price</th>
47 |           </tr>
48 |         </thead>
49 |         <tbody>
50 |           {houses.map((h) => (
51 |             <HouseRow key={h.id} house={h} />
52 |           ))}
53 |         </tbody>
54 |       </table>
55 |       <button className="btn btn-primary" onClick={addHouse}>
56 |         Add
57 |       </button>
58 |     </>
59 |   );
60 | };
61 | 
62 | export default HouseList;
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | 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.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------