Time Pro Active

Time Pro Active is a multi-functional web application built with React.js, Next.js, Tailwind CSS, and Shadcn UI. This application provides a variety of time-based utilities and productivity tools, such as a world clock, stopwatch, timer, music player, and more. It incorporates modern technologies like Framer Motion for animations, Howler.js for the music player, and FullCalendar.js for managing calendars.

Website link : Time Pro Active.app

Features

• World Clock: View the time in different time zones.
• Stopwatch: A simple stopwatch to track time intervals.
• Timer: A countdown timer for managing time-bound tasks.
• Calendar: Powered by FullCalendar.js, a dynamic and responsive calendar to schedule and manage events.
• Music Player: Built using Howler.js, this feature allows you to play selected songs.
• Pomodoro: A productivity timer to implement the Pomodoro technique for effective work intervals.
• Analog Clock: A real-time clock that displays the current time in an analog format.
• Date Range Picker: A feature to calculate the number of days between two dates.
• Duration Calculator: Calculates the number of days, months, and years between two dates.
• Note Taker: Keep track of your notes in an organized way.
• Calculator: A basic calculator for quick calculations.
• World Time Converter: Convert times between different time zones

Tech Stack

• Frontend:

  • React.js
  • Next.js
  • Tailwind CSS
  • Shadcn UI
  • Framer Motion (for animations)
  • FullCalendar.js
  • Howler.js (for music player)
  • JavaScript and TypeScript

• Backend:

  • Node.js (for server-side logic)
  • jsdelivr (for CDN)

Themes

The application supports multiple themes for better user experience:

• Dark Mode: Toggle between light and dark themes.
• Color Themes: Choose from blue, purple, or green color schemes.
• Thematic Designs: Inspired by:
  • A night sky full of stars
  • Ocean waves
  • Sunflower fields
• Theme Switcher: A dropdown button in the header allows users to switch between different themes.

Getting Started

Prerequisites

• Node.js installed on your machine.
• A code editor such as VSCode.
• A basic understanding of JavaScript, React, and CSS.

Installation

1. Clone the repository:

   git clone https://github.com/SwagD15/Time-Pro-Active.git

2. Navigate to the project directory:

   cd Time-Pro-Active

3. Install the dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open the application in your browser:

   http://localhost:3000
   

Configuration

You can customize the theme and other settings within the application via the settings page in the UI.

Acknowledgements

• FullCalendar.js for the calendar functionality.
• Howler.js for the music player.
• Framer Motion for animations.
• Tailwind CSS for styling.
• Shadcn UI for UI components.
• Google Fonts for the font selection (Karla, Ubuntu Sans).
• jsdelivr CDN for serving assets.

Make Sure To Give a Star ⭐!!