Type is a full-stack web application for testing your typing speed and accuracy. With an intuitive and minimalistic interface, Type. offers a natural typing experience, providing real-time feedback on your typing speed and accuracy. The application includes an account system for saving your typing speed history and user-configurable features such as themes.
Note: This repo contains code for the frontend of the site, backend
components
|-- account
| |-- Chart.tsx
| |-- Stats.tsx
| |-- Tests.tsx
| |-- Login.tsx
| |-- Signup.tsx
|-- index
| |-- Footer.tsx
| |-- Header.tsx
| |-- Chart.tsx
| |-- Test.tsx
|-- other
| |-- ConditionalRenderer.tsx
| |-- Error.tsx
| |-- Layout.tsx
| |-- Loader.tsx
| |-- NavOption.tsx
| |-- Navbar.tsx
| |-- Palette.tsx
| |-- Option.tsx
context
|-- actions.ts
|-- reducer.ts
|-- store.ts
|-- state.ts
reducers
| |-- preferenceReducer.ts
| |-- resultReducer.ts
| |-- timerReducer.ts
| |-- wordReducer.ts
firebase
|-- auth.js
|-- firebaseClient.js
|-- useFirebaseAuth.js
graphql
|-- generated
| |-- fragment-masking.ts
| |-- gql.ts
| |-- graphql.ts
| |-- index.ts
|-- mutations
| |-- createTest.graphql
| |-- register.graphql
| |-- validate.graphql
|-- queries
| |-- leaderboard.graphql
| |-- test.graphql
| |-- tests.graphql
| |-- userStats.graphql
hooks
|-- useLocalStorage.ts
|-- useCalculateChartStats.ts
|-- useCalculateStats.ts
|-- usePaginatedTestsQuery.ts
|-- useOnClickOutside.ts
pages
|-- _app.tsx
|-- _error.tsx
|-- account.tsx
|-- index.tsx
|-- leaderboard.tsx
public
|-- favicon.ico
|-- fonts
| |-- LexendDeca-Regular.ttf
|-- vercel.svg
|-- english.json
styles
|-- Account.module.css
|-- Footer.module.css
|-- Header.module.css
|-- Leaderboard.module.css
|-- Loader.module.css
|-- Login.module.css
|-- Navbar.module.css
|-- Palette.module.css
|-- Signup.module.css
|-- Test.css
|-- globals.css
tsconfig.json
utils
|-- constants.ts
|-- createUrqlClient.ts
|-- customToast.ts
|-- getTheme.ts
|-- test.ts
|-- utils.ts
.env.example
.env.local
.eslintrc.json
.gitignore
.prettierrc
codegen.ts
next.config.js
package-lock.json
package.json
README.md
If you want to test the site locally follow these steps:
Frontend:
- Fork the repository to your GitHub account.
- Git clone the repo
- Setup a new project on Firebase
- Enable authentication in Firebase
- Enable Email/Password provider
- Create a
.env.localfile - Copy the variables from
.env.examplefile onto.env.localfile - Copy Firebase credentials onto the corresponding values in the
.env.localfile - Set the backend PORT of your choice in .env.local
NEXT_PUBLIC_BACKEND_URLand incodegen.tsor stick with the default PORT4000 - Run
npm install - You have successfully setup the Frontend
Backend
- Fork the repository to your GitHub account.
- Git clone the repo
- Create a
.envfile - Copy the variables from
.env.examplefile onto .env file - Set the backend PORT of your choice in .env PORT or stick with the default PORT
4000 - Setup PostgreSQL in your machine
- Import migration:
migration1684564075219intosrc/data-source.tsadd it tomigrations - Run
npm run migration:runthis will setup the tables in postgres - Run
npm install - You have successfully setup the Backend
Type is built using a range of modern web technologies, including:
- React.js
- Next.js
- TypeScript
- Redux
- Apollo-Graphql
- Firebase
- Node.js
- Express.js
- GraphQL
- URQL
- TypeORM
- PostgreSQL
- Docker
If you would like to contribute to Type, you can follow these steps:
- Fork the repository to your GitHub account.
- Create a new branch for your changes.
- Make your changes and test them locally.
- Push your changes to your forked repository.
- Create a pull request with a detailed description of your changes and why they are necessary.