Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ayush-kanduri/stopwatch-timers-counters-reactapp
This application comprises of a Timer, Stop Watch, Clicks Counter & Counter Animation. It is built using React.
https://github.com/ayush-kanduri/stopwatch-timers-counters-reactapp
css framer-motion material-ui react react-hooks react-toastify reactjs styled-components
Last synced: 2 days ago
JSON representation
This application comprises of a Timer, Stop Watch, Clicks Counter & Counter Animation. It is built using React.
- Host: GitHub
- URL: https://github.com/ayush-kanduri/stopwatch-timers-counters-reactapp
- Owner: Ayush-Kanduri
- Created: 2023-07-28T08:38:21.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-03T08:23:10.000Z (over 1 year ago)
- Last Synced: 2024-10-12T16:34:34.237Z (about 1 month ago)
- Topics: css, framer-motion, material-ui, react, react-hooks, react-toastify, reactjs, styled-components
- Language: JavaScript
- Homepage: https://ayush-kanduri.github.io/Stopwatch-Timers-Counters-ReactApp/
- Size: 314 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 𝐒𝐭𝐨𝐩𝐰𝐚𝐭𝐜𝐡, 𝐓𝐢𝐦𝐞𝐫𝐬 & 𝐂𝐨𝐮𝐧𝐭𝐞𝐫𝐬 🚀
## ⭐ 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:
```bash
git clone
```
Switch to the cloned folder.
```bash
cd
```
Make a new branch.
```bash
git checkout -b
```
- Download, Install & Configure `NodeJS` in your system.
Make sure that `NPM` is also installed.
See the section about [NodeJS](https://nodejs.org/en/#download) for more information.
- Install Dependencies
```bash
npm install
```
- Check for the project `Configurations`.
Run this command to install _node_ devDependency.
```bash
npm install @types/node
```
If _jsconfig.json_ doesn't exist, then create it at the root with the following configuration.
```js
{
"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.
```js
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:
```bash
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:
```bash
npm run build
```
Now, run this command in your code editor's terminal to Fire Up the Local Server:
```bash
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](https://ayush-kanduri.github.io/Stopwatch-Timers-Counters-ReactApp/)
### **_Checkout the Demo Video:_** [YouTube](https://youtu.be/RfRVNT5jMho)
## 💻 Screens
## :heart: Follow Me:
> [Twitter](https://twitter.com/ayush_codes)
> [LinkedIn](https://www.linkedin.com/in/ayushkanduri)
> [YouTube](https://www.youtube.com/@AyushKanduri)
#### I hope you like the project. Thanks for reading! 😀