🌍 Check the local time and time zone of any city in the world
Features | Technologies | How to use | Learning outcomes | License
- Accurate time for any city around the world, along with information about the local time zone, supporting:
- Searching cities by name, with autocomplete suggestions based on your entries.
- Using the location you're currently at (real time geolocation).
- High-quality, dynamic, landscape images in the background, with proper attribution to the photographer.
- TypeScript
- React + Next.js
- Styled Components
- Serverless functions (on Vercel)
- Luxon
- BlurHash
GlobalClock is available at https://globalclock.vercel.app. Check it out!
I've learned a ton with this project! Some of my experiences and learning outcomes were associated with:
- Improving my skills with TypeScript, React and Next.js, by using them to build this project.
- Creating reusable, self-contained React components, to enhance the separation of concerns and simplify maintenance.
- Using the React Context API, to allow efficient communication between pages and components.
- Using Styled Components, a CSS-in-JS library useful to improve the styling workflow in React applications.
- Integrating the app with:
- HERE API, for features that rely on location data, such as searching cities by name, showing location suggestions based on the user entries, using the current coordinates to determine the user location, and retrieving information about time zones.
- Unsplash API, to show dynamic, high-quality images in the background of pages.
- Implementing serverless (lambda) functions. They offer many benefits of servers, without having to build a full-fledged backend. In GlobalClock, serverless functions implement response caching and other features tailored the needs of the app, preventing most rate-limiting issues and making the most external APIs.
- Showing a lightweight, blur hash version of images while loading. Once they are ready, the background will transition to the original image, enhancing the overall UX by not letting the screen go blank.
- Keeping the layouts responsive to different screen sizes.
- Manipulating dates, time zones and offsets.
This project is under GNU GPLv3 license. Check LICENSE for more information.
Made by with ❤️ by Diego Aquino. Let's connect!