ankushbhardwxj / typecoder Goto Github PK

• Landing page describing how the website works
• Basic backend for signup/signin along basic frontend

• Add support for changing themes on the component.
• If user is not active on the component, timer should be paused.
• Calculate WPM and display on every keyPress
• Keep a typo counter on state which should be updated when user puts incorrect keypress.
• At the end of a code typing practice session, show user data as follows:
  
• Each keypress can be put to two arrays CorrectKeyPress & IncorrectKeyPress and stored to the component state.

• Create a leaderboard for each lesson.
• Have a visualization showing top WPM of an user on a particular day
• Recent activity tab with a pagination of 5

Front end

• NextJS
• Redux
• TypeScript

Back end

• Go
• Postgres
• Docker
• Nginx
• AWS

Frontend

• Create frontend state store using Mobx State Tree
• Use websockets for realtime position of cursors of multiple users for compete
• Better keystroke captures & better result section UI
• Upgrade NextJS
• Mixpanel Events

Backend

• Create services in Go/Python
  • Postgres ORM (Try Prisma SDK)
• Replace MongoDB with Postgres
• Jenkins CI
• Terraform to setup on AWS
• Setup K8s for services
• Prometheus, Grafana Setup for Observability

Hey, I tried to create an account but it doesn't seem to work.
The website is super cool and it would be great if it is updated.

The Monaco Shit aint working, shitty API and docs so hard to play with the cursor. Replace with Codemirror, better API and offers options to play around with the cursor.

Create a profile page at app/user/profile/:profile_id, which will fetch details from server regarding registered user and display in a systematic way. The page should show the Name, Username, List of lessons completed, along with latest typing speed on a particular lesson attempted by user. The profile page can show many other data, such as a graph which can display typing speed improvements over past months (similar to what codechef / codeforces rating graph looks like). Use all your creativity on this issue, since the profile page should be the most attractive page of the app.

NOTE: (for NWOC student) - Discuss different features that can be introduced. The issue can be broken down into smaller issues and points can be awarded accordingly.

Create a new component where an user can upload a code file from their local machine. The user should be asked to add a title to that file, add language the code is in and then a field to upload the code. This code file should be saved to the database, as a personal_lesson.

Currently, we need to start server inside the server directory using nodemon app.js and start client using npm start. We want a single command npm start which should start both the server and the client.

Allow pair typing to allow multiple users to compete.

For each practice typing session, show user data stored in component state at #11 as a form of some kind of visualisation. This maybe a heatmap on a keyboard which would show correct and incorrect keys. This may also be some kind of graph. Discuss this issue before proceeding.

Need to create a DockerFile for easy build and deploy

• Currently, passwords are not encrypted using jwt on signup. Add jwt encryption on signup and use bcrypt for signin. (beginner)
• Add validations for various fields on the Signup / Signin form. Use semantic-UI label pointers to show user for incorrect input (beginner)
• Add Oauth login for Google and Github, preferably using passport-js (medium)
• For the forget password link, create another route(/app/account/password/reset) using the react-router-dom config on app.js. Create a password reset form component with text similar to this using semantic UI components (keep design similar to Signup form). Try Re-using the component. On the server side, check if the email given by user on the card is present in the database. If present, send a mail to the email ID else show error that email is not registered. (HARD) (Discuss before proceeding)
• Create a new component at a new route where an user can reset the password. The component should consist of two fields - password, confirm password, along with a Reset password button. On clicking the button, server should update the password of the corresponding email ID. (HARD) (Discuss before proceeding)

NOTE: (For NWOC students)- Each of the issues can be treated as individual issues for which points would be given accordingly.

After an user registers on typecode, he should be shown a list of lessons, which are basically some open source code from popular projects on which the user can practice typing upon. The code should be of various popular programming languages such as Javascript, C++, C, Rust, Go, Python etc. Find any popular repository on each of the languages and find a part from the source code which would be moderate to difficult in typing fast. Store the code extracted, maybe on server or client, whichever suitable.

This is supposed to be a typing platform meant for an audience of programmers. We also want it to be a social platform, where users can create their accounts and have high scores which shall be displayed on a leaderboard. Although, I'm still looking for ideas to determine how the ranks of each user would be decided.
Some immediate features that come to mind:

• Landing page , describing the website
• Authentication page for registering users
• Code editor : This matters a lot because different ones have different use cases
• Database: Mongo or Postgresql
• How code should be uploaded by users ? How would they use private code ? Should we persist that code ?
• More premium ideas

This project needs to be rewritten in typescript.

Front end

• Move to Typescript + NextJS
• Deployment on vercel
• UI themed on Gruvbox

Back end

• Authentication service (Java + Postgres)
• Lessons service (Java+ Postgres)

Remaining tasks

• Integrate Leaderboard API to Client
• Optimise user data on leaderboard and on submissions
• Design compete arena & integrate websockets.
• Find more lessons and add them
• Fix restart unfocus issue

• Add a main project README
• Remove boilerplate stuff