Why this book?
Robust JavaScript stack
Build a web app with React, Material-UI, Next, MobX, WebSockets, Express, Node, Mongoose, MongoDB. Write with TypeScript. We keep our book up-to-date with the latest versions of all dependencies.
Popular third party APIs
Integrate your web app with Google for user authentication and analytics, AWS SES for transactional emails, AWS S3 for file manipulation, MailChimp for newsletters, and Stripe for selling.
Start your own SaaS product or business
This book is not another to-do list. You will build a practical web app that can become a SaaS business. We take you through every step to build the app from scratch.
Public support
If you have questions, search our closed Github issues or create a new one. We are happy to answer beginner to expert-level questions.
Table of Contents
Introduction. Project structure.
- Table of Contents
- Why this book?
- Who is this book for?
- What will you learn?
- Screenshots
- Project structure
- Authors
Chapter 1: GitHub. VS Code Editor. Node. Yarn. TypeScript. TSLint. Next.js. Environmental variables.
- Setup
- GitHub and Git
- Visual Studio code editor
- Node, Yarn
- package.json
- TypeScript
- ESLint, Prettier
- app server: Next.js
- Next.js: Custom App
- Next.js: Custom Document
- Next.js: Index page
- Testing
- Environmental variables
Chapter 2: Material-UI. Theme. Dark theme. Shared layout. Shared styles. Shared components. Mobile browser.
- Material-UI
- Client-side and server-side rendered pages
- Dark theme
- Shared layout
- Shared styles
- Shared components
- MenuWithLinks
- Notifier
- Confirmer
- Nprogress
- Mobile browser
Chapter 3: HTTP. APP server. Next-Express server. Fetch method. API methods. async/await. API server. Express server. Environmental variables. Logs.
- HTTP
- APP server
- Step 1: Fetch method
- Step 2: API method at Index page
- Step 3: Next-Express server. Express route.
- Asynchronous function, Promise, async/await
- API server
- New project API
- Updating APP
Chapter 4: User model. Mongoose and MongoDB. MongoDB index. Jest testing. Your Settings page. File upload to AWS S3.
- Infrastructure for User
- User Schema and Model. Type interface.
- Static methods and Mongoose methods
- Express routes, router and API methods
- MongoDB database
- MongoDB Atlas
- Creating MongoDB document
- Connecting database
- Testing connection
- MongoDB index
- Jest testing for TypeScript
- Slugify method
- Testing slugify method
- Your Settings page
- Form and input
- API infrastructure for updating profile
- Data validation
- API infrastructure for uploading file
- Page's uploadFile
- Getting signed request API
- Env variables for uploading file
- Uploading file using signed request API
- Testing file upload
- resizeImage
Chapter 5: Login page. Session and cookie. Google OAuth API. Authentication HOC withAuth. firstGridItem logic in App HOC.
- Login page
- LoginButton
- Session and cookie
- Configure session and save/retrieve session from database
- Mount Express middleware
- Modify Express route /get-user-by-slug
- Configure cookie
- Google OAuth API
- Express routes for Google OAuth API
- Configure passport
- verify function
- passport and session
- Static methods publicFields and signInOrSignUpViaGoogle
- getUserApiMethod API method and '/get-user' Express route
- Google Cloud Platform
- Testing Google OAuth API
- Authentication HOC withAuth
- getUserApiMethod in withAuth
- Redirect logic in withAuth
- Render logic in withAuth HOC
- Testing withAuth HOC
- firstGridItem logic in App HOC
Chapter 6: AWS SES API. Passwordless OAuth API. Mailchimp API.
- AWS SES API
- EmailTemplate model, insertTemplates and getEmailTemplate methods
- Adding getEmailTemplate and sendEmail to signInOrSignUpViaGoogle
- sendEmail method
- Setting up AWS SES and EMAIL_SUPPORT_FROM_ADDRESS
- Testing AWS SES API
- Passwordless OAuth API
- Configure passwordless
- Configure passwordless token
- Express routes for Passwordless API
- signInOrSignUpByPasswordless method for User model
- Testing Passwordless OAuth API
- Mailchimp API
- callAPI method
- addToMailchimp method
- Adding addToMailchimp to signInOrSignUpViaGoogle and signInOrSignUpByPasswordless
- Environmental variables for Mailchimp API
- Testing Mailchimp API
Chapter 7: Application state, App HOC, store and MobX. Data store for User. Toggle theme API. Team. Invitation.
- Application state, withStore HOC, store and MobX
- Updating App HOC
- store, observable, decorate
- initializeStore, getStore, server-side rendering, action
- Data store for User
- Updating withAuth HOC
- Update YouSettings page
- Testing store infrastructure
- Toggle theme API
- Layout
- Store method toggleTheme
- toggleThemeApiMethod API method
- Express route /user/toggle-theme
- Static method toggleTheme
- Testing toggle theme API
- Team
- Model and static methods - Team
- Updating User model - Team
- Express routes - Team
- API methods - Team
- Data store and store methods - Team
- Updating main store - Team
- Initial data from App.getInitialProps - Team
- teamRequired - Team
- CreateTeam page
- TeamSettings page
- Testing Team API
- Invitation API
- Updating TeamSettings page
- InviteMember component
- Invitation page
- Updating LoginButton component
- Invitation data store - Invitation
- Updating Team data store - Invitation
- API methods - Invitation
- Express routes - Invitation
- Model and static methods
- Invitation email template
- Updating Team model - Invitation
- Testing Invitation API
Chapter 8: Discussion API. Post API. Websockets.
- Discussion API
- Model and static methods - Discussion
- Express routes - Discussion
- API methods - Discussion
- Data store - Discussion
- Updating Team data store - Discussion
- Discussion page
- Discussion-specific components
- Common components for Discussion API
- Testing Discussion API without Post API
- Post API
- Model and static methods - Post
- Express routes - Post
- API methods - Post
- Data store and store methods - Post
- Updating DiscussionPageComp page and CreateDiscussionForm
- Post-specific components
- Testing Post API
- Websockets for Discussion
- API server
- APP client
- Testing sockets
Chapter 9: Stripe API and paid subscription. Email notification for new post. AWS Lambda. AWS API Gateway.
- Stripe API - API project
- Stripe setup - API
- Stripe methods - API
- Stripe checkout callback - API
- Stripe webhook - API
- Team Model - API
- User Model - API
- Team Leader Express routes - API
- Stripe API - APP project
- Team Leader API methods - APP
- Team data store - APP
- User data store - APP
- Billing page and testing - APP
- TeamSettings page and testing - APP
- Setup at Stripe dashboard and environmental variables
- Testing Stripe API
- Email notification for new post API - API project
- Discussion and EmailTemplate Models - API
- Express routes for adding and editing Discussion
- sendDataToLambdaApiMethod API method - APP
- Discussion data store - APP
- CreateDiscussionForm, EditDiscussionForm and PostForm - APP
- Testing updates to internal API infrastructure
- Amazon API Gateway and AWS Lambda
- Amazon API Gateway
- AWS Lambda
- Testing entire Email notification for new post API
Chapter 10: Environmental variables, production/development. Logger. API server. Server-side caching. SEO - robots.txt, sitemap.xml. Server-side caching. Heroku. AWS Elastic Beanstalk.
- Environmental variables, production/development
- Logger
- API server
- SEO - robots.txt, sitemap.xml
- Server-side caching
- Heroku
- Testing application in production
- AWS Elastic Beanstalk
Book Authors
Kelly
Spokane, WA
Kelly is a front-end developer. She likes using React and Material Design and enjoys solving UX problems.
Timur
Spokane, WA
Tima is a full-stack JavaScript web developer. He likes learning any technology that improves end-user experience.