With Love ⣠⣶⣶⣶⣦⠀⠀
⠀⠀⣠⣤⣤⣄⣀⣾⣿⠟⠛⠻⢿⣷⠀
⢰⣿⡿⠛⠙⠻⣿⣿⠁⠀⠀⠀⣶⢿⡇
⢿⣿⣇⠀⠀⠀⠈⠏⠀⠀⠀ By Junaid
⠀⠻⣿⣷⣦⣤⣀⠀⠀⠀⠀⣾⡿⠃⠀
⠀⠀⠀⠀⠉⠉⠻⣿⣄⣴⣿⠟⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣿⡿⠟⠁⠀⠀⠀⠀
Type.Shift is a React-based typing speed test designed to help users improve typing speed, accuracy, and consistency.
The application provides multiple difficulty levels with typing passages drawn from books, scientific and technical subjects, and programming algorithms.
- Hosted on https://typeshiftt.vercel.app
- No account is required to start a typing test.
- Results include Words Per Minute (WPM), accuracy, and time taken.
- Each test randomly selects a passage from the selected difficulty level.
- Beginner-friendly passages
- Simple vocabulary and sentence structure
- Generally 150–200 characters
- Primarily children's literature and other accessible texts
- Moderate typing difficulty
- More varied vocabulary and sentence structure
- Generally 200–250 characters
- Primarily novels and literary passages
- Advanced typing difficulty
- More complex vocabulary and sentence structure
- Generally 250–300 characters
- Scientific, technical, academic, and related subjects
- Short programming snippets
- Algorithms, data structures, and programming concepts
- Generally up to 100 characters
- No book-cover images are used for code passages
Source attribution and appropriate cover images are maintained for applicable non-code passages.
- Typing speed testing with WPM calculation
- Accuracy tracking
- Correct and total character counts
- Four difficulty levels
- Random passage selection
- Source attribution for passages
- Book-cover display for applicable passages
- Performance labels based on WPM
- Restart button and
TABrestart shortcut - Responsive layout for desktop and mobile
- Welcome information lightbox
- Privacy Policy and Terms of Use lightboxes
- Animated DarkVeil background
- Matrix-style result screen
- GitHub and LinkedIn links
- Vercel Web Analytics
- React.js
- JavaScript
- CSS
- OGL
- Vercel
- Vercel Web Analytics
Currently, the application does not use a backend or database.
Type.Shift/
├── docs/
│ └── superpowers/
├── public/
│ ├── assets/
│ │ ├── easy/
│ │ ├── medium/
│ │ ├── hard/
│ │ └── placeholder.png
│ ├── legal/
│ │ ├── privacy.txt
│ │ └── usage.txt
│ ├── 404.html
│ ├── Ads.txt
│ ├── faicon.ico
│ ├── index.html
│ ├── logo.png
│ ├── manifest.json
│ └── robots.txt
├── scripts/
│ ├── logs/
│ │ └── placeholders.txt
│ ├── addPlaceholder.js
│ └── fetchCovers.js
├── src/
│ ├── components/
│ │ ├── DarkVeil.css
│ │ └── DarkVeil.js
│ ├── data/
│ │ └── paragraphs.js
│ ├── App.css
│ ├── App.js
│ └── index.js
├── AGENTS.md
├── CONTRIBUTING.md
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── THIRD-PARTY-NOTICES.md
The typing-test dataset is stored separately from the main application logic in:
src/data/paragraphs.js
It is divided into:
easy
medium
hard
code
This keeps the dataset easier to maintain and allows new passages to be added without modifying the core typing-test logic.
Each applicable passage contains metadata such as:
{
text: "...",
source: "...",
image: "/assets/easy/example.png"
}Code passages do not require book-cover metadata.
Contributors are encouraged to add new passages, particularly in bulk, while keeping the existing difficulty requirements and metadata structure.
For detailed contribution instructions, including book-cover handling and placeholder usage, see:
The general workflow for book-based passages is:
Add passages
↓
Run fetchCovers.js
↓
Check for missing covers
↓
Add failed covers manually when possible
↓
Use addPlaceholder.js only when an actual cover cannot be added
↓
Update the placeholder log when required
The project contains scripts for managing book-cover images.
After adding book passages, run:
node scripts/fetchCovers.jsThe script uses the book information in src/data/paragraphs.js to search available book-cover sources and add images to the appropriate difficulty folder.
Only use:
node scripts/addPlaceholder.jswhen an actual book cover cannot reasonably be obtained.
Do not run addPlaceholder.js before attempting to fetch or manually add the real cover.
Placeholder usage is tracked in:
scripts/logs/placeholders.txt
Read the log before replacing or changing any placeholder image.
If a placeholder is later replaced by the actual cover, keep the existing log entry and append:
ACTUAL IMAGE ADDED
to that entry.
The project includes:
- Privacy Policy:
public/legal/privacy.txt - Terms of Use:
public/legal/usage.txt
These documents are accessible from the application's footer.
DO NOT REMOVE COMMENTS INSIDE CODE
COMMENTED CODE SECTIONS MUST BE RETAINED
Unless a contribution specifically requires otherwise, preserve existing comments and commented-out code.
Avoid modifying unrelated functionality when making focused changes.
Install dependencies:
npm installStart the development server:
npm startCreate a production build:
npm run buildBefore submitting changes, verify that the application builds successfully and that the modified functionality works as expected.
The following features may be added in future versions:
- Login system
- Personal WPM tracker
- WPM progress graphs
- Difficulty-based statistics
- Custom WPM goals
- Personal best leaderboard
Contributions are welcome, especially:
- New typing passages
- Book covers
- Code snippets
- Bug fixes
- UI and accessibility improvements
- Performance improvements
- Documentation improvements
Please read CONTRIBUTING.md before submitting changes.
Keep contributions focused and avoid unrelated modifications.
Type.Shift uses third-party software and components.
Relevant licensing and attribution information is maintained in:
In particular, the project uses the React Bits DarkVeil component and the OGL library.
Type.Shift is released under the MIT License for the project's own code.
See LICENSE for the full license text.
Third-party components remain subject to their respective licenses and notices.
Built by Junaid