DEV Community: Chuong Tang

InSelfView

Chuong Tang — Wed, 11 May 2022 18:16:50 +0000

Overview of My Submission

The introduction of live video interviews have created a pandora’s box of new challenges and struggles for candidates. For jobseekers, improving their online presentation is one of the first steps toward the final goal. InSelfView was built to give a simulation for virtual interview. Users can practice in a safe environment and improve the result through a supportive community.

Submission Category:

Web2 Wizards

(ah... I am not a wizard at all 🤓)

Link to Code

My repo

(don't forget to click the ★ . Thanks your visit 🙏. PRs are always appreciated.)

Additional Resources / Tech stack

Front-end: VITEjs _ a super fast frontend tool to render React App.
State Management: Redux _ a Predictable State Container for React.
Back-end: Appwrite _ Secure Open-Source Backend Server for Web, Mobile & Flutter Developers. Its extensive APIs gives developers a full range of different services for building apps (Users, Account, Storage, Database, Functions...)
Styling: WindiCSS _ faster load times, full compatibility with Tailwind and integrated with VITE.
Server deployment: Vultr _ Appwrite's deployed on a Vultr instance with an Ubuntu Virtual Machine.
Front-end deployment: Cloudflare Pages _ support Git integration for automated deployments. Just connect your repo and push.

Live Demo

InSelfView

It's responsive on your mobile as well 📱📟💻🖥

Feedback / Suggestion?

Please send your comments to email@chuongtang.com

Azure Trial Hackathon Submission : WordleLike

Chuong Tang — Tue, 08 Mar 2022 18:57:06 +0000

Overview of My Submission

One of the great ways to learn any new tools is using them to build app. I've tried several cloud platforms for backend and server-less experiences. For this app, I decided to learn a new tech by diving into Microsoft Azure. Especially the newly launched MSAL for React

Submission Category:

Computing App Service 🚀

Link to Code on GitHub

Repo on Github.

PRs are always appreciated 🙌

Additional Resources / Info

Setting up frontend for UI build:

With VITE, initiating a development environment for React is as easy as 4 commands:

npm init vite@latest wordlelike -- --template react
cd wordlelike
npm install
npm run dev

Those lines fired up a scaffolded React App with a Vite dev server and...it's fast ⚡

Setting up MSAL for React Typescript:

MSAL Docs Step-by-step guides with great examples

Main engine is the AuthConfig.tsx

ClientID is obtained from App registration in Azure Portal

There is no need to protect the clientId with an environment variable as it is exposed when the login client is called

Deploy to Azure App Service using Visual Studio Code

There is a very thorough docs from Azure DevOps

Install VS COde extension
Set up GitHub + GitHub Actions
Build, commit and push then Azure Pipelines for GitHub will handle all the magic

Demo Link

Watchkeeping: a timesheet compiling tool for Seafarers

Chuong Tang — Thu, 13 Jan 2022 22:56:57 +0000

Overview of My Submission

One of the great ways to experience all pros and cons of any technology is using them to build an app. In this project, I've dived into a trending tool from MongoDB :
This app is event-driven cloud-based systems of which, the development relies solely on a combination of MongoDB hosted remote procedure calls (Realm functions), client-side logic (React states).

Submission Category:

Choose Your Own Adventure:

Realm functions allow you to define and execute server-side logic for your application. You can call functions from your client applications as well as from other functions and in JSON expressions throughout Realm.

Link to Code repository

Watchkeeping-MongoDB-Serverless

Additional Resources / Info

Client:

VITE: superfast front-end tool to render React app.
PrimeREACT: design-agnostic, flexible and accessible React UI Components.

Serverless:

Mongo Realm Application Services: ready-to-go back end.

Database:

MongoDB Atlas: multi-cloud database services.

Front-end User Authorization: Autho0

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

Backend Serverless User Authorization:

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

html2pdf.js: Client-side HTML-to-PDF rendering using pure JS.

Deployment

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

License

Demo

Setting up Realm function in MongoDB
Similar to writing all the callbacks in NodeJS and Express, serverless functions are small units of logic that take input arguments, operate on the input and return the result.

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
There's no need to declare any routes or endpoints. Serverless functions can be called from the front-end when MongoUser is authenticated.

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

Deployment

Live demo