Intro To MongoDB Realm with VueJS, Ionic Framework And ViteJS

The MongoDB Realm Web SDK enables browser-based applications to access data stored in MongoDB Atlas and interact with MongoDB Realm services like Functions and authentication. The Web SDK supports both JavaScript and TypeScript applications.

In our project, we are going to connect to a MongoDB backend hosted in the cloud, Create Users, Login Users, Save extra profile information with the User Execute Queries against the Mongo Database using the same mongo query language you normally use and run some cloud functions.

This will be split between three different video, this first one will get you started all the way from the beginning where you set up your app and create your database.

We are building the application using Vuejs, it is being packaged and developed using ViteJS and the UI Components are from Ionic Framework

Chapters

00:00 - Intro
01:50 - what is Realm
03:10 - Setup Project and Database
07:03 - Setup Email Password Authentication
08:35 - Store Custom User Data, Setup Database
13:08 - Starting to code, Ionic Vite VueJS
14:10 - Starting off with Some Code to Save Time
16:03 - Login User Template UI
17:05 - Login User Coding Functions
19:21 - Integrating Realm WebSDK - Login
25:00 - Create Account Template UI
28:46 - Integrating Realm WebSDK - Create Account & CustomData
34:16 - Testing Create Account
36:30 - Managing Private Routes and Redirection, Getting User Session
44:15 - Integrating Realm WebSDK - User Logout
47:00 - Testing Login, See User Info and Logout
47:28 - Forgot to Redirect on Successful Login
48:17 - Debugging Logout
50:04 - Tracking User Session To Redirect When App Launches
51:11 - Overview and What's Next

Links

• Getting Started - https://docs.mongodb.com/realm/web/#std-label-web-intro
• Queries - https://docs.mongodb.com/realm/web/mongodb/
• Cloud Functions - https://docs.mongodb.com/realm/web/call-a-function/
• Project Setup - https://docs.mongodb.com/realm/tutorial/realm-app/