Skip to content

chuongtang/Watchkeeping-MongoDB-Serverless

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Watchkeeping: a timesheet compiling tool for Seafarers

πŸŽ‰πŸŽ‡ A runner-up project in πŸŽπŸŽ† Hackathon Banner Check out this Post on dev.to

One of a great ways to experience all pros and cons of any technologies is using them to build app. In this project, I've dived into a trending tool from MongoDB : Realm serverless functions

Realm

Tech Stack

Client:

  • VITE VITE: superfast frontend tool to render React React

  • Prime PrimeREACT: design-agnostic, flexible and accessible React UI Components.

Serverless:

Database:

Frontend User Authorization: Autho0

  • Auth0 Auth0: A drop-in solution to add authentication and authorization services.

Backend Serverless User Authorization:

  • MongoDB MongoDB API Key: MongoDB Realm provides several authentication providers that you can integrate into a client application to allow users to log in to your Realm app. Server API keys are generated in the Realm UI. Creating a server API key associates that API key with an automatically created Realm server user. Provide a server key to external applications and services to allow them to authenticate directly with Realm.

PDF rendering tool

Deployment

  • MongoDB Realm MongoDB Realm Just drop your build-files into the hoistings directory. Realm allows you to host, manage, and serve your application's static media and document files. Just drop your build-files into the hoistings directory

Demo

Setting up Realm function in MongoDB

Realm demo

Logging-in MongoDB Realm from client

    const REALM_APP_ID = import.meta.env.VITE_REALM_APP_ID;
    const REALM_APP_APIKEY = import.meta.env.VITE_REALM_APP_APIKEY;

    useEffect(async () => {

    const app = new Realm.App({ id: REALM_APP_ID });
    const credentials = Realm.Credentials.apiKey(REALM_APP_APIKEY);

    try {
      setMongoUser(loggedInUser)
    } catch (error) {
      console.error(error);
    }
  }, []);

Calling Realm functions from React front-end

    const updateCrewDetail = async (newDetail) => {
        const updatedCrew = await user.functions.FindOneAndUpdate(newDetail);
  };

Deployment

Live preview Watchkeeping

License

Apache License

Feedback

If you have any feedback, please reach out to me at email@chuongtang.com