Skip to content

Commit 38d3935

Browse files
kyleburgess2025kyleburgess2025
committed
Next.js first commit
0 parents  commit 38d3935

23 files changed

+5398
-0
lines changed

‎.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["next/core-web-vitals", "next/typescript"]
3+
}

‎.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
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).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
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.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
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.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

‎app/favicon.ico

25.3 KB
Binary file not shown.

‎app/fonts/GeistMonoVF.woff

66.3 KB
Binary file not shown.

‎app/fonts/GeistVF.woff

64.7 KB
Binary file not shown.

‎app/globals.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--background: #ffffff;
7+
--foreground: #171717;
8+
}
9+
10+
body {
11+
color: var(--foreground);
12+
background: var(--background);
13+
font-family: Arial, Helvetica, sans-serif;
14+
}
15+
16+
@layer utilities {
17+
.text-balance {
18+
text-wrap: balance;
19+
}
20+
}

‎app/layout.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { Metadata } from "next";
2+
import localFont from "next/font/local";
3+
import "./globals.css";
4+
5+
const geistSans = localFont({
6+
src: "./fonts/GeistVF.woff",
7+
variable: "--font-geist-sans",
8+
weight: "100 900",
9+
});
10+
const geistMono = localFont({
11+
src: "./fonts/GeistMonoVF.woff",
12+
variable: "--font-geist-mono",
13+
weight: "100 900",
14+
});
15+
16+
export const metadata: Metadata = {
17+
title: "Create Next App",
18+
description: "Generated by create next app",
19+
};
20+
21+
export default function RootLayout({
22+
children,
23+
}: Readonly<{
24+
children: React.ReactNode;
25+
}>) {
26+
return (
27+
<html lang="en">
28+
<body
29+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30+
>
31+
{children}
32+
</body>
33+
</html>
34+
);
35+
}

‎app/new_york/page.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import WeatherPage from "@/components/WeatherPage";
2+
3+
export default function Page() {
4+
return <WeatherPage city="New York" temp={20} description="Clear sky" />;
5+
}

‎app/page.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// pages/index.tsx
2+
3+
import Head from "next/head";
4+
import WeatherCard from "../components/WeatherCard"; // Assuming you have this component
5+
import { FC } from "react";
6+
import Link from "next/link";
7+
8+
const cities = ["New York", "London", "Tokyo", "Paris", "Sydney"]; // Example city list
9+
10+
const Home: FC = () => {
11+
return (
12+
<div className="min-h-screen bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500">
13+
<Head>
14+
<title>Next.js Weather App</title>
15+
<meta name="description" content="A cool Next.js weather app" />
16+
<link rel="icon" href="/favicon.ico" />
17+
</Head>
18+
19+
<main className="flex flex-col items-center justify-center py-10">
20+
{/* Title */}
21+
<h1 className="text-5xl font-bold text-white my-28">
22+
Next.js Weather App
23+
</h1>
24+
25+
{/* Weather Cards - Flexbox Row */}
26+
<div className="flex flex-wrap justify-center gap-8">
27+
{cities.map((city) => (
28+
<Link
29+
href={`/${city.toLowerCase().replaceAll(" ", "_")}`}
30+
key={city}
31+
>
32+
<WeatherCard city={city} />
33+
</Link>
34+
))}
35+
</div>
36+
</main>
37+
</div>
38+
);
39+
};
40+
41+
export default Home;

