Arctictype

Arctictype is typing simulator on which you can practise to increase your typing speed and compete with your freinds in realtime.

The project is implemented in a TypeScript environment. Frontend is hosted on Vercel. Backend is hosted on Render ( will switch to Glitch to support wss connections ).

Link: https://arctictype.vercel.app/

• Key Features
• Tech Stack
• Running locally

Key Features

• Robust calculation of Typing speed (wpm) and accuracy of a test.
• Get different formats of practice text ( with punctuations, special characters and numbers ).
• Chart to visualize your typing speed, accuracy and errors over time.
• Store your test results and flex your speed the leaderboard.

Supported languages:

1. English_1K
2. English_5K
3. Web Dev (😁)
4. Code Python

Tech Stack

• Nextjs 13 (App Router)
• Typescript for reliable and fast development
• Zustand for State Management
• Mongodb to store all test and user the data.
• Supabase Database Realtime Postgresql database to maintain statefullness in the realtime channels.
• Supabase Realtime for the realtime features.
  • Will be switching to custom written Socket.io server to increase functionality and flexibility.
  • This is due to the fact that in supabase realtime services i dont have a backend. The states are maintained on individual clients side. Only data can be emitted and consumed by clients. This causes a HUGE problem of concurrency (realtime database is also used to tackle this issue to some extent) and data processing. I mean supabases realtime services were not meant to be used in this way.
• Recharts for the visualizations.
• JWT for auth.
• User Interface and Experience
  • Design is built from scratch using Figma
  • Styling with Tailwind CSS
  • Icons from EvErYwHeRe

Future scope😊

• Github OAuth, Google OAuth for authentication and authorizing users.
• Socket.io for wss server.
• zen mode
• Ui improvements

Running locally

You will need to have the necessary environment variables setup in your .env files.

# ./server/.env
MODE =
PORT =
PRIVATE_KEY =
PRIVATE_REFRESH_KEY =
SALTROUNDS =
DBURI = # mongodb Data uri

# ./client/.env.local
NEXT_PUBLIC_SERVER_URL = # local backend api link. eg: if your ./server/.env has PORT = 3001 then (http/https)://(ipAddress/domain):3001
NEXT_PUBLIC_SUPABASE_PROJECT_ID =
NEXT_PUBLIC_SUPABASE_PROJECT_URL =
NEXT_PUBLIC_SUPABASE_PROJECT_API_KEY =

Note: You should not commit your .env file or it will expose secrets that will allow others to control access to your authentication provider accounts.

1. Install run: pnpm i in ./client and ./server
2. Make repective .env file and poopulate.
3. Populate the .env file with the necessary environment variables.
4. run pnpm run dev in ./client and ./server

Website should now be running on (localhost/domain):3000.

Note: There is a deploy.sh in the root dir if you wanna deploy this somewhere. You just need to connect your Render to the ./server and vercel to ./client of the github repo.