/Stopwatch-Timers-Counters-ReactApp

This application comprises of a Timer, Stop Watch, Clicks Counter & Counter Animation. It is built using React.

Primary LanguageJavaScript

𝐒𝐭𝐨𝐩𝐰𝐚𝐭𝐜𝐡, 𝐓𝐢𝐦𝐞𝐫𝐬 & 𝐂𝐨𝐮𝐧𝐭𝐞𝐫𝐬 🚀


⭐ Introduction

This application comprises of a Timer, Stop Watch, Clicks Counter & Counter Animation. It is built using React.

🔥 Getting Started With The Project

  • Fork the Project.

Click the gray Fork button in the top right of this page. This creates your copy of the project and saves it as a new repository in your github account.

  • Clone the Forked Repository in your Local System.

Click on the green Code button, then either the HTTPS or SSH option and, click the icon to copy the URL.

  • Run the following commands in your code editor's terminal: 
  git clone <Paste the copied link>

Switch to the cloned folder. 

  cd <Repository Name>

Make a new branch. 

  git checkout -b <your-username>

  • Download, Install & Configure NodeJS in your system.

Make sure that NPM is also installed.
See the section about NodeJS for more information.

  • Install Dependencies
npm install

  • Check for the project Configurations.

Run this command to install node devDependency.

npm install @types/node

If jsconfig.json doesn't exist, then create it at the root with the following configuration.

{
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
        "@/*": ["src/*"]
        }
    }
}

If vite.config.js doesn't exist, then create it at the root with the configuration given below. If it exists, then replace it with the same given below.

import { defineConfig } from "vite";
import path from "path";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react()],
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "./src"),
		},
	},
	server: {
		open: true,
		port: 8000,
	},
	build: {
		outDir: "build",
	},
	base: "/",
});


  • To run the project in Development mode, run this command in your code editor's terminal to Fire Up the Local Server:
npm run dev

This runs the app in the development mode locally. Now open http://localhost:8000 in your browser to view the Live Website.

  • To run the project in Production mode, first build the project to make it production ready:
npm run build

Now, run this command in your code editor's terminal to Fire Up the Local Server:

npm run preview

This runs the app in the production mode locally. Now open http://localhost:4173 in your browser to view the Live Website.

🔨 Tools Used



  • Library:
    • react-toastify
    • styled-components
    • react
    • react-dom
    • gh-pages
    • framer-motion
    • @emotion/react
    • @emotion/styled
    • @mui/icons-material
    • @mui/material
    • @mui/styled-engine-sc
    • canvas-confetti
    • @types/node
  • Version Control System: Git
  • Version Control System Hosting: GitHub
  • Programming / Scripting: JavaScript
  • Front-End: ReactJS
  • Styling: CSS, Styled Components, Material UI, Framer Motion, Emotion
  • Runtime Environment: NodeJS
  • Integrated Development Environment: VSCode
  • Hosting: GitHub Pages
  • Tech Stack: React, Styled Components, Material UI, Framer Motion, React Toastify

🔗 Links

Checkout the Live Website: Stopwatch, Timers & Counters

Checkout the Demo Video: YouTube


💻 Screens


❤️ Follow Me:

Twitter

LinkedIn

YouTube

I hope you like the project. Thanks for reading! 😀