World Clock App - React Project

Welcome to the World Clock App! This app allows users to view the current time in various cities around the world. It was developed as part of the SheCodes React Workshop, focusing on React fundamentals, API usage, and time zone manipulation.

Table of Contents

• Introduction
• Features
• Live Demo
• Tech Stack
• Installation
• Usage
• API Used

Introduction

The World Clock App is a React-based project designed to help users keep track of time in multiple cities around the world. It utilizes an external API to fetch the current time and adjusts for different time zones. This project was created to strengthen my React skills, including state management, working with APIs, and displaying dynamic data in real-time.

Live Demo

https://thaiha-world-clock-app.netlify.app/

Features

• Global Time Lookup: View the current time in multiple cities worldwide.
• Search Functionality: Search for a city by name to find the current local time.
• Dynamic Time Updates: Automatically updates the time every second.
• Responsive Design: Works seamlessly across mobile and desktop devices.

Tech Stack

• JavaScript: Used for building the user interface.
• CSS: For styling the components and making the app responsive.
• Axios: To make API requests.
• Moment.js: For time manipulation and formatting.
• World Time API: To fetch the current time for different cities.

Installation

To run this app locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/thaihanguyen98/world-clock-app.git
   

2. Navigate to the project directory:

   cd world-clock-app
   

3. Install the dependencies:

   npm install
   

4. Start the development server:

   npm start
   

5. The app should now be running at http://localhost:3000.

Usage

Enter a city name in the search bar. The app will display the current local time for that city. The time automatically updates, so you can watch it in real time. API Used This app uses the World Time API to retrieve the current time for cities around the world. More information about the API can be found at http://worldtimeapi.org.

API Used

This app uses the World Time API to retrieve the current time for cities around the world. More information about the API can be found at http://worldtimeapi.org.