HypeTech Jobs
Job opportunities at hype tech
companies
hypetechjobs.com | hypetech.io | reactweek.dev
Marko Arsić
Founder and CEO @ HypeTech
Founder of HypeTech Education
Lecturer @ ReactWeek.dev
Independent Tech Consultant
Helping companies set up teams and standardize the
development process
github.com/marsicdev
Slide 3
Slide 3 text
Scalability?
Slide 4
Slide 4 text
Scalability is the measure of a system’s ability
to increase or decrease in performance and
cost in response to changes in application and
system processing demands.
Slide 5
Slide 5 text
The ability of a computer application or product
(hardware or software) to continue to function
well when it (or its context) is changed in size or
volume in order to meet a user need.
Typically, the rescaling is to a larger size or
volume.
Slide 6
Slide 6 text
Scalability is NOT only applied on software or
hardware system but also on a man power
(team) working on it.
Slide 7
Slide 7 text
NEXT.js
Slide 8
Slide 8 text
“Next.js gives you the best developer experience
with all the features you need for production:
hybrid static & server rendering, TypeScript
support, smart bundling, route pre-fetching, and
more. No config needed.”
Slide 9
Slide 9 text
Next.js is an all-in-one fullstack modern
application building solution.
Slide 10
Slide 10 text
Includes first class support for Typescript and
React, while offering easy solutions for some of
the most common requirements in a modern
application development
Next.js has quickly become one of the most in
demand skills in the web development space.
Slide 13
Slide 13 text
Let’s set up a project using a lot of best
practices that will improve your chances of
keeping everything maintainable as you scale
your team and/or your app.
Slide 14
Slide 14 text
Project setup
Slide 15
Slide 15 text
Creating a Next.js can be done in a few ways,
but the two are most common
o1 With create-next-app
o2 Manually.
Slide 16
Slide 16 text
Set a standard that will be used by all
contributors to the project to keep the code style
consistent and basic best practices followed
Slide 17
Slide 17 text
o1 Version control - Git setup - Git Hooks
o2 Engine Locking - .nvmrc and .npmrc
o3 Custom scripts - .package.json
o4 VS Code Configuration - .vscode/settings.json
o4 VS Code Debugging - launch.json
Slide 18
Slide 18 text
Code Formatting
and Quality Tools
Slide 19
Slide 19 text
Set a standard that will be used by all
contributors to the project to keep the code style
consistent and basic best practices followed
Slide 20
Slide 20 text
Most of quality tools are only needed during
development, so we add it as a devDependency
with -D flag
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
ESLint statically analyzes your code to quickly
find problems.
Slide 23
Slide 23 text
Prettier will take care of automatically formatting
our files for us.
Slide 24
Slide 24 text
Most of quality tools are only needed during
development, so we add it as a devDependency
with -D flag
Slide 25
Slide 25 text
Directory
Structure
Slide 26
Slide 26 text
Many people will have extremely strong opinions
about directory structure, and for good reason!
Slide 27
Slide 27 text
Directory structure can really make or break a
project in the long term when it gets out of
control, especially when team members have to
spend unnecessary time trying to guess where
to put things (or find things).
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Within components we will have subdirectories
that kind of group similar types of components
together. You can use any method you prefer to
do this.
(example mui)
Slide 30
Slide 30 text
Component
Template and
Layouts
Slide 31
Slide 31 text
Every single one of our components is going to
follow this exact structure. Even if it does not
use props it will still export an empty props
interface for the component.
Slide 32
Slide 32 text
This will allow us to replicate this exact structure
across many components and files, and
interchange components/imports using the
same expected pattern and just find/replace the
names of the components.
Slide 33
Slide 33 text
consistency is everything
Slide 34
Slide 34 text
Layouts are an important concept in Next.js.
They help you manage state between pages.
Slide 35
Slide 35 text
Documentation
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Storybook gives us an environment to show off
and test the React components we are building
outside of the application we are using them in.
Slide 38
Slide 38 text
It's great tool to connect developers with
designers and be able to verify components we
have developed look and function as per design
requirements in an isolated environment without
the overhead of the rest of the app.
Slide 39
Slide 39 text
Testing
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Deployment
Slide 42
Slide 42 text
Our final step will be to add the process of
deployment to a Next.js app.
Slide 43
Slide 43 text
Ideally each commit or push or PR should
generate for you a preview link and run a set of
predefined action to make sure that you didn’t
push some breaking code
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Summary
Slide 46
Slide 46 text
Q & A
As everything good in life, knowledge is great only when shared
https://discord.gg/94uhCAkFKf
Slide 47
Slide 47 text
As everything good in life, knowledge is great only when shared
hypetech.io/education