Digital Clock Dashboard

A simple digital clock dashboard built with React and TypeScript that displays the current time in multiple time zones, including Local, New York, London, Tokyo, and South Africa.

Table of Contents

• Features
• Project Structure
• Installation
• Usage
• Testing
• Deployment
• Accessibility
• Contributing
• License

Features

• Multi-Time Zone Support: Displays current times for multiple time zones.
• Responsive Design: Optimized for desktop and mobile view.
• Dynamic Updating: Automatically updates the time every second.
• Accessibility: Uses proper ARIA labels and roles for a better accessible experience.
• SEO-Friendly: Includes meta tags managed by react-helmet.

Project Structure

digital-clock-dashboard/
├── index.html
├── package.json
├── README.md
└── src/
    ├── index.tsx
    ├── App.tsx
    ├── DigitalClock.tsx
    └── App.css

Code Explanation:

• index.html: The root HTML file that includes the mounting point for React.
• src/index.tsx: Bootstraps the React application.
• src/App.tsx: Main component that integrates the digital clock component and sets global helmet tags for SEO.
• src/DigitalClock.tsx: Contains the digital clock component that displays time in different time zones.
• src/App.css: CSS file for styling the application.
• package.json: Contains project metadata and dependencies.

Installation

1. Clone the Repository:

   git clone https://github.com/your-username/digital-clock-dashboard.git
   cd digital-clock-dashboard

2. Install Dependencies:

   Make sure you have Node.js installed. Then run:

   npm install

3. Setup (Optional):

   This project uses Vite for the development server and bundling. If you haven't installed Vite globally, you can run it through npm scripts.

Usage

Running the Development Server

Start the development server with:

npm run dev

Open a browser and navigate to: http://localhost:3000

Building for Production

Build the production bundle with:

npm run build

Preview the production build locally:

npm run preview

Testing

The project is set up with Jest and React Testing Library for unit tests. To run tests, use:

npm run test

Make sure to add any additional tests in a directory named __tests__/ as needed.

Deployment

For deploying a static site, you can use GitHub Pages, Vercel, or Netlify.

Deploying to GitHub Pages

Build the project:

npm run build

Deploy the dist/ folder to GitHub Pages. You can use the gh-pages package:

npm install --save-dev gh-pages

Add the following to your package.json:

{
  "homepage": "https://your-username.github.io/digital-clock-dashboard"
}

And add these scripts:

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}

Deploy with:

npm run deploy

Accessibility

• The clock cards use ARIA roles and labels for improved accessibility.
• The layout uses semantic HTML elements.
• Use tools like Lighthouse to audit accessibility.

Contributing

Contributions are welcome! Please fork the repository and submit pull requests with your improvements.

1. Fork the repo.
2. Create a feature branch: git checkout -b feature/YourFeature.
3. Commit your changes and push your branch.
4. Open a pull request with a detailed description of your changes.

License

This project is licensed under the MIT License.

Happy Coding!

This markdown structure is ready to be copied directly into a `README.md` file for your GitHub repository. Let me know if you need any further adjustments!