{"id":16518006,"url":"https://github.com/ayush-kanduri/stopwatch-timers-counters-reactapp","last_synced_at":"2026-04-11T13:02:15.244Z","repository":{"id":184550398,"uuid":"671832934","full_name":"Ayush-Kanduri/Stopwatch-Timers-Counters-ReactApp","owner":"Ayush-Kanduri","description":"This application comprises of a Timer, Stop Watch, Clicks Counter \u0026 Counter Animation. It is built using React.","archived":false,"fork":false,"pushed_at":"2023-08-03T08:23:10.000Z","size":322,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T06:43:28.021Z","etag":null,"topics":["css","framer-motion","material-ui","react","react-hooks","react-toastify","reactjs","styled-components"],"latest_commit_sha":null,"homepage":"https://ayush-kanduri.github.io/Stopwatch-Timers-Counters-ReactApp/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ayush-Kanduri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-28T08:38:21.000Z","updated_at":"2023-08-09T22:28:07.000Z","dependencies_parsed_at":"2023-07-28T23:39:11.256Z","dependency_job_id":null,"html_url":"https://github.com/Ayush-Kanduri/Stopwatch-Timers-Counters-ReactApp","commit_stats":null,"previous_names":["ayush-kanduri/timers-and-counters-reactapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayush-Kanduri%2FStopwatch-Timers-Counters-ReactApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayush-Kanduri%2FStopwatch-Timers-Counters-ReactApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayush-Kanduri%2FStopwatch-Timers-Counters-ReactApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayush-Kanduri%2FStopwatch-Timers-Counters-ReactApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayush-Kanduri","download_url":"https://codeload.github.com/Ayush-Kanduri/Stopwatch-Timers-Counters-ReactApp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241564434,"owners_count":19982958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","framer-motion","material-ui","react","react-hooks","react-toastify","reactjs","styled-components"],"created_at":"2024-10-11T16:34:33.671Z","updated_at":"2025-12-30T22:14:49.682Z","avatar_url":"https://github.com/Ayush-Kanduri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 𝐒𝐭𝐨𝐩𝐰𝐚𝐭𝐜𝐡, 𝐓𝐢𝐦𝐞𝐫𝐬 \u0026 𝐂𝐨𝐮𝐧𝐭𝐞𝐫𝐬 🚀\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/e58f6873-1194-49d8-a841-950c3e905a82\"\u003e\n\u003c/p\u003e\n\n## ⭐ Introduction\n\nThis application comprises of a Timer, Stop Watch, Clicks Counter \u0026 Counter Animation. It is built using React.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## 🔥 Getting Started With The Project\n\n-   Fork the Project.\n\nClick 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.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   Clone the Forked Repository in your Local System.\n\nClick on the green `Code` button, then either the HTTPS or SSH option and, click the icon to copy the URL.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   Run the following commands in your code editor's terminal:\n    \u003cbr/\u003e\n\n```bash\n  git clone \u003cPaste the copied link\u003e\n```\n\n\u003cbr/\u003e\nSwitch to the cloned folder.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n```bash\n  cd \u003cRepository Name\u003e\n```\n\n\u003cbr/\u003e\nMake a new branch.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n```bash\n  git checkout -b \u003cyour-username\u003e\n```\n\n\u003cbr/\u003e\n\n-   Download, Install \u0026 Configure `NodeJS` in your system.\n\nMake sure that `NPM` is also installed.\u003cbr/\u003e\nSee the section about [NodeJS](https://nodejs.org/en/#download) for more information.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   Install Dependencies\n\n```bash\nnpm install\n```\n\n\u003cbr/\u003e\n\n-   Check for the project `Configurations`.\n\nRun this command to install _node_ devDependency.\n\n```bash\nnpm install @types/node\n```\n\nIf _jsconfig.json_ doesn't exist, then create it at the root with the following configuration.\n\n```js\n{\n\"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n        \"@/*\": [\"src/*\"]\n        }\n    }\n}\n```\n\nIf _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.\n\n```js\nimport { defineConfig } from \"vite\";\nimport path from \"path\";\nimport react from \"@vitejs/plugin-react\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n\tplugins: [react()],\n\tresolve: {\n\t\talias: {\n\t\t\t\"@\": path.resolve(__dirname, \"./src\"),\n\t\t},\n\t},\n\tserver: {\n\t\topen: true,\n\t\tport: 8000,\n\t},\n\tbuild: {\n\t\toutDir: \"build\",\n\t},\n\tbase: \"/\",\n});\n```\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   To run the project in Development mode, run this command in your code editor's terminal to Fire Up the Local Server:\n\n```bash\nnpm run dev\n```\n\nThis runs the app in the development mode locally.\nNow open http://localhost:8000 in your browser to view the Live Website.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n-   To run the project in Production mode, first build the project to make it production ready:\n\n```bash\nnpm run build\n```\n\nNow, run this command in your code editor's terminal to Fire Up the Local Server:\n\n```bash\nnpm run preview\n```\n\nThis runs the app in the production mode locally.\nNow open http://localhost:4173 in your browser to view the Live Website.\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## 🔨 Tools Used\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://skillicons.dev\"\u003e\n    \u003cimg width=\"2000\" src=\"https://skillicons.dev/icons?i=vite,react,materialui,css,styledcomponents,js,nodejs,vscode,github,emotion,babel\u0026theme=dark\u0026perline=11\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n-   Library:\n    -   react-toastify\n    -   styled-components\n    -   react\n    -   react-dom\n    -   gh-pages\n    -   framer-motion\n    -   @emotion/react\n    -   @emotion/styled\n    -   @mui/icons-material\n    -   @mui/material\n    -   @mui/styled-engine-sc\n    -   canvas-confetti\n    -   @types/node\n-   Version Control System: Git\n-   Version Control System Hosting: GitHub\n-   Programming / Scripting: JavaScript\n-   Front-End: ReactJS\n-   Styling: CSS, Styled Components, Material UI, Framer Motion, Emotion\n-   Runtime Environment: NodeJS\n-   Integrated Development Environment: VSCode\n-   Hosting: GitHub Pages\n-   Tech Stack: React, Styled Components, Material UI, Framer Motion, React Toastify\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n\n## 🔗 Links\n\n### **_Checkout the Live Website:_** [Stopwatch, Timers \u0026 Counters](https://ayush-kanduri.github.io/Stopwatch-Timers-Counters-ReactApp/)\n\n### **_Checkout the Demo Video:_** [YouTube](https://youtu.be/RfRVNT5jMho)\n\n\u003cbr /\u003e\n\n## 💻 Screens\n\n\u003cp align=\"justify\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/e4f8de68-e6e4-49c3-9038-d354a1c43176\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/ca34670e-3af6-4c54-9fff-4b1cb35c10b4\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/aa26e0d6-9d64-4532-a52f-b3c474222fb9\"\u003e\n\u003cimg src=\"https://github.com/Ayush-Kanduri/GitHub-Tutorial/assets/76626529/24be71e0-70a5-4490-aaa5-be4d8626a05a\"\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n## :heart: Follow Me:\n\n\u003e [Twitter](https://twitter.com/ayush_codes)\n\n\u003e [LinkedIn](https://www.linkedin.com/in/ayushkanduri)\n\n\u003e [YouTube](https://www.youtube.com/@AyushKanduri)\n\n#### I hope you like the project. Thanks for reading! 😀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayush-kanduri%2Fstopwatch-timers-counters-reactapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayush-kanduri%2Fstopwatch-timers-counters-reactapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayush-kanduri%2Fstopwatch-timers-counters-reactapp/lists"}