GitHub - Rohith-JN/type-frontend: A minimalistic typing test site to improve you...
source link: https://github.com/Rohith-JN/type-frontend
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Type - A Modern Typing Test
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
Project Structure
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
Setup Project Locally
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.local
file - Copy the variables from
.env.example
file onto.env.local
file - Copy Firebase credentials onto the corresponding values in the
.env.local
file - Set the backend PORT of your choice in .env.local
NEXT_PUBLIC_BACKEND_URL
and incodegen.ts
or 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
.env
file - Copy the variables from
.env.example
file 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:
migration1684564075219
intosrc/data-source.ts
add it tomigrations
- Run
npm run migration:run
this will setup the tables in postgres - Run
npm install
- You have successfully setup the Backend
Technologies Used
Type is built using a range of modern web technologies, including:
Frontend
- React.js
- Next.js
- TypeScript
- Redux
- Apollo-Graphql
- Firebase
Backend
- Node.js
- Express.js
- GraphQL
- TypeORM
- PostgreSQL
- Docker
Contributing
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK