The document discusses best practices for building full stack React applications in production. It covers frontend technologies like React, Next.js and Gatsby as well as backend technologies like GraphQL, Prisma and MongoDB. It also discusses topics like state management, performance, authentication, internationalization, accessibility, deployment, analytics, monitoring and SEO.

1. React full stack
in Production
Souvik Basu

2. About me
• Works at Microsoft, Vancouver
• Runs
• @souvikbasu

3. React Full stack
• Frontend tech stack
• UX
• State Management
• Performance
• Auth and Security
• I18n, a11l
• Responsiveness
• Testing
• Backend stack
• Deployment (managing releases)
• SEO
• Prod monitoring and support
@souvikbasu

4. Frontend stack
• Boilerplates
• Create React App
https://reactjs.org/docs/create-a-new-react-app.html
• Static Site Generators
• Next.js
https://nextjs.org/
• Gatsby
https://www.gatsbyjs.com/
• 11ty
https://www.11ty.dev/
@souvikbasu

5. Frontend stack
• Universal apps
• Expo
https://expo.dev/
• Ionic React
https://ionicframework.com/docs/react
• React Native for Windows
https://github.com/microsoft/react-native-windows
@souvikbasu

6. Frontend stack
• Batteries included
• Blitz
https://github.com/blitz-js/blitz
• Vulcan
https://github.com/vulcanjs/vulcan
• Remix
https://remix.run/
@souvikbasu

7. Design system
• Fluent UI
https://developer.microsoft.com/en-us/fluentui#/
• Ant
https://ant.design/components/overview/
• Material UI
https://mui.com/
@souvikbasu
• React Bootstrap
https://react-bootstrap.github.io/
• Semantic UI
https://react.semantic-ui.com/
• Onsen UI
https://onsen.io/

8. Styling
• Styled components
https://styled-components.com/
• Tailwind
https://tailwindcss.com/
• SASS
https://sass-lang.com/
@souvikbasu

9. UX
• Framer Motion
https://www.framer.com/motion/
• React DnD
https://react-dnd.github.io/react-dnd/
@souvikbasu

10. State Management
• Hooks
useState
• Context
useContext
• Redux
useReducer
@souvikbasu
• MobX
https://mobx.js.org/
• RxJS
https://rxjs.dev/
• Overmind
https://overmindjs.org/

11. Performance
• React Virtualized
https://github.com/bvaughn/react-virtualized
• UseMemo, UseCallback
Avoid overuse
• Lighthouse score
https://web.dev/performance-scoring/
@souvikbasu
• Web vitals
https://web.dev/vitals/

12. Auth
• Auth0
https://auth0.com/docs/quickstart/spa/react/01-login
• Amazon Congnito
https://aws.amazon.com/cognito/
• Azure Active Directory
https://azure.microsoft.com/en-us/services/active-directory/#overview
@souvikbasu

13. Security
• CORS
Use web extensions to unblock CORS on localhost
@souvikbasu

14. i18n
• I18next
https://www.i18next.com/
• Next-I18next
https://github.com/isaachinman/next-i18next
• React-Intl
https://formatjs.io/
@souvikbasu
• Lingui
https://lingui.js.org/
• Rosetta
https://github.com/lukeed/rosetta

15. i18n Routing
• Next I18n routing
https://nextjs.org/docs/advanced-features/i18n-routing
@souvikbasu

16. a11y
• Building and Testing accessible apps
https://reactjs.org/docs/accessibility.html
@souvikbasu

17. Backend stack
• GraphQL
https://graphql.org/
• Prisma ORM
https://www.prisma.io/
• Serverless backend
https://aws.amazon.com/lambda/
@souvikbasu

18. Backend stack (DB)
• MongoDB
https://www.mongodb.com/
• CosmosDB
https://docs.microsoft.com/en-us/azure/cosmos-db/introduction
• Dynamo
https://aws.amazon.com/dynamodb/
@souvikbasu

19. Deployment
• In Premise Servers
• Cloud Compute (IaaS)
Azure, AWS, Google cloud, DigitalOcean
• PaaS
Heroku, Netlify, Vercel, OpenShift, Cloud Foundry
@souvikbasu
• Serverless backend
https://azure.microsoft.com/en-us/services/functions/#overview
https://aws.amazon.com/lambda/

20. Analytics
• Google Analytics
https://analytics.google.com/analytics/web/#/
• Application Insights
https://docs.microsoft.com/en-us/azure/azure-monitor/app/app-insights-overview
• MixPanel
https://mixpanel.com/
• Plausible
https://web.dev/vitals/
• DataDog
https://www.datadoghq.com/
@souvikbasu

21. Analytics (UX)
@souvikbasu
• Mouseflow
https://mouseflow.com/
• Hotjar
https://www.hotjar.com/

22. Performance Monitoring
• Sentry
https://sentry.io
• LogRocket
https://logrocket.com/
@souvikbasu

23. SEO
• Google
https://developers.google.com/search/docs/beginner/seo-starter-guide
• Bing
https://www.bing.com/webmasters/help/webmaster-guidelines-30fba23a
• General SEO guidelines
https://learningseo.io/
@souvikbasu

24. Image caching
• CDN
https://imgix.com/
• Cloud
AWS, Azure, Google Cloud
@souvikbasu

25. A/B Testing
• Azure Experiments
https://azure.github.io/AppService/2020/08/03/ab_testing_app_service.html
• Optimizely
https://www.optimizely.com/insights/web-experimentation-demo/
• Custom using Cloudflare workers
@souvikbasu

26. General coding guidelines
• Maintain .env file for each environment
• Sanitize data in logs
@souvikbasu

27. Thank you!!
@souvikbasu