• It fits well with our services since our tours content doesn’t change once created • If the traffic increase, there is no impact on the API server. • Best of both worlds: SSR & SSG Data Fetching SSR CSR SSG ISR
GraphQL schema • graphql-request instead of Apollo Client • react-query for Client Side Fetching Why not Apollo Client? • We don’t need Apollo advance cache • We fetch almost all our data from server side (ISR) • We use react-query when client side fetching is required React-Query vs Apollo Client https://react-query-v3.tanstack.com/comparison
a real use case by creating a button component that supports different sizes & variants 3. Compare the DX and other important points and select one of them
Chakra-UI Vanilla-Extract DX ◯ △ △ △ △ ◯ Development Speed ◉ ◉ ◯ △ △ ◯ Future Proof ◉ ◯ ◯ △ △ △ Bundle size = SEO ◯ ◉ ◯ △ △ ◯ Why CSS Modules? • It’s just CSS, anyone can write it and read it • Work by default in Next.JS • It’s not perfect, but you can find an easy solution for the problems https://github.com/xpromx/react-component-styles
Rodrigo (half time) + 2 Side Jobs (副業) • Web Design: ◦ We decided to keep the Web design similar to the App to provide the same UX to our users. ▪ SP = App ▪ Tablet, PC = responsive version of SP with some differences ◦ Before starting by organized & designed the basic components • Web Development: ◦ Before we start coding, We started by deciding the Stack & some coding rules ◦ Then we created the initial project and CI/CD setup
(Buttons, Forms, Modals, Grid, etc) ◦ We separated UI components from the Application Layer in a monorepo ◦ Each member were building different components in parallel • Components were made by scratch to maximize extensibility and maintainability ◦ Using libraries can lead to restrictions, loss of design scalability, and unexpected maintenance costs ◦ Exception: Calendar component • Implemented Storybook to easily check our components
assigned them to different members. ◦ e.g: ▪ Member 1: Top, Search, Tour Details, … ▪ Member 2: Sign In, Booking Process, … • While building each page, our UI components also evolved to support real use cases. • Each page was tested on a separate Testing Environment before merge it.
were concentrated on me (Rodrigo) ◦ It affected the development speed • Temporal Solution ◦ Focus on the final output (UI/UX) ◦ We did some sacrifices in quality at the beginning
of the web version development the App version was also including new features • Temporal Solution: ◦ Try to minimize the Impact of new features, and decided which ones could be added after release.
• Production move to GCP when traffic increase? • Testing: e2e using cypress • Next.JS nested layouts ❤ https://nextjs.org/blog/layouts-rfc • New Features • … Just released… many things pending to do
xpromx
kuranuki
yusukebe
shogogg
hollycummins
jinwatanabe
nrslib
o0h
akiomatic
masuda220
kentaroutakeda
licux
badams
watany
lara
techseoconnect
reverentgeek
palkan
nonsquared
rakko
tammyeverts
vanstee
raygrieselhuber
mza
