Initial commit

Created from https://vercel.com/new

Author: solomonshalom

.eslintignore

@@ -0,0 +1,5 @@
+.next
+dist
+node_modules
+out
+public

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@next/next/recommended'
+  ],
+  overrides: [],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/react-in-jsx-scope': 'off'
+  }
+}

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+
+# next-pwa
+**/public/workbox-*
+**/public/sw.js*

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run eslint
+npm run pretty-quick-staged

.prettierignore

@@ -0,0 +1,5 @@
+.next
+dist
+node_modules
+out
+public

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": false,
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "printWidth": 90
+}

LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Manan Tank
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,56 @@
+# cybertype.app
+
+A Fast and Minimal Typing App.
+
+Checkout [cybertype.app](https://cybertype.app/)
+
+Practice typing in various modes such as common 1k, 5k, 10k English Words, most commonly misspelled words, Quotes or Programming Language keywords for various languages such as JavaScript, HTML, CSS, Rust, Python, C++ etc with Sweet Mechanical Keyboard Sounds.
+
+<br>
+
+## Awesome Themes
+
+<img src='./docs/themes.png' />
+
+<br>
+
+## Speed Heatmap
+
+Find your weakness and keep practicing to improve your typing speed.
+
+<p align="center">
+<img src='./docs/heatmap.png' width='400' align='center' />
+</p>
+
+<br/>
+
+## Mechanical Keyboard Sounds
+
+<p align="center">
+<img src='./docs/switches.png' width='600' align='center' />
+</p>
+
+<br>
+
+## Super Fast, Minimal and Installable 💯
+
+It is a Progressive Web app that can be installed and can work 100% offline.
+
+<p align="center">
+<img  src='./docs/perf.png' width='500' />
+</p>
+
+### Created with
+
+- `TypeScript`
+- `Next.js`,
+- `React`
+- `SCSS`
+- `use-immer`, `howler`, `next-pwa`
+
+<br>
+<br>
+
+### Credits for Data Collection
+
+JSON Data for various languages is collected from the amazing [MonkeyType](https://github.com/monkeytypegame/monkeytype) Repository.

components/ClientOnly.tsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react'
+
+type Props = {
+  children: JSX.Element | JSX.Element[]
+  ssr?: JSX.Element
+}
+
+// wrap stuff with ClientOnly that is browser specific or is customized to the client ( using localStorage, etc )
+export function ClientOnly({ children, ssr }: Props) {
+  const [hasMounted, setHasMounted] = useState(false)
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+  if (!hasMounted) {
+    return ssr || null
+  }
+  return <> {children} </>
+}

components/DataSelector.tsx

@@ -0,0 +1,62 @@
+import { Dispatch } from 'react'
+import { Action } from '../lib/types'
+import styles from '../styles/DataSelector.module.scss'
+
+export const dataNameGroups = [
+  {
+    group: 'English',
+    values: [
+      'Quotes',
+      'English 200',
+      'English 1K',
+      'English 5K',
+      'English 10K',
+      'Wordle',
+      'Commonly Misspelled'
+    ]
+  },
+  {
+    group: 'Programming',
+    values: [
+      'JavaScript',
+      'Rust',
+      'HTML',
+      'CSS',
+      'C++',
+      'SQL',
+      'Git',
+      'Bash',
+      'Python',
+      'Java',
+      'C#'
+    ]
+  }
+]
+
+type Props = { dispatch: Dispatch<Action>; handleClose: () => void }
+
+export function DataSelector({ dispatch, handleClose }: Props) {
+  return (
+    <div className={styles.dataSelector}>
+      {dataNameGroups.map(dataNameGroup => (
+        <div key={dataNameGroup.group} className={styles.optionGroup}>
+          <h3 className={styles.groupTitle}> {dataNameGroup.group} </h3>
+          <div className={styles.options}>
+            {dataNameGroup.values.map(value => (
+              <div
+                key={value}
+                className={styles.option}
+                onClick={() => {
+                  handleClose()
+                  dispatch({ type: 'setDataName', data: value })
+                }}
+              >
+                {value}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}