Creating a PWA with Next.js

As a web developer, I’m always on the lookout for new tools and technologies to explore. Recently, I delved into the world of Progressive Web Apps (PWAs) and decided to build my own—a simple weather app called Rising Sun. In this blog post, I’ll share my journey of developing Rising Sun using Next.js and React, highlighting its features and functionalities.

What is it?

Rising Sun is a minimalistic weather app designed to provide users with essential temperature information at a glance. Built using Next.js and React, Rising Sun offers a straightforward user experience, making it easy to check the temperature in different locations.

Key Features

• Temperature Display: Rising Sun fetches temperature data from the WeatherAPI, allowing users to view current temperature readings for selected locations.
• Swiper UI: Rising Sun utilizes a card-like UI, enabling users to swipe right and left between locations such as Tokyo and Amsterdam.
• Installable: Users can install Rising Sun on their iPhone or Android device by adding it to their home screen, making it easily accessible as a standalone app.

Components Used

Rising Sun utilizes several components to create its user interface, including:

• LocationCard: Displays temperature information for a specific location. Utilizes the TemperatureDisplay and DateTimeDisplay components.
• TemperatureDisplay: Renders the temperature data fetched from the WeatherAPI in a visually appealing format.
• DateTimeDisplay: Formats date and time information for display within the app.

Get Started with Rising Sun

Ready to explore Rising Sun? Check out the GitHub repository to view the code and contribute to the project. You can also try out the live demo hosted on Netlify. Experience the simplicity and convenience of Rising Sun today!