Create frontend study guide

interview-study-guide/README.md

@@ -1,37 +1,6 @@
 ## Software engineer study guide
 
-### Algorithm
-The algorithm session is based on a practical coding problem, feel free to choose a programming language, and IDE you have the domain.
-At this session it is expected that you interact with the interviewer as much as you can, exposing how you think and what steps are being taken to resolve the problem.
-It's not expected to create the best solution in the first moment, we expect you to know the limitations of the solution and what could be improved. So stay comfortable with the basic data structures as time and space complexity.
+Welcome to Wellhub's Software Engineer guide. Here you will find information on how to prepare for your interview:
 
-Study guide:
-- Cracking the Coding Interview - [link](https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850)
-- Hackerrank - [link](https://www.hackerrank.com/)
-
-### Architecture Design
-Whiteboard session, at this moment we will design the architecture of a common business that makes part of our daily life.
-So don't worry, for sure you will be familiar with the problem, and again, feel comfortable talking with the interviewers as much as you can.
-Usually, we do this section using the [Draw IO](http://draw.io/) or [Google Jamboard](https://jamboard.google.com/) tool.
-
-Study guide: https://github.com/donnemartin/system-design-primer
-
-### Helpful content of best practices of software development
-- Pragmatic Programmer, The: From Journeyman to Master - [link](https://www.amazon.com/-/pt/Pragmatic-Programmer-Journeyman-Master-ebook-dp-B003GCTQAE/dp/B003GCTQAE)
-- DDD - Martin Fowler Blog - [link](https://martinfowler.com/tags/domain%20driven%20design.html)
-- Domain-Driven Design: Tackling Complexity in the Heart of Software - [link](https://www.amazon.com/-/pt/Evans-Eric-ebook/dp/B00794TAUG/)
-- Building Microservices: Designing Fine-Grained Systems - [link](https://www.amazon.com/-/pt/Sam-Newman-ebook/dp/B00T3N7XB4/)
-- Clean Code: A Handbook of Agile Software Craftsmanship - [link](https://www.amazon.com/-/pt/Clean-Code-Handbook-Software-Craftsmanship-ebook-dp-B001GSTOAM/dp/B001GSTOAM/)
-- APIs - Martin Fowler Blog - [link](https://martinfowler.com/articles/richardsonMaturityModel.html)
-- Testing - Martin Fowler Blog- [link](https://martinfowler.com/testing/)
-- Test-Driven Development: By Example - [link](https://www.amazon.com/Test-Driven-Development-Kent-Beck/dp/0321146530)
-- Javascript Advanced Concepts - [link](https://www.udemy.com/course/understand-javascript)
-- Developer Roadmaps - [link](https://roadmap.sh/roadmaps)
-- OWASP Top Ten - [link](https://owasp.org/www-project-top-ten/)
-
-### Useful tips
-- Be relaxed at the interview, mind that there are multiple ways to resolve the same problem, start with a simple solution and after we can improve it
-- Clear communication is the key to go well in both whiteboard and coding sessions
-- Think about how to test your solution
-- Make sure you understood the question well, don't hesitate to ask for clarification
-- Before starting coding, take some time to think about the solution, if possible out loud
+- [Frontend Interview](./frontend-study.md)
+- [Backend Interview](./backend-study.md)

interview-study-guide/backend-study.md

@@ -0,0 +1,46 @@
+## Backend engineer study guide
+
+### Algorithm
+
+The algorithm session is based on a practical coding problem, feel free to choose a programming language, and IDE you have the domain.
+At this session it is expected that you interact with the interviewer as much as you can, exposing how you think and what steps are being taken to resolve the problem.
+It's not expected to create the best solution in the first moment, we expect you to know the limitations of the solution and what could be improved. So stay comfortable with the basic data structures as time and space complexity.
+
+Study guide:
+
+- Cracking the Coding Interview - [link](https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850)
+- Hackerrank - [link](https://www.hackerrank.com/)
+
+### Code Review
+
+We will also have a code review for a PR in a pseudocode codebase - if you are not familiar with code reviews or PR (Pull Requests), no need to worry, you can find more information about the topic [here](https://about.gitlab.com/topics/version-control/what-is-code-review/).
+
+### Architecture Design
+
+Whiteboard session, at this moment we will design the architecture of a common business that makes part of our daily life.
+So don't worry, for sure you will be familiar with the problem, and again, feel comfortable talking with the interviewers as much as you can.
+Usually, we do this section using the [Draw IO](http://draw.io/) or [Excalidraw](https://excalidraw.com/) tool.
+
+[Study guide](https://github.com/donnemartin/system-design-primer)
+
+### Helpful content of best practices of software development
+
+- Pragmatic Programmer, The: From Journeyman to Master - [link](https://www.amazon.com/-/pt/Pragmatic-Programmer-Journeyman-Master-ebook-dp-B003GCTQAE/dp/B003GCTQAE)
+- DDD - Martin Fowler Blog - [link](https://martinfowler.com/tags/domain%20driven%20design.html)
+- Domain-Driven Design: Tackling Complexity in the Heart of Software - [link](https://www.amazon.com/-/pt/Evans-Eric-ebook/dp/B00794TAUG/)
+- Building Microservices: Designing Fine-Grained Systems - [link](https://www.amazon.com/-/pt/Sam-Newman-ebook/dp/B00T3N7XB4/)
+- Clean Code: A Handbook of Agile Software Craftsmanship - [link](https://www.amazon.com/-/pt/Clean-Code-Handbook-Software-Craftsmanship-ebook-dp-B001GSTOAM/dp/B001GSTOAM/)
+- APIs - Martin Fowler Blog - [link](https://martinfowler.com/articles/richardsonMaturityModel.html)
+- Testing - Martin Fowler Blog- [link](https://martinfowler.com/testing/)
+- Test-Driven Development: By Example - [link](https://www.amazon.com/Test-Driven-Development-Kent-Beck/dp/0321146530)
+- Javascript Advanced Concepts - [link](https://www.udemy.com/course/understand-javascript)
+- Developer Roadmaps - [link](https://roadmap.sh/roadmaps)
+- OWASP Top Ten - [link](https://owasp.org/www-project-top-ten/)
+
+### Useful tips
+
+- Be relaxed at the interview, mind that there are multiple ways to resolve the same problem, start with a simple solution and after we can improve it
+- Clear communication is the key to go well in both whiteboard and coding sessions
+- Think about how to test your solution
+- Make sure you understood the question well, don't hesitate to ask for clarification
+- Before starting coding, take some time to think about the solution, if possible out loud

interview-study-guide/frontend-study.md

@@ -0,0 +1,69 @@
+## Frontend engineer study guide
+
+### Technical topics
+
+This session aims to understand your experience through technical questions. We will cover frontend-focused topics, including styling, JavaScript fundamentals, web/mobile frameworks, best practices, and feature development and delivery processes.
+
+To stand out, provide ample details about the scale, complexity, and impact of your experiences and achievements. See the two examples below:
+
+- Example 1: "Built an application using React + Typescript"
+
+- Example 2: "Developed a responsive single-page application (SPA) dashboard for a SaaS product, enabling users to manage their subscriptions and track usage analytics efficiently. The dashboard, built with React, Typescript, and Styled Components, reduced customer support inquiries by 15% due to improved usability. The optimized bundle size and lazy-loading implementation resulted in a 30% faster initial load time, contributing to increased user engagement."
+
+Example 2 provided more details about what was worked on and its impact.
+
+The following list outlines key front-end technical achievements suitable for highlighting: product features built, performance improvements and gains, testing coverage and critical flow coverage, SEO error reduction, accessibility improvements and conformance, and tooling modernization with scale context.
+
+Remember to clearly articulate your technical skills and accomplishments. Providing specific examples and quantifiable results will help us better understand your capabilities and how you can contribute to our team. You can check more information [here](https://www.greatfrontend.com/front-end-interview-guidebook/quiz) on how to prepare for front-end interview questions.
+
+### Algorithm
+
+The algorithm session is based on a practical coding problem, feel free to choose a programming language, and IDE you have the domain.
+At this session it is expected that you interact with the interviewer as much as you can, exposing how you think and what steps are being taken to resolve the problem.
+It's not expected to create the best solution in the first moment, we expect you to know the limitations of the solution and what could be improved. So stay comfortable with the basic data structures as time and space complexity.
+
+Study guide:
+
+- Cracking the Coding Interview - [link](https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850)
+- Hackerrank - [link](https://www.hackerrank.com/)
+- GreatFrontEnd - [link](https://www.greatfrontend.com/front-end-interview-guidebook/algorithms)
+
+### Code Review
+
+We will also have a code review for a PR in a React codebase - if you are not familiar with code reviews or PR (Pull Requests), no need to worry, you can find more information about the topic [here](https://about.gitlab.com/topics/version-control/what-is-code-review/).
+
+### Architecture Design
+
+Whiteboard session, at this moment we will design the architecture of a common business that makes part of our daily life.
+So don't worry, for sure you will be familiar with the problem, and again, feel comfortable talking with the interviewers as much as you can.
+Usually, we do this section using the [Draw IO](http://draw.io/) or [Excalidraw](https://excalidraw.com/) tool.
+
+[Study guide](https://www.greatfrontend.com/system-design)
+
+### Helpful content of Frontend Best Practices and Resources
+
+- **Frontend Developer Handbook** - [Frontend Developer Handbook](https://frontendmasters.com/guides/front-end-handbook/2024/)
+- **JavaScript Info** - [JavaScript Info](https://javascript.info/)
+- **You Don't Know JS (Book Series)** by Kyle Simpson - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)
+- **CSS Tricks - Complete Guide to Flexbox and Grid**
+  - [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+  - [Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- **Frontend Architecture for Design Systems** by Micah Godbolt - [Frontend Architecture for Design Systems](https://a.co/d/e2zqd9v)
+- **JavaScript: The Good Parts** by Douglas Crockford - [JavaScript: The Good Parts](https://a.co/d/at3ZYry)
+- **Web Performance Optimization by Google** - [Web Performance Optimization](https://developers.google.com/web/fundamentals/performance)
+- **State of CSS** - [State of CSS](https://stateofcss.com/en-US)
+- **Smashing Magazine** - [Smashing Magazine](https://www.smashingmagazine.com/)
+- **MDN Web Docs** - [MDN Web Docs](https://developer.mozilla.org/en-US/)
+- **Frontend Masters** - [Frontend Masters](https://frontendmasters.com/)
+- **JavaScript Design Patterns** by Addy Osmani - [JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)
+- **Developer Roadmaps** - [Developer Roadmaps](https://roadmap.sh/roadmaps)
+- **Clean Code**: A Handbook of Agile Software Craftsmanship - [link](https://www.amazon.com/-/pt/Clean-Code-Handbook-Software-Craftsmanship-ebook-dp-B001GSTOAM/dp/B001GSTOAM/)
+- **Testing** - [Martin Fowler Blog](https://martinfowler.com/testing/)
+
+### Useful tips
+
+- Be relaxed at the interview, mind that there are multiple ways to resolve the same problem, start with a simple solution and after we can improve it
+- Clear communication is the key to go well in both whiteboard and coding sessions
+- Think about how to test your solution
+- Make sure you understood the question well, don't hesitate to ask for clarification
+- Before starting coding, take some time to think about the solution, if possible out loud