‎components/WeatherCard.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// components/WeatherCard.tsx
2+
3+
import Image from "next/image";
4+
import { FC } from "react";
5+
6+
interface WeatherCardProps {
7+
city: string;
8+
}
9+
10+
const WeatherCard: FC<WeatherCardProps> = ({ city }) => {
11+
// Simple image URL logic: This could be from a static file or an image hosting service
12+
const cityImageSrc = `/images/${city.toLowerCase()}.jpg`; // Assumes you have city images named like "newyork.jpg"
13+
14+
return (
15+
<div className="bg-white rounded-lg shadow-lg overflow-hidden w-72 hover:scale-105 ease-in duration-100">
16+
{/* City Image */}
17+
<div className="relative h-48">
18+
<Image
19+
src={cityImageSrc}
20+
alt={`Image of ${city}`}
21+
layout="fill"
22+
objectFit="cover"
23+
className="w-full h-full object-cover"
24+
/>
25+
26+
{/* City Name on Opaque Background */}
27+
<div className="absolute bottom-0 w-full bg-black bg-opacity-60 text-slate-200 py-2 pl-3">
28+
<h2 className="text-lg font-semibold">{city}</h2>
29+
</div>
30+
</div>
31+
</div>
32+
);
33+
};
34+
35+
export default WeatherCard;

‎components/WeatherPage.tsx

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import Image from "next/image";
2+
import { FC } from "react";
3+
4+
enum WeatherIcon {
5+
ClearSky = "01d",
6+
FewClouds = "02d",
7+
ScatteredClouds = "03d",
8+
BrokenClouds = "04d",
9+
ShowerRain = "09d",
10+
Rain = "10d",
11+
Thunderstorm = "11d",
12+
Snow = "13d",
13+
Mist = "50d",
14+
}
15+
16+
const WeatherIconMap: Record<string, WeatherIcon> = {
17+
"Clear sky": WeatherIcon.ClearSky,
18+
"Few clouds": WeatherIcon.FewClouds,
19+
"Scattered clouds": WeatherIcon.ScatteredClouds,
20+
"Broken clouds": WeatherIcon.BrokenClouds,
21+
"Shower rain": WeatherIcon.ShowerRain,
22+
Rain: WeatherIcon.Rain,
23+
Thunderstorm: WeatherIcon.Thunderstorm,
24+
Snow: WeatherIcon.Snow,
25+
Mist: WeatherIcon.Mist,
26+
};
27+
28+
type Weather = {
29+
city: string;
30+
temp: number;
31+
description: string;
32+
};
33+
34+
const WeatherPage: FC<Weather> = (weather) => {
35+
return (
36+
<div className="min-h-screen bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500 flex items-center justify-center">
37+
<div className="max-w-5xl w-full grid grid-cols-2 gap-4 p-6">
38+
{/* Left Column: City Image with Name */}
39+
<div className="relative h-96">
40+
<Image
41+
src={`/images/${weather.city.toLowerCase()}.jpg`}
42+
alt={`Image of ${weather.city}`}
43+
layout="fill"
44+
objectFit="cover"
45+
className="rounded-lg"
46+
/>
47+
{/* City Name Overlay */}
48+
<div className="absolute bottom-0 w-full bg-black bg-opacity-60 text-white py-2 text-center">
49+
<h1 className="text-5xl font-bold">{weather.city}</h1>
50+
</div>
51+
</div>
52+
53+
{/* Right Column: Weather Information */}
54+
<div className="flex flex-col justify-center items-center items-start p-6 bg-white bg-opacity-80 rounded-lg shadow-lg">
55+
{/* Weather Icon */}
56+
<Image
57+
src={`http://openweathermap.org/img/wn/${
58+
WeatherIconMap[weather.description]
59+
}@2x.png`}
60+
alt={weather.description}
61+
width={100}
62+
height={100}
63+
className="mb-4"
64+
/>
65+
66+
{/* Temperature */}
67+
<p className="text-4xl font-bold text-gray-800 mb-2">
68+
{weather.temp}°C
69+
</p>
70+
71+
{/* Weather Description */}
72+
<p className="text-lg text-gray-600 capitalize">
73+
{weather.description}
74+
</p>
75+
</div>
76+
</div>
77+
</div>
78+
);
79+
};
80+
81+
export default WeatherPage;

‎next.config.mjs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
images: {
4+
domains: ['openweathermap.org'],
5+
},
6+
};
7+
8+
export default nextConfig;

0 commit comments

Comments
 (0)