The RealNorth CoderspresentKatatak
Katatak Demo Video
Katas on the go.
The idea for the app came from us all agreeing that we wished there was an on the go mobile app version of coding kata practise websites we've all used while we were developing our code skills.
From their phones, the app allows users to see a list of kata challenges to try, with an indication of whether the user has already solved a given kata. If they wish to tackle a particular topic such as 'string manipulation' or choose a difficulty level, they can filter for these on the home page. When they click a kata they are brought to the current kata page (which will remember which kata the user is doing).
Here they can see the full description of the kata, and use the code editor to build and submit the solution. The code editor has a user-friendly interface including colour linting and handy frequently used insert buttons such as array brackets ‘[ ]’. The user then receives the outcome of their test in the ‘console’ below, including which individual tests have been passed and any ‘console.logs’.
Finally the user page provides the users bio info and stats on their progress so far.
The Team
Joshua Robinson
Holly Rees
Helen Moffat
George Pynadath
Benjamin Curry
Technologies
We used: Language: Typescript. Backend: Node (including utilising global process variables and creating a child process with exec to run a bash command and run the tests in a separate process) , express, jest, supertest, elephantSQL, and onRender. Front end: React Native with Expo Go using React Router, Axios and RivasCVA React Native Code Editor (https://github.com/RivasCVA/react-native-code-editor)
We wanted to make a mobile app and React Native, while still different and a new challenge, had some crossover with React which the team had familiarity with.
We chose typescript as this is React Native’s default and we thought we might need to integrate other libraries/packages that had been written in it.
We looked at different testing libraries but our solution ended up being dependent on node global and child processes, so the popular testing library jest was suitable.
We chose to use the RivasCVA code editor as it was a good starting point that already had some of the functionality that we wanted already (like colour linting) and meant we could build on it, rewriting the available props so that we could access the cursor position and value so that we could make custom buttons.
Challenges Faced
How to get the jest test output out of the console and into a usable format.
How to configure our jest solution in a typescript build and deploy it on a server without issues.
How do deal with input with issues like infinite loops.
How to get react to render updated solved katas when a post request done from kata page.
How to have multiple people working in similar parts of the front end at the same time.