Full cycle of design, development and maintain of various applications/services from backend to frontend
Projects:
- Console that mimics the functionality of the browser console (https://github.com/htmlacademy/console.js)
SPA (pure JS) Used (possibly still used) in some interactive tasks and demonstrations to display the results of the student's code Functionality: the ability to input and output, displays objects like in a browser Contribution: writing from scratch, deploy, maintain
- Engine for interactive courses SPA (pure js)
Functionality:
- Navigation between tasks
- Running checks for different task types
- Displaying the results, sending to the server Contribution:
- Added support for new types of tasks, for example 1) correct code writing by parsing the AST code tree and running tests 2) support for tasks in PHP, bring the PHP interpreter using WASM onto the page
- Deploy application
- Keep packages up to date
- Added the collection of statistics (tracker) for subsequent analysis of the passage of tasks by students
- Added collection and sending of page loading speed metrics (time to interactive, etc.)
- An application for demonstrating code to students on lectures and after them as a clear visual demo of step-by-step development ( https://htmlacademy.ru/demos/67#10) SPA (React + Redux)
Functionality: Allows to demonstrate the code and the result of its execution step by step. The result of the execution is displayed in an iframe (can be displayed as a page, as well as the result of code execution using the console from the 1st paragraph) Allows to edit the demo code on the fly, add new files to the step, new steps
Contribution:
- Wrote a new version of the application on the actual stack at that moment on react 16 on hooks
- Added support for multiple files (and file types) to the application in single demo step (file system) and wrote the bundling system of the entire demo step with this in mind (files in the demo step could be .js, .jsx, .ts, .php, .scss, .less). That is, all these files should have been correctly assembled right on the page in the browser, as if there was a webpack, and displayed as a page in an iframe. Everything was assembled using rollup (for jsx, ts, etc.) + PHP using WASM
- Rewrote the mechanism for storing and editing demo content: earlier, demos were created directly in the application and saved to the server. After that It became possible to create demos step by step from the sources (roughly speaking, a demo folder nested step folders, each with its own structure). Designed the structure of the demo sources, wrote the bundling mechanism (which was used in CI when deploying a demo repo to send the bundled demo to the server)
- Engine for auto-checking projects of intensive students: (Microservice Nodejs)
Functionality: A microservice on nodejs with a queue to run checks on student projects. The archive with the student's project arrives at the input, the task is queued, the necessary check is started, the result is sent further
Contribution:
- Application architecture design
- Development (queue, tasks, mechanism for unpacking input data and sending results)
- Support and deployment of a docker container with an application for sale
- Development of some checks by means of which designs are checked. For example, check that the user has correctly marked up the page, open his project with puppeteer in Chromium, take screenshots on different viewports, compare them, make a summary (difference percentage), send screenshots, the result is output
- Service for working with student repositories:
(Microservice on nodejs) Functionality: Creating, deleting, making changes in student repositories on GitHub. Deep integration with GitHub api
Contribution:
- Rewrote the old mechanism on nodejs
- Added work with AWS S3
- Application for mentors to evaluate student's project
(SPA React) Functionality: Step-by-step verification of criteria by the mentor, leaving comments, accepting the project
Contribution:
- Completely rewrote the outdated evaluation mechanism written in PHP to a React SPA application
- Designed and developed the application (including identical layout, but on grids)
- HTMLPunk New Year Promotion https://punk.htmlacademy.ru (https://season2-punk.htmlacademy.ru/)
SPA application, React Functionality: Cyberpunk style New Year's promotion, which included a store for students to buy various things for the points they earn in the game, arena (a mechanism where two students fight by solving a task), raids (many students solve tasks, you need to score a lot of points
Contribution:
- Complete design from scratch SPA application
- Full development of the entire business logic of the application, including work with the backend API and revitalization of the layout, which was made by layout developers
- Release, maintain, bug fixing
- Deploy