Engineering

  1. Home
  2. Docs
  3. Engineering
  4. React Progressive Web App
  5. React PWA Frontend – Online Course

React PWA Frontend – Online Course

Syllabus

Part 1: Tooling Crash Course

These are skippable lessons. You only need the ones you don’t feel familiar enough.

  1. Visual Studio Code
  2. yarn
  3. GitLab
  4. TypeScript

Part 2: Common Use Cases

  1. Cloning, Configuring, and Starting Development of a Lovia PWA App
  2. Basic Project Structure: Configuration, Pages, Routes, Components
  3. Creating Authenticated Pages and Static Routes
  4. Form Items and Buttons
  5. App Navigation
  6. Section Navigation: Steps
  7. Laying Out Components in a Page
  8. Creating Public (Unauthenticated) Pages
  9. Using App Variables as Component’s Dynamic Props
  10. Page’s Data Variables: Using GraphQL Queries
  11. Path Parameters in A Page’s Route & Dynamic Page Title
  12. “Upserting”: Creating/Modifying Documents with useForm and GraphQL Mutations
  13. Deleting Documents with GraphQL Mutations
  14. Showing Transformed/Optimized Images with Bunny Optimizer
  15. Uploading Images with Cropping to Bunny Storage (requires MongoDB Realm)
  16. Uploading Non-Image Files to Bunny Storage(requires MongoDB Realm)

Part 3: Intermediate

  1. Uploading Videos to Bunny Storage(requires MongoDB Realm)
  2. Mobile Number Verification (AWS)
  3. Internationalization and Translating Messages
  4. Right-to-Left Layout (Arabic)

Part 4: Internals

  1. Authentication with FusionAuth API
  2. Authorization with FusionAuth Roles
  3. Apollo GraphQL Client Library & Apollo Tools Generator
  4. MongoDB Realm
  5. UmiJS useModel
  6. Creating a new UmiJS + Ant Design Pro Project with Lovia Conventions
  7. Prettier
  8. ESLint
  9. AWS Amplify
  10. Hybrid / Server-side Rendering (SSR)
  11. Apollo GraphQL Caching & State Management

Was this article helpful to you? Yes No

How can we help?

Leave a Reply

Your email address will not be published. Required fields are marked *