Introduction
This article introduces my portfolio web application that allows users to compare weather data across major cities in Japan.
The frontend is built with React + Tailwind CSS, while the backend is powered by Python + AWS SAM in a fully serverless architecture.
▶ Live App: https://d3najlyap0uyr2.cloudfront.net/
Overview
This web app lets users compare weather conditions in the following five Japanese cities using data retrieved from the OpenWeather API:
- Sapporo (northernmost prefecture)
- Tokyo (capital)
- Kanazawa (Sea of Japan side)
- Kochi (Pacific Ocean side)
- Naha (southernmost prefecture)
Features
Current Weather
- Real-time display of weather, temperature, and humidity
- Auto-updated hourly
Daily & Weekly Reports
Daily Report
- Temperature variation throughout the selected day
- Summary of weather data (e.g., average temperature)
- Date selection via calendar
Weekly Report
- Temperature trends over a week
- Ranking of daily highs and lows
- Summary of the week’s weather data
- Week selection via calendar
Why I Built It
I wanted to build a web app for my portfolio, but I faced challenges like:
- Lack of meaningful content
- Difficulty handling sensitive user data
- Low user engagement for newly launched apps
To solve this, I decided to leverage public weather data via APIs, so the app can continuously update itself without user-generated content.
The idea was sparked during the hot summer of June 2025 in Tokyo — I found myself wondering:
“Is Hokkaido cooler? Or is Okinawa even hotter?”
Tech Stack
Frontend
| Category | Technology |
|---|---|
| Language | TypeScript |
| Framework | React, react-router-dom |
| Styling | Tailwind CSS |
| Date Picker | react-datepicker |
| Charts | Recharts |
| Dev Env | Docker, Docker Compose |
| Hosting | Amazon S3 + CloudFront |
Why React?
- Offers design flexibility
- Abundant learning resources — ideal for frontend beginners like myself
Backend
| Category | Technology |
|---|---|
| Language | Python 3.13 |
| Framework | AWS SAM |
| API Gateway | Amazon API Gateway + AWS Lambda |
| Scheduler | EventBridge + Lambda |
| Storage | Amazon S3 |
Why this stack?
- I’m familiar with Python from previous work
- Serverless setup reduces infrastructure complexity
- I was studying for the AWS SAA exam — perfect for hands-on learning
System Architecture
- The frontend communicates with the backend via API Gateway
- Scheduled Lambda tasks (via EventBridge) run the following:
- Fetch weather data using the OpenWeather API
- Generate daily and weekly reports
User Feedback & Usage (Coming Soon)
This section will be updated in the future with actual usage data, such as:
- Page views and unique visitors
- Reactions on social media and blogs
- User testimonials and impressions
Reflections from the Developer
Frontend Development
As a newcomer to frontend development, I often found UI implementation difficult.
There were many moments where I wasn’t confident in my design decisions.
I plan to study UI/UX design to create more intuitive interfaces in future projects.
Backend Development
Hands-on experience helped me internalize what I was learning for the AWS SAA certification.
I also discovered how efficient local testing and deployment with AWS SAM can be.
Other Insights
Managing priorities and tasks was challenging, but I enjoyed the creative freedom that solo development brings.
It was rewarding to see the project evolve from idea to deployment.
Future Plans
- Implement monthly and yearly reports for long-term weather trends
- Improve UI/UX design
- Add AI-powered weather forecasting and comment generation
- Enable multilingual support for international users
Conclusion
This web app was a fun and educational project that helped me grow as a developer.
I had the opportunity to work with modern tools like React and AWS SAM, and I'm excited to keep improving the app.
If you’re curious, feel free to give it a try!
- App URL: https://d3najlyap0uyr2.cloudfront.net/
- GitHub Repositories
Top comments (0)