https://github.com/brainbrian/pnwcams
Site build for PNW Cams
https://github.com/brainbrian/pnwcams
react reactjs snowboarding surfing washington weather webpack
Last synced: 5 months ago
JSON representation
Site build for PNW Cams
- Host: GitHub
- URL: https://github.com/brainbrian/pnwcams
- Owner: brainbrian
- Created: 2014-10-29T05:27:53.000Z (over 11 years ago)
- Default Branch: main
- Last Pushed: 2025-10-25T07:09:43.000Z (8 months ago)
- Last Synced: 2025-10-25T09:07:17.215Z (8 months ago)
- Topics: react, reactjs, snowboarding, surfing, washington, weather, webpack
- Language: TypeScript
- Homepage: http://pnwcams.com
- Size: 23 MB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PNW Cams
Live webcams for surf and snow conditions across the Pacific Northwest.
Built with Next.js 16 (App Router), TypeScript, and Tailwind CSS.
I built this site as a tool for myself to see webcams around the Pacific Northwest that I check on a regular basis. I hope you find it useful.
– [Brian](http://www.brainbrian.com)
## Features
- 🏄 **Surf Cams**: Live webcams from BC to Oregon coast
- ⛷️ **Snow Cams**: Live webcams from PNW ski resorts and mountains
- 🌡️ **Weather Data**: Real-time weather conditions for each location
- 📱 **Responsive Design**: Works on all devices
- 🎨 **Modern UI**: Built with Tailwind CSS
- ⚡ **Fast Performance**: Next.js App Router with TypeScript
## 🚀 Quick Start
1. **Clone the repo**
2. **Install dependencies**
```shell
cd pnwcams/
npm install
```
3. **Start development server**
```shell
npm run dev
```
Site is now running at http://localhost:3000
The app will automatically redirect to `/surf` or `/snow` based on the current month:
- October - March → Snow Cams
- April - September → Surf Cams
4. **Build for production**
```shell
npm run build
npm start
```
## Project Structure
```
app/
├── api/
│ └── weather/ # Weather API proxy routes
│ ├── surf/
│ └── snow/
├── components/ # React components
│ ├── Header.tsx
│ ├── Footer.tsx
│ ├── Camera.tsx
│ ├── Cameras.tsx # Scroll-snap carousel
│ ├── TitleCard.tsx
│ ├── TitleCardLinks.tsx
│ ├── Location.tsx
│ └── Category.tsx
├── data/ # JSON data files
│ ├── surf.json
│ └── snow.json
├── hooks/ # Custom React hooks
│ └── useWeather.ts
├── lib/ # Utility functions
│ └── utils.ts
├── types/ # TypeScript type definitions
│ └── index.ts
├── surf/ # Surf page
│ └── page.tsx
├── snow/ # Snow page
│ └── page.tsx
├── layout.tsx # Root layout
├── page.tsx # Home (redirect)
└── globals.css # Global styles
```
## Technologies
- **Next.js 16**: App Router, API Routes, Server Components
- **React 19**: Latest React features
- **TypeScript**: Type-safe code
- **Tailwind CSS 4**: Utility-first styling
## Weather APIs
- **Surf**: OpenWeatherMap API (proxied through Next.js API routes)
- **Snow**: NOAA/forecast.weather.gov API (proxied through Next.js API routes)
## Deployment
Deployed on Vercel with automatic deployments from the main branch.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is open source and available under the MIT License.