According to our students, projects are one of Hexlet's strongest features. These are special tasks that closely mimic real-world tasks, and they're done on your own computer, outside of Hexlet tasks. This article outlines how projects work, how long they take to complete, and why poorly written code doesn't work, and it also contains thoughts from our students about our projects.
Each project is a complete program, such as a console utility or full-fledged website. The projects are publicly available on GitHub and are included in our students' employment portfolios. Projects are reviewed by our tutors, so the codes are of high quality.
A little technical information: there are up to four projects in total in each profession. Each project is based on certain courses, but technically you can start without taking them. This will help you to assess the task's complexity and start taking the courses more seriously. The only restriction is that the projects must be taken in order.
Contents
Why are projects so important?
Independence
Courses do not provide all the tasks you will face as a future developer. Programmers are constantly searching online for the necessary libraries and documentation on them. Projects offer a lot of independent work. You'll have to think a lot, google and get into situations where you feel stuck.
This does not mean that students are left alone to do projects. You can ask questions on the website and chat about the project in our #hexlet-projects Slack channel as you go along.
Environment
Practicing on Hexlet allows you to focus on the task at hand without getting distracted by organizational and technical details. This is handy for beginners who are overwhelmed with a lot of information. But the longer this goes on, the more it gets in the way. It is impossible to learn how to develop full-fledged programs without independent and comprehensive coding. Programming is much more than just writing code - it's also interacting with the operating system, version control, tool configuration, testing, managing external libraries, and doing maintenance.
It is impossible to grasp all this theoretically, just by reading books or taking courses. You need real practice in a real environment. Projects are your chance to mess around with the proper setup of the development process tools and organization.
The Brain Games project is a good example. It requires installing packages, dependencies, eslint, makefile, working with git, creating proper names for commits and executable files, pre-publishing packages, writing instructions and modules, and performing import and export operations. But most importantly, refactoring. All these points are an indispensable part of a programmer's work, but you can only understand them through practice.
Many students discover how difficult it is for them to work outside of Hexlet at their knowledge level, and how long a simple installation of an interpreter or language compiler can take. Various problems arise with Windows, package managers, and even setting up a linter for the editor.
You have to be prepared for this. Infrastructure is an essential part of development. No one else will do it; the developer is alone responsible for quickly and efficiently setting up the environment, working with git, and interacting with the operating system. You have to be willing to do this at all times - it'll be difficult at first, and sometimes it'll be brutally difficult (and also long).
Refactoring
Projects work as follows: each of them is broken down into small steps of 3 to 11. Each step is a complete part of the project and may only concern a function's customization or implementation. It's important that you cannot go to the next step without finishing the previous one.
On the one hand, this approach helps reduce the stress of a large task that is difficult to start. On the other, it brings projects closer to real life. In the real world, projects that follow ready-made specifications and don't change mid-development are fantastic. This isn't the case for 'live' projects, not ones that you just tinker with at home (as happens for projects that aren't in demand). Real projects are like living organisms - they constantly change, taking on new requirements and obsolete code (legacy). Making changes in the project leads to either duplicating the code or rewriting the old code since it no longer fits the current requirements. This process is called refactoring.
Having several steps in a project encourages refactoring. This is a common scenario where a student decides to rewrite the existing code since it has become inconvenient to work with. It's not always easy to accept, but this approach makes it possible to distinguish bad solutions from good ones.
Tutors
You can complete a project either by yourself or with a tutor. For the former, it is checked automatically, which does not guarantee quality code. If with a tutor, they will take the project and evaluate its quality after all steps have been completed. Review is one of the most challenging and yet rewarding parts of a project. Let's talk about the tutor verification steps in more detail:
The review process looks like this:
- The tutor examines the project setup and code
- They leave comments on the website
- The student is notified and corrects according to the comments
- If a student doesn't understand something, he contacts the tutor in Slack to ask clarifying questions
- The student submits the project for review, and we go back to step one.
How many times can this go on? On average, three to four times, and on rare occasions two or three times (often due to cheating). Needless to say, the process of turning in a project can take a long time. As a rule, it takes longer to fix a project than to write it. Some students will think their code is perfect and become upset when they get comments on it. You have to be prepared for this, because nobody writes perfect code.
Sending a project in for review is always a source of anxiety. On the one hand, it feels like you considered everything and your code is perfect. On the other, you want the tutor to tear it down so that you gain valuable experience, which is essentially what ended up happening.
Why are there so many checks? A tutor's job at Hexlet is not just to point out flaws, but to bring the solution to an acceptable level. Everyone is different, and all projects turn out a little differently. This is normal - in programming, there are many ways to solve the same problem. Pointing out shortcomings isn't enough - the gap between "can read and understand" and "could implement" is huge.
Another reason is to do with what and how many notes the tutor gives during the review. Any project is divided into levels: for example, on the second project it's setup -> tests -> general logic -> output logic. The logic here is that if there are problems on the basic levels, there is no point in moving on to the next.
For example, if there is no linter configured, then you will most likely have to fix almost the entire code. If there are no tests, or they are written incorrectly, it means that development was not done through tests. In other words, further fixes will be made without being test-oriented. The same is true about the project's architecture - if it's built incorrectly, there's no sense parsing it in detail. In this case, most of the code will almost certainly be rewritten after the architecture is changed. This is why tutors never give out a complete list of comments. This is simply useless, allowing the student to relax and shift all responsibility for the result onto the reviewer.
The remarks themselves are rarely "do this" instructions. Tutors point out problems in the code, but do not suggest a way to solve them. This is important for forming the right attitude to the task - at work, no one will tell you how to do it.
Rewriting a project three or four times while working with a tutor is perfectly normal. This is where most of the growth happens, and therein lies the project's hidden power, which forces you to develop yourself. It's painful, but without pain there's no progress.
When I first took on a project, I thought: "This is easy, I solved problems like these on CodeBasics". It took me two days to write the whole project. Then my tutor wrote to me, and at first I did not understand their complaints - it still worked. I corrected it once, then again, and then I began to understand why I really needed to.
Despite all of the above, don't forget that tutors are people, and they may physically miss something and only see it the next time they check.
An interesting fact is that students who have actual experience working or studying on other platforms often take longer to complete projects. This is due to forming habits and approaches to code that are not useful to them (e.g., overengineering).
How are projects evaluated?
Working code is not the same as well-written code. While in real life the quality of code may not be very high (due to time constraints or developer level), projects are an entirely different story. It is an opportunity, in the absence of deadlines, to accomplish a task to a high level.
One of the key criteria for projects is simplicity and clarity. This includes a few different things:
- directory structure
- adherence to coding standards
- list text hereproject architecture
- naming of functions and variables
- simple solutions to simple problems
Despite the complexity of projects, they are quite small compared to real applications. Real code comes out to tens or hundreds of thousands of lines. In such a situation, it's incredibly important to build abstractions correctly and name variables, classes, functions, and other entities well. We read other people's code much more often than we write our own. This is why Hexlet projects place so much emphasis on things that are not directly related to the code's workability.
Conclusions
- Projects are not just something to pass. Be prepared to dive in and work hard. You can't finish it quickly
- No one writes perfect code. Even writing good code takes years of experience
- Not only must the code work, but it must also be easy to understand and maintain
<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="en" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">
<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="OdAPMkvGjVYC7zqI___ZqAagW8pL3sFQARw6uMLCrmBqFmIEaq22tmXlxWBNYe5pCgrVkYfA21yjmfCrjx5xuw";gon.locale="en";gon.language="en";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLScNwxM8rjQRRWqW5G6dn6-0NvLUblFemy7EvA9VsJ7Ov5wXqA";
//]]>
</script>
<meta charset="utf-8">
<title>The Anatomy of a Hexlet Project (Code) | Hexlet's blog</title>
<meta name="description" content="Informational article on the Hexlet's blog: The Anatomy of a Hexlet Project (category: Code). Experienced mentors, practice on simulators, open-source projects in your portfolio. Individual and group online learning at Hexlet.">
<link rel="canonical" href="https://hexlet.io/blog/posts/anatomy-of-hexlet-projects">
<meta property="og:title" content="The Anatomy of a Hexlet Project (Code) | Hexlet's blog">
<meta property="og:description" content="Informational article on the Hexlet's blog: The Anatomy of a Hexlet Project (category: Code). Experienced mentors, practice on simulators, open-source projects in your portfolio. Individual and group online learning at Hexlet.">
<meta property="og:image" content="https://hexlet.io/vite/assets/blog_post-7eTyeLLt.webp">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="HJ061l0ETu9aMekKyKEO0F4IvMznbhVluOFFc3GSDyNPW1fgfG91Dz07FuJ6PzkRUqIylytwD2kaZI9gPE7Q-A" />
<script src="/vite/assets/inertia-CgrHVkgd.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-C1cfMHAs.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-BXKrsWjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-Du9ljYPK.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/RootLayout-CUZzAr0T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DbDKujDz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DATLpQdV.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-BhY0AP_c.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-P1s4q94S.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-BsSGGK2I.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" />
<script src="/vite/assets/application-ZyVHkzwO.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-BokUl44d.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-gQnwoPhY.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-CB1F2-VC.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" media="screen" />
<!-- Google Tag Manager - deferred -->
<script>
// dataLayer stub сразу — пуши работают до загрузки скрипта
window.dataLayer = window.dataLayer || [];
// Сам скрипт — отложенно после load
window.addEventListener('load', function() {
setTimeout(function() {
dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
var j = document.createElement('script');
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
document.head.appendChild(j);
}, 1500);
});
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-WK88TH" style="display:none;visibility:hidden" width="0"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Hexlet logo" height="24" src="https://hexlet.io/vite/assets/logo_en_light-FS-yL6XB.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Menu" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
All courses
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Everything</div>
<div class="text-muted">8</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular categories</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_backend-development">Backend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_frontend-development">Frontend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Testing
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular courses</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Frontend Developer
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
About Hexlet
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">About company
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Blog
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.results">Results</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.career">Career</span>
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Testimonials
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.support">Support</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&promo_name=referal-program&promo_position=promo_position&promo_start=010724&promo_type=link" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.referal_program">Referal Program</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.certificates">Certificates</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.vacancies">Vacancies</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.teams">Teams</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.college">College</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.private_school">Private School</span>
</span></li>
</ul>
</li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Switch theme" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Sign up</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://hexlet.io/session/new" role="button"><span>Sign in</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">
</div>
<main class="mb-6 min-vh-100 h-100">
<link rel="preload" as="image" href="/vite/assets/blog_post-7eTyeLLt.webp"/><link rel="preload" as="image" href="/vite/assets/development-BVihs_d5.png"/><div id="app" data-page="{"component":"web/blog/posts/show","props":{"errors":{},"locale":"en","language":"en","httpsHost":"https://hexlet.io","host":"hexlet.io","colorScheme":"light","auth":{"user":{"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false}},"cloudflareTurnstileSiteKey":"0x4AAAAAAA15KmeFXzd2H0Xo","vkIdClientId":"51586979","yandexIdClientId":null,"formAuthToken":"LNDPAF7Fk_5yZJUwwYcD03mN9wi0uFiRxTEHkeRNhvB_FqI2f66oHhVuathzGTQSdSd5U3imQp1ntM2CqZFZKw","post":{"model_name":"BlogPost","category":{"id":9,"name":"Code","slug":"code","state":"published","created_at":"2017-01-19T10:57:24.051Z"},"creator":{"public_name":"Kirill Mokevnin","id":1,"is_tutor":false},"tags":[],"id":1865,"title":"The Anatomy of a Hexlet Project","slug":"anatomy-of-hexlet-projects","state":"published","summary":"According to our students, projects are one of Hexlet's strongest features. These are special tasks that closely mimic real-world tasks, and they're done on your own computer, outside of Hexlet tasks.\r\n \r\nThis article outlines how projects work, how long they take to complete, and why poorly written code doesn't work, and it also contains thoughts from our students about our projects.","votes_count":0,"created_at":"2022-06-04T11:25:54.102Z","published_at":"2022-06-04T12:03:02.112Z","body":"**[According to our students](https://hexlet.io/testimonials), projects are one of Hexlet's strongest features. These are special tasks that closely mimic real-world tasks, and they're done on your own computer, outside of Hexlet tasks. This article outlines how projects work, how long they take to complete, and why poorly written code doesn't work, and it also contains thoughts from our students about our projects.**\r\n\r\nEach project is a complete program, such as a console utility or full-fledged website. The projects are publicly available on GitHub and are included in our students' employment portfolios. Projects are reviewed by our tutors, so the codes are of high quality.\r\n\r\nA little technical information: there are up to four projects in total in each profession. Each project is based on certain courses, but technically you can start without taking them. This will help you to assess the task's complexity and start taking the courses more seriously. The only restriction is that the projects must be taken in order.\r\n\r\n## Contents\n\n## Why are projects so important?\r\n\r\n### Independence\r\n\r\nCourses do not provide all the tasks you will face as a future developer. Programmers are constantly searching online for the necessary libraries and documentation on them. Projects offer a lot of independent work. You'll have to think a lot, google and get into situations where you feel stuck.\r\n\r\nThis does not mean that students are left alone to do projects. You can ask questions on the website and chat about the project in our #hexlet-projects Slack channel as you go along.\r\n\r\n### Environment\r\n\r\nPracticing on Hexlet allows you to focus on the task at hand without getting distracted by organizational and technical details. This is handy for beginners who are overwhelmed with a lot of information. But the longer this goes on, the more it gets in the way. It is impossible to learn how to develop full-fledged programs without independent and comprehensive coding. Programming is much more than just writing code - it's also interacting with the operating system, version control, tool configuration, testing, managing external libraries, and doing maintenance.\r\n\r\nIt is impossible to grasp all this theoretically, just by reading books or taking courses. You need real practice in a real environment. Projects are your chance to mess around with the proper setup of the development process tools and organization.\r\n\r\n\r\n\r\n_The Brain Games project is a good example. It requires installing packages, dependencies, eslint, makefile, working with git, creating proper names for commits and executable files, pre-publishing packages, writing instructions and modules, and performing import and export operations. But most importantly, refactoring. All these points are an indispensable part of a programmer's work, but you can only understand them through practice._\r\n\r\n\r\n\r\nMany students discover how difficult it is for them to work outside of Hexlet at their knowledge level, and how long a simple installation of an interpreter or language compiler can take. Various problems arise with Windows, package managers, and even setting up a linter for the editor.\r\n\r\nYou have to be prepared for this. Infrastructure is an essential part of development. No one else will do it; the developer is alone responsible for quickly and efficiently setting up the environment, working with git, and interacting with the operating system. You have to be willing to do this at all times - it'll be difficult at first, and sometimes it'll be brutally difficult (and also long).\r\n\r\n### Refactoring\r\n\r\nProjects work as follows: each of them is broken down into small steps of 3 to 11. Each step is a complete part of the project and may only concern a function's customization or implementation. It's important that you cannot go to the next step without finishing the previous one.\r\n\r\nOn the one hand, this approach helps reduce the stress of a large task that is difficult to start. On the other, it brings projects closer to real life. In the real world, projects that follow ready-made specifications and don't change mid-development are fantastic. This isn't the case for 'live' projects, not ones that you just tinker with at home (as happens for projects that aren't in demand). Real projects are like living organisms - they constantly change, taking on new requirements and obsolete code (legacy). Making changes in the project leads to either duplicating the code or rewriting the old code since it no longer fits the current requirements. This process is called refactoring.\r\n\r\nHaving several steps in a project encourages refactoring. This is a common scenario where a student decides to rewrite the existing code since it has become inconvenient to work with. It's not always easy to accept, but this approach makes it possible to distinguish bad solutions from good ones.\r\n\r\n### Tutors\r\n\r\nYou can complete a project either by yourself or with a tutor. For the former, it is checked automatically, which does not guarantee quality code. If with a tutor, they will take the project and evaluate its quality after all steps have been completed. Review is one of the most challenging and yet rewarding parts of a project. Let's talk about the tutor verification steps in more detail:\r\n\r\nThe review process looks like this:\r\n\r\n1. The tutor examines the project setup and code\r\n2. They leave comments on the website\r\n3. The student is notified and corrects according to the comments\r\n4. If a student doesn't understand something, he contacts the tutor in [Slack](https://slack.hexlet.io/) to ask clarifying questions\r\n5. The student submits the project for review, and we go back to step one.\r\n\r\nHow many times can this go on? On average, three to four times, and on rare occasions two or three times (often due to cheating). Needless to say, the process of turning in a project can take a long time. As a rule, it takes longer to fix a project than to write it. Some students will think their code is perfect and become upset when they get comments on it. You have to be prepared for this, because nobody writes perfect code.\r\n\r\n\r\n\r\n_Sending a project in for review is always a source of anxiety. On the one hand, it feels like you considered everything and your code is perfect. On the other, you want the tutor to tear it down so that you gain valuable experience, which is essentially what ended up happening._\r\n\r\n\r\n\r\nWhy are there so many checks? A tutor's job at Hexlet is not just to point out flaws, but to bring the solution to an acceptable level. Everyone is different, and all projects turn out a little differently. This is normal - in programming, there are many ways to solve the same problem. Pointing out shortcomings isn't enough - the gap between \"can read and understand\" and \"could implement\" is huge.\r\n\r\nAnother reason is to do with what and how many notes the tutor gives during the review. Any project is divided into levels: for example, on the second project it's setup -> tests -> general logic -> output logic. The logic here is that if there are problems on the basic levels, there is no point in moving on to the next. \r\n\r\nFor example, if there is no linter configured, then you will most likely have to fix almost the entire code. If there are no tests, or they are written incorrectly, it means that development was not done through tests. In other words, further fixes will be made without being test-oriented. The same is true about the project's architecture - if it's built incorrectly, there's no sense parsing it in detail. In this case, most of the code will almost certainly be rewritten after the architecture is changed. This is why tutors never give out a complete list of comments. This is simply useless, allowing the student to relax and shift all responsibility for the result onto the reviewer.\r\n\r\nThe remarks themselves are rarely \"do this\" instructions. Tutors point out problems in the code, but do not suggest a way to solve them. This is important for forming the right attitude to the task - at work, no one will tell you how to do it.\r\n\r\nRewriting a project three or four times while working with a tutor is perfectly normal. This is where most of the growth happens, and therein lies the project's hidden power, which forces you to develop yourself. It's painful, but without pain there's no progress.\r\n\r\n\r\n\r\n_When I first took on a project, I thought: \"This is easy, I solved problems like these on CodeBasics\". It took me two days to write the whole project. Then my tutor wrote to me, and at first I did not understand their complaints - it still worked. I corrected it once, then again, and then I began to understand why I really needed to._\r\n\r\n\r\n\r\nDespite all of the above, don't forget that tutors are people, and they may physically miss something and only see it the next time they check.\r\n\r\nAn interesting fact is that students who have actual experience working or studying on other platforms often take longer to complete projects. This is due to forming habits and approaches to code that are not useful to them (e.g., overengineering).\r\n\r\n## How are projects evaluated?\r\n\r\nWorking code is not the same as well-written code. While in real life the quality of code may not be very high (due to time constraints or developer level), projects are an entirely different story. It is an opportunity, in the absence of deadlines, to accomplish a task to a high level.\r\n\r\nOne of the key criteria for projects is simplicity and clarity. This includes a few different things:\r\n\r\n- directory structure\r\n- adherence to coding standards\r\n- list text hereproject architecture\r\n- naming of functions and variables\r\n- simple solutions to simple problems\r\n\r\nDespite the complexity of projects, they are quite small compared to real applications. Real code comes out to tens or hundreds of thousands of lines. In such a situation, it's incredibly important to build abstractions correctly and name variables, classes, functions, and other entities well. We read other people's code much more often than we write our own. This is why Hexlet projects place so much emphasis on things that are not directly related to the code's workability.\r\n\r\n## Conclusions\r\n\r\n* Projects are not just something to pass. Be prepared to dive in and work hard. You can't finish it quickly\r\n* No one writes perfect code. Even writing good code takes years of experience\r\n* Not only must the code work, but it must also be easy to understand and maintain","reading_time":6,"url":"https://en.hexlet.io/blog/posts/anatomy-of-hexlet-projects","cover_thumb_variant":null,"cover_list_variant":"/vite/assets/blog_post-7eTyeLLt.webp","cover_main_variant":"/vite/assets/blog_post-7eTyeLLt.webp","related_stacks_count":5},"relatedPosts":[{"model_name":"BlogPost","id":1828,"title":"Code Complete: States Within Modules","slug":"code-complete-states-within-modules","summary":"You can write any code inside files (and outside of definitions) in scripting languages like JavaScript. This can be defining and calling functions, or declaring and changing variables. This freedom simplifies development by allowing you to create one-time scripts for simple or infrequent tasks. On the other hand, careless development leads to flaws that make the code and maintaining it significantly more difficult. They're so common in production code that we need to address them separately.","created_at":"2022-05-11T12:13:23.308Z","published_at":"2022-07-14T19:31:09.509Z","cover_list_variant":"/vite/assets/blog_post-7eTyeLLt.webp"},{"model_name":"BlogPost","id":1831,"title":"Code Complete: Designing Functions","slug":"code-complete-designing-functions","summary":"Creating functions is easy, creating functions properly is harder. Poorly designed functions frequently have to be rewritten, it's difficult to adapt them to new requirements, and they don't get tested properly. In this article, we'll look at key methods for sharing responsibilities, building chains of functions, and designing function signatures. The article's content is based on common mistakes made by Hexlet students in their projects.","created_at":"2022-05-12T15:38:04.033Z","published_at":"2022-06-07T14:45:24.417Z","cover_list_variant":"/vite/assets/blog_post-7eTyeLLt.webp"},{"model_name":"BlogPost","id":1859,"title":"Code Complete: Descending and Ascending Order in Function Design","slug":"code-complete-descending-and-ascending-order-in-function-design","summary":"There are two approaches to writing code: top-down and bottom-up (**descending** and **ascending**). With the top-down approach, high-level logic is implemented first, followed by the details. With the bottom-up approach, everything is reversed; the details come first, followed by the general logic.\r\n \r\nThese approaches are frequently contrasted in books. It's generally considered that if you choose one approach, then you have to exclude the other one. However, this is not the case. In the article, I'll tell you why only going down one path can cause problems.","created_at":"2022-06-01T07:32:16.603Z","published_at":"2022-06-01T07:39:28.518Z","cover_list_variant":"/vite/assets/blog_post-7eTyeLLt.webp"}],"category":{"id":9,"name":"Code","slug":"code","state":"published","created_at":"2017-01-19T10:57:24.051Z"},"mainStackCategory":{"id":20,"name":"JavaScript","slug":"javascript","short_name":"JavaScript","order":30,"state":"published","category_slug":"courses_javascript"},"categories":[{"id":16,"name":"Success stories","slug":"success","state":"published","created_at":"2022-03-25T13:12:03.087Z"},{"id":17,"name":"Student diary","slug":"student-diary","state":"published","created_at":"2022-03-25T13:12:41.336Z"},{"id":9,"name":"Code","slug":"code","state":"published","created_at":"2017-01-19T10:57:24.051Z"},{"id":8,"name":"Motivation","slug":"motivation","state":"published","created_at":"2017-01-19T10:56:28.412Z"}],"relatedLandings":[{"stack":{"id":15,"slug":"frontend","title":"Frontend Developer","audience":"for_beginners","start_type":"anytime","pricing_model":"purchase","priority":"low","kind":"profession","state":"published","stack_state":"finished","order":1,"duration_in_months":10},"id":22,"slug":"frontend","title":"Frontend Developer","subtitle":"","subtitle_for_lists":"","locale":"en","current":true,"duration_in_months_text":"10 months","stack_slug":"frontend","price_text":"from $49","duration_text":"10 months","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTMsInB1ciI6ImJsb2JfaWQifX0=--f1948fb0c5a45a6d76671a1a32b8cf6f0b53ee57/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Software%20code%20testing-cuate.png"},{"stack":{"id":66,"slug":"python","title":"Python Developer","audience":"for_beginners","start_type":"anytime","pricing_model":"subscription","priority":"low","kind":"profession","state":"unpublished","stack_state":"not_finished","order":null,"duration_in_months":10},"id":119,"slug":"python","title":"Python Developer","subtitle":"","subtitle_for_lists":null,"locale":"en","current":true,"duration_in_months_text":"10 months","stack_slug":"python","price_text":"from $49","duration_text":"10 months","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzUzMSwicHVyIjoiYmxvYl9pZCJ9fQ==--e7c47f31588724cdfecb95811018cb3a9412a51d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/python2.png"},{"stack":{"id":137,"slug":"js-react-development","title":"React","audience":"for_programmers","start_type":"anytime","pricing_model":"subscription","priority":"high","kind":"track","state":"published","stack_state":"finished","order":null,"duration_in_months":2},"id":234,"slug":"js-react-development","title":"React","subtitle":"Skill in building fast, user-friendly interfaces that boosts chances of landing exciting roles at top tech companies","subtitle_for_lists":"","locale":"en","current":true,"duration_in_months_text":"2 months","stack_slug":"js-react-development","price_text":"from $49","duration_text":"2 months","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTAsInB1ciI6ImJsb2JfaWQifX0=--4c31372fe7c51ddbc0ef0d54fe47eaba88a2b04b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programmer-rafiki.png"},{"stack":{"id":138,"slug":"http-api","title":"HTTP API","audience":"for_programmers","start_type":"anytime","pricing_model":"subscription","priority":"medium","kind":"track","state":"published","stack_state":"finished","order":null,"duration_in_months":1},"id":235,"slug":"http-api","title":"HTTP API","subtitle":"API skills for development, testing, and integration to boost chances of moving into backend development","subtitle_for_lists":"","locale":"en","current":true,"duration_in_months_text":"1 month","stack_slug":"http-api","price_text":"from $49","duration_text":"1 month","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTYsInB1ciI6ImJsb2JfaWQifX0=--2d6024687d0f6c574953b46308b68acdb82ac5b1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Application%20programming%20interface-bro.png"},{"stack":{"id":61,"slug":"layout-designer","title":"Layout Designer","audience":"for_beginners","start_type":"anytime","pricing_model":"subscription","priority":"low","kind":"profession","state":"unpublished","stack_state":"not_finished","order":2,"duration_in_months":5},"id":110,"slug":"layout-designer","title":"Layout Designer","subtitle":"","subtitle_for_lists":null,"locale":"en","current":true,"duration_in_months_text":"5 months","stack_slug":"layout-designer","price_text":"from $49","duration_text":"5 months","cover_list_variant":null}]},"url":"/blog/posts/anatomy-of-hexlet-projects","version":"1656487db0d1dd5f33634fe1070e57e55135cbeb","encryptHistory":false,"clearHistory":false}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}
:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}
:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","author":"Kirill Mokevnin","name":"The Anatomy of a Hexlet Project","datePublished":"2022-06-04T12:03:02.112Z","headline":"According to our students, projects are one of Hexlet's strongest features. These are special tasks that closely mimic real-world tasks, and they're done on your own computer, outside of Hexlet tasks.\r\n \r\nThis article outlines how projects work, how long they take to complete, and why poorly written code doesn't work, and it also contains thoughts from our students about our projects.","image":"/vite/assets/blog_post-7eTyeLLt.webp","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}]}</script><div style="--container-size:var(--container-size-lg);margin-top:var(--mantine-spacing-xl);height:100%" class="m_7485cace mantine-Container-root" data-size="lg" data-strategy="block"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"position":1,"@type":"ListItem","item":{"@id":"/blog","name":"Hexlet's blog"}},{"position":2,"@type":"ListItem","item":{"@id":"/blog/categories/code","name":"Code"}},{"position":3,"@type":"ListItem","item":{"@id":"/blog/posts/anatomy-of-hexlet-projects","name":"The Anatomy of a Hexlet Project"}}]}</script><div style="margin-bottom:var(--mantine-spacing-xs)" class="m_8b3717df mantine-Breadcrumbs-root"><a style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:inherit" class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="sm" data-underline="hover" href="/"><div style="color:inherit" class="m_4451eb3a mantine-Center-root"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-home-link "><path d="M20.085 11.085l-8.085 -8.085l-9 9h2v7a2 2 0 0 0 2 2h4.5"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 1.807 1.143"></path><path d="M20 21a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M20 16a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M15 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M21 16l-5 3l5 2"></path></svg></div></a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><a style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:inherit" class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="sm" data-underline="hover" href="/blog">Hexlet's blog</a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><a style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:inherit" class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="sm" data-underline="hover" href="/blog/categories/code">Code</a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root" data-size="sm">The Anatomy of a Hexlet Project</p></div><style data-mantine-styles="inline">.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}@media(min-width: 36em){.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}}</style><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root __m__-_R_eub_"><style data-mantine-styles="inline">.__m__-_R_deub_{width:100%;}@media(min-width: 36em){.__m__-_R_deub_{width:70%;}}@media(min-width: 75em){.__m__-_R_deub_{width:75%;}}</style><div class="__m__-_R_deub_"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="m_8a5d1357 mantine-Title-root" data-order="1">The Anatomy of a Hexlet Project</h1></div></div></div><style data-mantine-styles="inline">.__m__-_R_2iub_{--grid-gutter:var(--mantine-spacing-xl);}</style><div class="m_410352e9 mantine-Grid-root __m__-_R_2iub_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:83.33333333333334%;--col-max-width:83.33333333333334%;}}@media(min-width: 62em){.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_dmiub_"><div style="--stack-gap:var(--mantine-spacing-md);--stack-align:stretch;--stack-justify:flex-start;margin-bottom:var(--mantine-spacing-xl)" class="m_6d731127 mantine-Stack-root"><div class=""><div style="--group-gap:calc(0.625rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-sm);color:var(--mantine-color-gray-text)" class="m_4081bf90 mantine-Group-root"><div style="--group-gap:calc(0.1875rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-inline-end:var(--mantine-spacing-lg)" class="m_4081bf90 mantine-Group-root">June 4, 2022</div><div style="--group-gap:calc(0.1875rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-clock "><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 7v5l3 3"></path></svg></div>6 minutes</div><div style="--group-gap:calc(0.1875rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-thumb-up "><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path></svg></div></div></div><div style="--ar-ratio:2" class="m_71ac47fc mantine-AspectRatio-root"><img style="--image-radius:var(--mantine-radius-md);--image-object-fit:cover;width:100%;height:100%" class="m_9e117634 mantine-Image-root" src="/vite/assets/blog_post-7eTyeLLt.webp" alt="The Anatomy of a Hexlet Project"/></div></div><div style="margin-bottom:var(--mantine-spacing-xl)" class="m_d08caa0 mantine-Typography-root"><p><strong><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://hexlet.io/testimonials" rel="noopener noreferrer" target="_blank">According to our students</a>, projects are one of Hexlet's strongest features. These are special tasks that closely mimic real-world tasks, and they're done on your own computer, outside of Hexlet tasks. This article outlines how projects work, how long they take to complete, and why poorly written code doesn't work, and it also contains thoughts from our students about our projects.</strong></p>
<p>Each project is a complete program, such as a console utility or full-fledged website. The projects are publicly available on GitHub and are included in our students' employment portfolios. Projects are reviewed by our tutors, so the codes are of high quality.</p>
<p>A little technical information: there are up to four projects in total in each profession. Each project is based on certain courses, but technically you can start without taking them. This will help you to assess the task's complexity and start taking the courses more seriously. The only restriction is that the projects must be taken in order.</p>
<h2 id="heading-2-1">Contents</h2>
<ul>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-2">Why are projects so important?</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-7">How are projects evaluated?</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-8">Conclusions</a></li>
</ul>
<h2 id="heading-2-2">Why are projects so important?</h2>
<h3 id="heading-3-3">Independence</h3>
<p>Courses do not provide all the tasks you will face as a future developer. Programmers are constantly searching online for the necessary libraries and documentation on them. Projects offer a lot of independent work. You'll have to think a lot, google and get into situations where you feel stuck.</p>
<p>This does not mean that students are left alone to do projects. You can ask questions on the website and chat about the project in our #hexlet-projects Slack channel as you go along.</p>
<h3 id="heading-3-4">Environment</h3>
<p>Practicing on Hexlet allows you to focus on the task at hand without getting distracted by organizational and technical details. This is handy for beginners who are overwhelmed with a lot of information. But the longer this goes on, the more it gets in the way. It is impossible to learn how to develop full-fledged programs without independent and comprehensive coding. Programming is much more than just writing code - it's also interacting with the operating system, version control, tool configuration, testing, managing external libraries, and doing maintenance.</p>
<p>It is impossible to grasp all this theoretically, just by reading books or taking courses. You need real practice in a real environment. Projects are your chance to mess around with the proper setup of the development process tools and organization.</p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://i.imgur.com/Wz3A4eE.png" alt="" title="enter image title here" loading="lazy"/></p>
<p><em>The Brain Games project is a good example. It requires installing packages, dependencies, eslint, makefile, working with git, creating proper names for commits and executable files, pre-publishing packages, writing instructions and modules, and performing import and export operations. But most importantly, refactoring. All these points are an indispensable part of a programmer's work, but you can only understand them through practice.</em></p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://i.imgur.com/DIIj6Qo.png" alt="" title="enter image title here" loading="lazy"/></p>
<p>Many students discover how difficult it is for them to work outside of Hexlet at their knowledge level, and how long a simple installation of an interpreter or language compiler can take. Various problems arise with Windows, package managers, and even setting up a linter for the editor.</p>
<p>You have to be prepared for this. Infrastructure is an essential part of development. No one else will do it; the developer is alone responsible for quickly and efficiently setting up the environment, working with git, and interacting with the operating system. You have to be willing to do this at all times - it'll be difficult at first, and sometimes it'll be brutally difficult (and also long).</p>
<h3 id="heading-3-5">Refactoring</h3>
<p>Projects work as follows: each of them is broken down into small steps of 3 to 11. Each step is a complete part of the project and may only concern a function's customization or implementation. It's important that you cannot go to the next step without finishing the previous one.</p>
<p>On the one hand, this approach helps reduce the stress of a large task that is difficult to start. On the other, it brings projects closer to real life. In the real world, projects that follow ready-made specifications and don't change mid-development are fantastic. This isn't the case for 'live' projects, not ones that you just tinker with at home (as happens for projects that aren't in demand). Real projects are like living organisms - they constantly change, taking on new requirements and obsolete code (legacy). Making changes in the project leads to either duplicating the code or rewriting the old code since it no longer fits the current requirements. This process is called refactoring.</p>
<p>Having several steps in a project encourages refactoring. This is a common scenario where a student decides to rewrite the existing code since it has become inconvenient to work with. It's not always easy to accept, but this approach makes it possible to distinguish bad solutions from good ones.</p>
<h3 id="heading-3-6">Tutors</h3>
<p>You can complete a project either by yourself or with a tutor. For the former, it is checked automatically, which does not guarantee quality code. If with a tutor, they will take the project and evaluate its quality after all steps have been completed. Review is one of the most challenging and yet rewarding parts of a project. Let's talk about the tutor verification steps in more detail:</p>
<p>The review process looks like this:</p>
<ol>
<li>The tutor examines the project setup and code</li>
<li>They leave comments on the website</li>
<li>The student is notified and corrects according to the comments</li>
<li>If a student doesn't understand something, he contacts the tutor in <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://slack.hexlet.io/" rel="noopener noreferrer" target="_blank">Slack</a> to ask clarifying questions</li>
<li>The student submits the project for review, and we go back to step one.</li>
</ol>
<p>How many times can this go on? On average, three to four times, and on rare occasions two or three times (often due to cheating). Needless to say, the process of turning in a project can take a long time. As a rule, it takes longer to fix a project than to write it. Some students will think their code is perfect and become upset when they get comments on it. You have to be prepared for this, because nobody writes perfect code.</p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://i.imgur.com/Wz3A4eE.png" alt="" title="enter image title here" loading="lazy"/></p>
<p><em>Sending a project in for review is always a source of anxiety. On the one hand, it feels like you considered everything and your code is perfect. On the other, you want the tutor to tear it down so that you gain valuable experience, which is essentially what ended up happening.</em></p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://i.imgur.com/DIIj6Qo.png" alt="" title="enter image title here" loading="lazy"/></p>
<p>Why are there so many checks? A tutor's job at Hexlet is not just to point out flaws, but to bring the solution to an acceptable level. Everyone is different, and all projects turn out a little differently. This is normal - in programming, there are many ways to solve the same problem. Pointing out shortcomings isn't enough - the gap between "can read and understand" and "could implement" is huge.</p>
<p>Another reason is to do with what and how many notes the tutor gives during the review. Any project is divided into levels: for example, on the second project it's setup -> tests -> general logic -> output logic. The logic here is that if there are problems on the basic levels, there is no point in moving on to the next.</p>
<p>For example, if there is no linter configured, then you will most likely have to fix almost the entire code. If there are no tests, or they are written incorrectly, it means that development was not done through tests. In other words, further fixes will be made without being test-oriented. The same is true about the project's architecture - if it's built incorrectly, there's no sense parsing it in detail. In this case, most of the code will almost certainly be rewritten after the architecture is changed. This is why tutors never give out a complete list of comments. This is simply useless, allowing the student to relax and shift all responsibility for the result onto the reviewer.</p>
<p>The remarks themselves are rarely "do this" instructions. Tutors point out problems in the code, but do not suggest a way to solve them. This is important for forming the right attitude to the task - at work, no one will tell you how to do it.</p>
<p>Rewriting a project three or four times while working with a tutor is perfectly normal. This is where most of the growth happens, and therein lies the project's hidden power, which forces you to develop yourself. It's painful, but without pain there's no progress.</p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://i.imgur.com/Wz3A4eE.png" alt="" title="enter image title here" loading="lazy"/></p>
<p><em>When I first took on a project, I thought: "This is easy, I solved problems like these on CodeBasics". It took me two days to write the whole project. Then my tutor wrote to me, and at first I did not understand their complaints - it still worked. I corrected it once, then again, and then I began to understand why I really needed to.</em></p>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://i.imgur.com/DIIj6Qo.png" alt="" title="enter image title here" loading="lazy"/></p>
<p>Despite all of the above, don't forget that tutors are people, and they may physically miss something and only see it the next time they check.</p>
<p>An interesting fact is that students who have actual experience working or studying on other platforms often take longer to complete projects. This is due to forming habits and approaches to code that are not useful to them (e.g., overengineering).</p>
<h2 id="heading-2-7">How are projects evaluated?</h2>
<p>Working code is not the same as well-written code. While in real life the quality of code may not be very high (due to time constraints or developer level), projects are an entirely different story. It is an opportunity, in the absence of deadlines, to accomplish a task to a high level.</p>
<p>One of the key criteria for projects is simplicity and clarity. This includes a few different things:</p>
<ul>
<li>directory structure</li>
<li>adherence to coding standards</li>
<li>list text hereproject architecture</li>
<li>naming of functions and variables</li>
<li>simple solutions to simple problems</li>
</ul>
<p>Despite the complexity of projects, they are quite small compared to real applications. Real code comes out to tens or hundreds of thousands of lines. In such a situation, it's incredibly important to build abstractions correctly and name variables, classes, functions, and other entities well. We read other people's code much more often than we write our own. This is why Hexlet projects place so much emphasis on things that are not directly related to the code's workability.</p>
<h2 id="heading-2-8">Conclusions</h2>
<ul>
<li>Projects are not just something to pass. Be prepared to dive in and work hard. You can't finish it quickly</li>
<li>No one writes perfect code. Even writing good code takes years of experience</li>
<li>Not only must the code work, but it must also be easy to understand and maintain</li>
</ul></div><div class=""><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-lg)" class="m_4081bf90 mantine-Group-root"><div class="m_4451eb3a mantine-Center-root" data-inline="true"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-user "><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg></div><p style="margin-inline-end:var(--mantine-spacing-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Kirill Mokevnin</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">4 years ago</p></div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_5dirddmiub_"><button style="display:inline-flex" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" type="button"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-thumb-up "><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path></svg></div></button><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">0</p></div></div></div><div style="background-color:var(--mantine-color-indigo-light);border:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding:var(--mantine-spacing-xl)" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Read more:</p><ul style="margin-inline-start:var(--mantine-spacing-lg)" class="m_abbac491 mantine-List-root"><li style="margin-bottom:var(--mantine-spacing-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><a style="color:inherit" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/code-complete-states-within-modules">Code Complete: States Within Modules</a></span></div></li><li style="margin-bottom:var(--mantine-spacing-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><a style="color:inherit" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/code-complete-designing-functions">Code Complete: Designing Functions</a></span></div></li><li style="margin-bottom:var(--mantine-spacing-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><a style="color:inherit" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/code-complete-descending-and-ascending-order-in-function-design">Code Complete: Descending and Ascending Order in Function Design</a></span></div></li></ul></div><div style="margin-block:var(--mantine-spacing-xl)" class="m_3eebeb36 mantine-Divider-root" data-orientation="horizontal" role="separator"></div></div><div></div></div><style data-mantine-styles="inline">.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:16.666666666666668%;--col-max-width:16.666666666666668%;}}@media(min-width: 62em){.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_lmiub_ mantine-visible-from-md"><div style="background-color:var(--mantine-color-indigo-light);border:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-bottom:var(--mantine-spacing-xl);padding:var(--mantine-spacing-xl);width:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div style="margin-bottom:var(--mantine-spacing-md)" class="m_4451eb3a mantine-Center-root" data-inline="true"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Categories</p></div><ul class="m_abbac491 mantine-List-root"><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Success stories">Success stories</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Student diary">Student diary</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Code">Code</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Motivation">Motivation</button></span></div></li></ul></div><div style="justify-content:end;margin-top:0rem;position:sticky;top:calc(5rem * var(--mantine-scale))" class="m_8bffd616 mantine-Flex-root __m__-_R_5dlmiub_"><div tabindex="0" style="cursor:pointer"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses_javascript?promo_name=program_category&promo_position=blog_post&promo_creative=card&promo_type=card"><div style="background-color:var(--mantine-color-default);border:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);padding-inline:var(--mantine-spacing-xl);padding-top:var(--mantine-spacing-xl);padding-bottom:var(--mantine-spacing-xs);width:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div class="m_4451eb3a mantine-Center-root" data-inline="true"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">JavaScript</p></div><img class="m_9e117634 mantine-Image-root" src="/vite/assets/development-BVihs_d5.png"/><p style="margin-bottom:var(--mantine-spacing-xs);text-align:right" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Explore →</p></div></a></div></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">About Hexlet</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">About us</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io/category/4316" data-target="_blank" role="button">Help</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Site Map</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Learn</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend-development">Backend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_frontend-development">Frontend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_python">Python
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Testing
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_beginners">Popular Courses For Beginners</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Frontend Developer</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_advanced">Popular Courses For Advanced</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/web-development-free">Fundamentals of Web Development</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-development">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/css-animation">CSS Animation</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/http-api">HTTP API</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/layout-designer-positioning">Position CSS</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/cli-basics">Command line basics</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/git-basics-free">Git fundamentals</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Facebook" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.facebook.com/hexlethq"><span class="bi bi-facebook"></span>
</a></li>
<li class="me-3">
<a aria-label="Instagram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.instagram.com/hello_hexlet/"><span class="bi bi-instagram"></span>
</a></li>
<li>
<a aria-label="Twitter" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://twitter.com/Hexlet_IO"><span class="bi bi-twitter-x"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:%2B7%20717%20272%2076%2070">+7 717 272 76 70</a>
<span class="d-block opacity-50 small">free call</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Legal</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer"><span class="translation_missing" title="translation missing: en.layouts.footer_content.offer">Offer</span></a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts"><span class="translation_missing" title="translation missing: en.layouts.footer_content.contacts">Contacts</span></a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>TOO "Hexlet"</div>
<div>The Republic of Kazakhstan, Almaty</div>
<div>Auezova St., 14A</div>
<div>BIN 230340043714
</div>
</div>
</div>
</div>
</footer>
<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-CIOaBlj-.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DejNWqwz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-DZwEN4Zo.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-CJocDKTE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-DH3_MBnL.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-Cj65YiRw.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-Csl7vw8x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-DeAQqnBE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-CN66HKVH.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-DQgTDFJJ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-BcxwEZ7X.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/prop-types-DGBR76ns.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>