The IMC Thailand purchasing app gives customers a central place to search for products from Thailand, organize sourcing requests, and coordinate the next steps toward purchase and delivery.

Connected to IMC Intertech’s Thailand distribution hub, the app brings customer requirements and local supplier coordination into a shared workflow. It supports customers across Asia and worldwide who need to manage purchases from Thailand, including orders involving several product categories or suppliers.

The app is available through the IMC Thailand website.

Product Search and Sourcing Requests

Customers can search for a broad range of eligible products and record what they need within their account. Requests can include product descriptions, reference links, quantities, preferred brands, specifications, and delivery requirements.

This accommodates both buyers who know the exact item they want and those who need help identifying a suitable option. Restaurant ingredients, packaging, kitchen supplies, retail merchandise, jewelry, and personal-care products are among the categories customers can request.

Product availability and eligibility are reviewed according to the supplier, item, destination, and shipping requirements.

Preliminary Pricing and Verified Quotes

Preliminary pricing estimates help customers assess a potential purchase before requesting a detailed quotation. Where pricing information is available, these estimates provide an initial reference for comparing options and setting a budget.

A verified quote follows confirmation of the requested specification, quantity, supplier availability, and applicable charges. Product costs, service fees, and shipping arrangements can then be reviewed before the customer approves the purchase.

This keeps the initial estimate and the confirmed purchasing decision distinct, particularly when an order includes custom products or goods from several suppliers.

An Organized Sourcing Cart

The sourcing cart brings individual requests together in one place. Customers can collect items from different searches and review the overall requirement before submitting it for quotation.

For example, a restaurant purchasing curry paste, serving bowls, and takeaway packaging can organize all three requirements within the same cart. Each item retains its own specification and quantity, while the combined request provides a clearer picture of the order.

The Thailand purchasing guide explains which details help suppliers prepare comparable offers.

Coordination Through the Thailand Hub

Once purchasing requirements are confirmed, the Thailand hub provides a local point of coordination for supplier communication and shipment preparation.

For suitable orders, goods from multiple suppliers can be brought together before onward shipment. Collection timing, receiving checks, packing, and outstanding items are considered as part of that process.

The app connects the customer’s sourcing request with this local work, helping keep the buying requirements organized as the order moves toward dispatch. The guide to combining orders from multiple Thailand suppliers describes the considerations involved.

Supporting Initial and Repeat Purchases

The app accommodates a first sourcing request as well as purchases that are expected to recur. Customers can specify whether a requirement is a trial order, a one-time purchase, or part of a regular supply schedule.

Recording pack sizes, expected usage, and acceptable alternatives helps clarify those requirements. Repeat purchases still require confirmation of current availability, pricing, and delivery conditions.

For international customers, the IMC Thailand purchasing app provides a common starting point for product discovery, quotation requests, and coordination through the Thailand operation.

Further information is available at IMC Thailand.

Is there a better AI email app? That was the question we kept asking ourselves.

AI has become incredibly good at writing. It can summarize a long email thread, clean up your wording, draft a response, and turn a few scattered thoughts into a polished message.

However, actually managing email still feels surprisingly manual.

You open your inbox. You read a message. Then you decide what it means and what needs to happen next.

Should you reply? Delegate it? Turn it into a task? Save it for later? Mark it done? Delete it?

Then you move to the next email and do it all over again.

The AI may be there, but the workflow around it still feels clunky.

That is why we built Treeoge.

The problem with most AI email apps

A lot of AI email tools start with the same assumption: the hardest part of email is writing the reply.

Sometimes that is true.

Most of the time, though, writing is only one small part of the work.

Before you respond, you have to understand what the email requires. Then you have to decide what to do with it.

For example:

• Does this email need a reply?
• Should someone else handle it?
• Is there a task hidden inside it?
• Is the conversation already complete?
• Is this something you can simply ignore or delete?

As a result, the real problem is not writing email. The real problem is making dozens of tiny decisions about email every day.

We wanted AI to help with that entire process.

Is there a better AI email app than another sidebar?

That became the bigger question.

Is there a better AI email app than one that simply adds a writing assistant, button, or sidebar to the inbox you already use?

We think there should be.

AI should not feel like another tool you have to stop and use.

Instead, it should understand the email you are already reading. It should help you decide what happens next, prepare the work when possible, and then get out of the way.

The goal is not to spend more time interacting with AI.

The goal is to spend less time managing email.

Introducing Treeoge

Treeoge is an AI-first email workspace built around one simple idea:

Triage the inbox first.

Rather than treating every email as another item in a long chronological list, Treeoge helps you move each message toward an outcome.

An email may need a reply.

It may need to be delegated.

It may create something you need to do later.

Or it may simply be done or junk.

Treeoge helps you make those decisions quickly, while AI works alongside you.

AI should be part of the email workflow

We wanted Treeoge to feel less like an AI tool attached to email and more like email designed around what AI can now do.

For that reason, Treeoge is focused on the workflow around the message itself.

It can help you understand what came in, prepare a response, identify follow-up work, and keep the next action clear.

For replies, the goal is not just to generate generic text.

Treeoge can help draft the response so you can review it, make any changes you want, and keep moving.

Likewise, when an email creates work, that work should not stay buried in the inbox. Treeoge is designed to help turn it into something actionable.

And when a message does not deserve more attention, you should be able to move on quickly.

A better AI email app should reduce decisions

This is the part we think matters most.

Email is not just a communication tool anymore.

It has also become a task manager, reminder system, archive, notification feed, and dumping ground.

Therefore, opening your inbox often means stepping into a queue of other people's priorities.

You may intend to check email for five minutes. Instead, you spend the next hour reacting to whatever arrived.

A better AI email app should help reverse that relationship.

You should be able to enter your inbox, understand what came in, decide what matters, and leave with a clear picture of what needs to happen next.

That is the experience we are building with Treeoge.

Why Initial Apps built Treeoge

At Initial Apps, we like building focused products around everyday problems that still feel harder than they should.

Email is one of those problems.

The technology around email has changed dramatically. AI models can now understand and generate language at a level that would have seemed impossible only a few years ago.

Yet the basic inbox workflow has barely changed.

That disconnect stood out to us.

We did not want to build another AI writing box.

Instead, we wanted to rethink the experience of working through email from beginning to end.

Treeoge is our attempt to do that.

So, is there a better AI email app?

Is there a better AI email app?

We think the answer should be yes.

A better AI email app should do more than write sentences for you.

It should help you understand what arrived. It should help you decide what needs to happen. It should help prepare the response. It should surface the work hidden inside the message.

Most importantly, it should help you keep moving.

That is what we are building with Treeoge.

If your inbox has started to feel less like communication and more like a daily queue of decisions, Treeoge was built for that problem.

Try Treeoge →

This tutorial will teach you how to create signup and login functionality on an app built with Vue3, Express, Mongo, and Node.  We'll start where our last tutorial left off: Connecting our ExpressJs/Vue3 App to a Mongoose Database.  Following along this example project will show you how to get started with user logins.

Prerequisites

• This tutorial picks up from our last tutorial: Connecting our ExpressJs/Vue3 App to a Mongoose Database
• Make sure to have .env variables setup with your MongoDB as this file cannot be in our git repo.
• A basic understanding of git, and npm.

Setup

Let's start by cloning the project from our last tutorial.  

git clone git@github.com:Initial-Apps/vue3-express-mongo.git passportJs-MEVN

Open a new terminal window, move into the server folder and install our npm modules.

cd passportJs-MEVN/server
npm install

Make sure to also have your .env folder setup with your MongoDB key as we did in the last tutorial.  

You can then start the server by running:

node serverjs

Next, let's also setup the client side. Open a new terminal window, move into the client folder and install our npm modules.

cd client
npm install

You can then start the client development server by:

npm run dev

Implementing PassportJs

PassportJs is a popular npm module that runs on our server.  This module provides functionality for signing up, as well as logging in and out on our server.  Some notable functionalities include validating usernames and passwords, storing logged in user session data for access on our server.

We start by making a passport directory on our server.  Open a new terminal window and make the new directory inside the server folder by running the following from the terminal or using your preferred code editor:

cd server
mkdir passport

Then we make a new file titled init.js and add the following:

const login = require('./login');
const signup = require('./signup');
const User = require('../models/user');

module.exports = function(passport){
	passport.serializeUser(function(user, done) {
		done(null, { 
			_id: user._id,
		});
	});
	passport.deserializeUser(function(userSession, done) {	
		User.findById(userSession._id)
		.then((user)=>{
			console.log('deserializingUser');
			done(null, user)
		})
		.catch((err)=>{
			console.log(err);
			done(err)
		})
	});
	login(passport);
	signup(passport);
}

In summarizing the above, the serialize function stores the user id into the session for our app to reference.  The deserialize function can retrieve any user data we specify based on the stored user id. Together, these functions enable Passport.js to maintain user sessions and facilitate authentication throughout the application.

Then we make a new file titled signup.js and add the following:

const LocalStrategy = require('../node_modules/passport-local').Strategy;
const mongoose = require('mongoose');
const User = require('../models/user');
const bCrypt = require('bcrypt-nodejs');

module.exports = function(passport){
	// LOCAL AUTHORIZATION STRATEGY
	passport.use('signup', new LocalStrategy({
		usernameField: 'email',
		passReqToCallback : true // allows us to pass back the entire request to the callback
	},
	function(req, username, password, done) {
		findOrCreateUser = function(){
			// find a user in Mongo with provided username
			User.findOne({ 'email' :  username })
			.then((user)=>{
				// If already exists
				if (user) {
					console.log('User already exists with email: '+username);
					return done(null, false, 'That Email Already Exists');
				} else {
					// Hash the password
					const hash = createHash(password);
					// If there is no user with that email
					// create the user
					let newUser = new User({
						email: username,
						password: hash,
					});	
					// save the user
					newUser.save()
					.then((user)=> {
						console.log('User Registration succesful');
						return done(null, newUser);						
					})
					.catch((err)=>{
						if (err){
							console.log('Error in Saving user: '+err);
							throw err;
						}
					});
				}
			})
			.catch((err)=>{
				console.log('Error in SignUp: '+err);
				return done(err);
			});
		};
		// Delay the execution of findOrCreateUser and execute the method
		// in the next tick of the event loop
		process.nextTick(findOrCreateUser);
	}));
	// Generates hash using bCrypt
	const createHash = function(password){
		return bCrypt.hashSync(password, bCrypt.genSaltSync(10), null);
	}
}

The above code first checks for any issues such as searching our database for any existing email address matches to ensure the user email is unique.  It then encrypts the user password using bcrypt,  stores it to our database on the save function, and returns our new user to our prior created init.js for use in our session.

Next we create a file called login.js and add the following:

const LocalStrategy   = require('passport-local').Strategy;
const User = require('../models/user');
const bCrypt = require('bcrypt-nodejs');

module.exports = function(passport){
	passport.use('login', new LocalStrategy({
		usernameField: 'email',
		passReqToCallback : true
	},
	function(req, username, password, done) {
		username = username.toLowerCase(); // clear caps
		User.findOne({email: username})
		.catch((err) => {
			return done(err);
		})
		.then ((user) => {
			if(!user) {
				console.log('User Not Found with username '+username);
				return done(null, false, 'Invalid Username');
			}
			// User exists but no password, log the error
			if (user && !user.password){
				console.log('No Password');
				return done(null, false, 'No Password'); // redirect back to login page
			}
			// User exists but wrong password, log the error
			if (!isValidPassword(user, password)){
				console.log('Invalid Password');
				return done(null, false, 'Invalid Password'); // redirect back to login page
			}
			if(isValidPassword(user, password)){
                return done(null, user);
			}
		})
	}));
	const isValidPassword = function(user, password){
		return bCrypt.compareSync(password, user.password);
	}
}

The above file handles our server logins.  When a user logs in, this code validates the email and password by checking that it matches in our database. If all matches up with no errors, it will return our user for session use in our prior created init.js file.

Setting Up Our Database User Model

Next we will setup our database model. Since we are creating an authentication app, we will need a place to store our user data, such as email addresses and passwords. That's where our MongoDB comes in.  In order to do this, we'll need to create a data model, outlining what data we will store for each user.

First, we will create a models folder in our server directory, to hold the data models.  If using the terminal, do this by running the following from within our server directory, or use your preferred code editor:

mkdir models

Create a new file called user.js and add the following:

const mongoose = require('mongoose');

function toLower (v) {
	if(v){
		return v.toLowerCase();
	}
}

const Users = new mongoose.Schema({
	email: { type: String, set: toLower },
	password: String,
});

module.exports = mongoose.model('User', Users);

A brief explanation of the above:  First we require the mongoose module, which is a middleware that connects our app data with our database.  The toLower function is used to rewrite all email addresses to lowercase.  This is done as a best practice to ensure all email addresses are formatted the same and we don't accidentally add 2 of the same email addresses because one is capitalized and hence not recognized as different from it's lowercase counterpart.  Finally, we define the data we are collecting in our mongoose.Schema.   In our case, we are storing just the user email address, and password.  

Building Our Server

Next we setup our server, which runs on Node and Express.  Together, these code modules handle all actions performed by our user on the server side.  These include actions such as listening for user signups, logins, or logouts.  

Let's open the server.js file.  I am modifying the file from our last tutorial as follows:

const express = require('express')
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const session  = require('express-session'); // Authentication is stored in sessions, so we'll use express-session
const MongoStore = require('connect-mongo');  // Used to connect our session data to our MongoDB
const passport = require('passport'); // Passport is used for authentication

const app = express()
const port = 3000
require('dotenv').config(); 

// Connect to our MONGOOSE DB
const connectString = process.env.MONGODB;  
mongoose.connect(connectString, { useNewUrlParser: true }).then(
  () => { 
    console.log ('Succeeded connected to database');
   },
  err => { 
    console.log ('ERROR connecting to database: ' + err);
   }
);

// Initialize Passport
const initPassport = require('./passport/init');
initPassport(passport);
// Create the Session
app.use(session({
	secret: process.env.SESSION_SK,
	resave: true,
	saveUninitialized: false,
	cookie: {
    	httpOnly: false,
		sameSite: true,
		maxAge: 10* 4 * 60 * 60 * 1000,
	},
	store: MongoStore.create({
		mongoUrl: connectString,
		ttl: 10*4 * 60 * 60, // logout after 1hr
	})
}));
app.use(passport.initialize()); // initialize passport login sessions
app.use(passport.session()); // for persistent login sessions


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/api/login', (req, res, next) => {
	// general flow, 1) calls passport/login, 2) this function, 3) serializes in passport/init 4) deserializes in passport/init
	passport.authenticate('login', function(err, user, info) {
		if (err) {
			console.log('err');
			return res.sendStatus(400);
		}
		if (!user) {
			console.log('no user');
			return res.sendStatus(400);
		}		
		req.logIn(user, function(err) {
			if (err) { return next(err); } else {
				console.log(req.session)
				// return
				return res.sendStatus(200);					
			}
		});
	})(req, res, next);
});

/*** POST SIGNUP A USER ***/
app.post('/api/signup', (req, res, next) => {
	passport.authenticate('signup', registerUser)(req, res, next);
	function registerUser(err, user, info) {
		if (err) { console.log(err); return res.send(err) }
		if (!user) {
			return res.status(400).json(info);
		}
		if (user){
			req.logIn(user, function(err) {
				if (err) { return next(err); }
				// return
				return res.sendStatus(200);
			});
		}
	}
});

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid'); 
	req.logout(function(err) {
		console.log('logged out');
		console.log(err)
		req.session.destroy(function (err) {
			res.send();
		});
	});
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Let's take a closer look at what was changed.  We are requiring 3 new npm modules: express-session, connect-mongo, and passport.  

const session  = require('express-session'); // Authentication is stored in sessions, so we'll use express-session
const MongoStore = require('connect-mongo');  // Used to connect our session data to our MongoDB
const passport = require('passport'); // Passport is used for authentication

express-session and connect-mongo are both used to connect our login sessions to our Mongo database. These allow us to store a user login session on our database after the user has logged in.  Our server script can then connect and check our database if a user is logged in.  

We then initialize passport initPassport and start a session.

// Initialize Passport
const initPassport = require('./passport/init');
initPassport(passport);
// Create the Session
app.use(session({
	secret: process.env.SESSION_SK,
	resave: true,
	saveUninitialized: false,
	cookie: {
 		httpOnly: false,
		sameSite: true,
		maxAge: 10 * 4 * 60 * 60 * 1000,
	},
	store: MongoStore.create({
		mongoUrl: connectString,
		ttl: 10 *4 * 60 * 60,
	})
}));
app.use(passport.initialize()); // initialize passport login sessions
app.use(passport.session()); // for persistent login sessions

The above adds our passport init.js, signup.js, and login.js files for use.  The session then creates a connection between our server and database to handle the login session.  The session will be stored as a cookie on our server, and contain needed login information such as a unique identifier for the session, and when the session should expire for server and database ( maxAge & ttl).

The last part we added are the API routes:

app.post('/api/login', (req, res, next) => {
	passport.authenticate('login', function(err, user, info) {
		if (err) {
			console.log('err');
			return res.sendStatus(400);
		}
		if (!user) {
			console.log('no user');
			return res.sendStatus(400);
		}		
		req.logIn(user, function(err) {
			if (err) { return next(err); } else {
				console.log(req.session)
				// return
				return res.sendStatus(200);					
			}
		});
	})(req, res, next);
});

/*** POST SIGNUP A USER ***/
app.post('/api/signup', (req, res, next) => {
	passport.authenticate('signup', registerUser)(req, res, next);
	function registerUser(err, user, info) {
		if (err) { console.log(err); return res.send(err) }
		if (!user) {
			return res.status(400).json(info);
		}
		if (user){
			req.logIn(user, function(err) {
				if (err) { return next(err); }
				// return
				return res.sendStatus(200);
			});
		}
	}
});

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid'); 
	req.logout(function(err) {
		console.log('logged out');
		console.log(err)
		req.session.destroy(function (err) {
			res.send();
		});
	});
});

The above routes handle the client post actions when the user signs up, logs in, or logs out.  They utilize the passport scripts we created and sends authentication data back to the client.

Since, we've added new npm modules, we'll need to install them.  From our terminal within the server directory, install them by running the following:

npm install  express-session connect-mongo passport passport-local bcrypt-nodejs

We also need to create a session key in our .env file.  This can be any secret text that you like, and adds a security layer when sending data between our server and our mongo database.  In the example below, I am adding this under our MONGODB key created in our last tutorial.

MONGODB=mongodb+srv://<username>:<password>@cluster0.ltkorue.mongodb.net/?retryWrites=true&w=majority
SESSION_SK = mysecretkey

Building Our Client

Now we build our front end framework using VueJs. The frontend framework defines everything on our user's browser, including how the app looks via HTML & CSS.  It also handles our client side actions, for example when the user clicks "Login," the client side will post this action to our server.

Now, we'll be working from our client directory.  First, we'll be using the vue3-cookies module to get our authentication cookie on the client.  Let's install this now.  From our client directory, run the following:

npm install vue3-cookies --save

Next, open the App.vue file and rewrite the entire file as follows:

<template>
	<div>
		<main class="main">
			<form v-if="!authenticated">
				<input
					type="text"
					placeholder="Email Address"
					v-model="email"
				/>
				<input
					type="password"
					placeholder="Password"
					v-model="password"
				/>
				<input type="submit" value="Sign Up" @click.prevent="onSignup"/>
				<input type="submit" value="Login" @click.prevent="onLogin" />
			</form>
			<form @submit.prevent="onLogout" v-if="authenticated">
				<h1>You're Logged In!</h1>
				<br>
				<input type="submit" value="Logout" />
			</form>
		</main>
	</div>
</template>

<script lang="ts">
	import { defineComponent, onMounted, ref } from 'vue'
	import axios from 'axios'
	import { useCookies } from "vue3-cookies";

	axios.defaults.withCredentials = true
	export default defineComponent({
		setup() {
			const { cookies } = useCookies() as any
			return { cookies }
		},
		data() {
			return {
				email: "" as string,
				password: "" as string,
				result: "" as string,
				authenticated: false as boolean,
			}
		},
		computed: {
			checkCookie() {
				if (this.cookies.get('connect.sid')) {
					return true
				} else {
					return false
				}
			},
		},
		methods: {
			onSignup() {
				try {
				axios
				.post("/api/signup", { 
					email: this.email,
					password: this.password,
				})
				.then((response) => {
					this.authenticated = true
				}, (error) => {
					throw error || new Error(`Request failed`);
				})
				} catch(error:any) {
				}
			},
			onLogin() {
				try {
				axios
				.post("/api/login", { 
					email: this.email,
					password: this.password,
				})
				.then((response) => {
					this.authenticated = true
				}, (error) => {
					throw error || new Error(`Request failed`);
				})
				} catch(error:any) {
					// Consider implementing your own error handling logic here
					alert(error.message);
				}
			},
			onLogout() {
				try {
					axios
					.post("/api/logout")
					.then((response) => {
						this.authenticated = false
					}, (error) => {
						throw error || new Error(`Request failed`);
					})
				} catch(error:any) {
					// Consider implementing your own error handling logic here
					console.error(error);
					alert(error.message);
				}
			},
		},
		mounted(){
			this.authenticated = this.checkCookie
		}
	});
</script>

<style>
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff2)
        format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff2) format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff) format("woff");
    font-weight: bold;
    font-style: normal;
  }
  .main,
  .main input {
    font-size: 16px;
    line-height: 24px;
    color: #353740;
    font-family: "ColfaxAI", Helvetica, sans-serif;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
  }
  .main .icon {
    width: 34px;
  }
  .main h3 {
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    color: #202123;
    margin: 16px 0 40px;
  }
  .main form {
    display: flex;
    flex-direction: column;
    width: 320px;
  }
  .main input {
    padding: 12px 16px;
    border: 1px solid #10a37f;
    border-radius: 4px;
    margin-bottom: 24px;
    outline-color: #10a37f;
  }
  .main ::placeholder {
    color: #8e8ea0;
    opacity: 1;
  }
  .main input[type="submit"] {
    padding: 12px 0;
    color: #fff;
    background-color: #10a37f;
    border: none;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
  .main .result {
    font-weight: bold;
    margin-top: 40px;
  }
</style>

Let's explain the above.  The first major change is our login form:

<form v-if="!authenticated">
    <input
        type="text"
        placeholder="Email Address"
        v-model="email"
    />
    <input
        type="password"
        placeholder="Password"
        v-model="password"
    />
    <input type="submit" value="Sign Up" @click.prevent="onSignup"/>
    <input type="submit" value="Login" @click.prevent="onLogin" />
</form>
<form @submit.prevent="onLogout" v-if="authenticated">
    <h1>You're Logged In!</h1>
    <br>
    <input type="submit" value="Logout" />
</form>

We've added an HTML form that takes both the email and password inputs.  We've also added a signup and login button.  Below that is another form intended for logged in users, with only one button to log out.  Both forms use the v-if functionality provided by VueJs to check against an authenticated variable.  If the user is not authenticated, it shows the first login/signup form, and if the user is authenticated, it shows the second logout form.  

Implementing Vue3 Cookies

The next major highlight is the use of vue3-cookies:

import { useCookies } from "vue3-cookies";

axios.defaults.withCredentials = true
export default defineComponent({
    setup() {
        const { cookies } = useCookies() as any
        return { cookies }
    },

Per the vue3-cookies documentation, we are importing this module and making it available to our app during setup(). When a user logs in, our server sends a cookie to the client. It's important for our client to search for this cookie, especially on hard reloads, to see if we've already logged in.  Hence, later in this file we add a computed property to check for authentication by cookie:

computed: {
    checkCookie() {
        if (this.cookies.get('connect.sid')) {
            return true
        } else {
            return false
        }
    },
},

We utilize this function whenever our app mounts, which is added later in our script as follows:

mounted(){
    this.authenticated = this.checkCookie
}

The above check happens whenever the app mount, such as during a hard reload. Hard reload will clear most of our app data but does not clear cookies, hence we can check for authentication if our cookie is still present.

Adding Our Client Data

Next, we define the variables that our client will use.  In our case: email, password, and authenticated.  We can see these variables sprinkled into our app's HTML forms that we wrote earlier.

data() {
    return {
        email: "" as string,
        password: "" as string,
        authenticated: false as boolean,
    }
},

Handling User Actions

Finally, we add the javascript functions on the client for handling user signups, logins, and logouts.  You can also find these functions defined on our HTML form buttons that we wrote earlier.  These functions post the necessary user data to our server routes.

methods: {
    onSignup() {
        try {
        axios
        .post("/api/signup", { 
            email: this.email,
            password: this.password,
        })
        .then((response) => {
            this.authenticated = true
        }, (error) => {
            throw error || new Error(`Request failed`);
        })
        } catch(error:any) {
        }
    },
    onLogin() {
        try {
        axios
        .post("/api/login", { 
            email: this.email,
            password: this.password,
        })
        .then((response) => {
            this.authenticated = true
        }, (error) => {
            throw error || new Error(`Request failed`);
        })
        } catch(error:any) {
            // Consider implementing your own error handling logic here
            alert(error.message);
        }
    },
    onLogout() {
        try {
            axios
            .post("/api/logout")
            .then((response) => {
                this.authenticated = false
            }, (error) => {
                throw error || new Error(`Request failed`);
            })
        } catch(error:any) {
            // Consider implementing your own error handling logic here
            console.error(error);
            alert(error.message);
        }
    },
},

With that, your authentication app is ready to go!

Let's restart our client and server scripts that we ran earlier (press ctrl c to stop any existing scripts).  

From the client directory, run:

npm run dev

From the server directory, run:

node server.js

And, we should then see our app in action:

A short explanation for how to properly logout using PassportJs, Express-Session for single page web application.  This short tutorial will share how to fully logout server side and clear the client side cookie as well.

The short answer:

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid');  // clear the session cookie
	req.logout(function(err) {  // logout of passport
		req.session.destroy(function (err) { // destroy the session
			res.send(); // send to the client
		});
	});
});

A thorough explanation:

While the documentation for PassportJs and Express Session are relatively clear for login in a user, I could not find great documentation for how these all worked together to logout a user.  Hence, I'm not sure if the above is the official and proper way to logout, and only arrived at this by much trial and error.  My goal was to clear the session on both the server and client.  So, I'll walk you through a short summary of my tests and findings! 🤓

Logging out with the PassportJs logout function

app.post('/logout', function(req, res, next){
  req.logout(function(err) {
    if (err) { return next(err); }
    res.redirect('/');
  });
});

PassportJs provides the example above, but this won't work for my single page web app, as I want to avoid using res.redirect('/'). So below is my first re-write:

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	req.logout(function(err) {
		console.log(err)
	});
});

Using req.logout will logout the user and clear the cookie on our database, but it does not clear that pesky cookie on the client.  You can find this cookie by opening google developer console in your browser and clicking the applications tab.

Adding ExpressJs Clear Cookie and sending

Next, I am adding res.clearCookie() provided by ExpressJs.  I am also creating an empty send response to update our client (see code comments below):

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid');  // clear the cookie
	req.logout(function(err) {
		console.log(err)
		res.send(); // send to the client
	});
});

Interestingly, this also clears the cookie on the database, but just keeps updating our client side cookie to something new?

Finally, let's Destroy the Session in Express-Session

Express-session has a function to destroy our session.  Let's then destroy our session prior to sending to the client, as shown in the commented code below.

/*** LOGOUT A USER ***/
app.post('/api/logout', (req, res, next) => {
	res.clearCookie('connect.sid'); 
	req.logout(function(err) {
		console.log(err)
		req.session.destroy(function (err) { // destroys the session
			res.send();
		});
	});
});

After firing up our server again, we see that the above code clears the session in our database.  It also clears our cookie client side (Hooray!).

A starter example tutorial for connecting ExpressJs to a Mongoose database hosted on MongoDB.

Prerequisites

Here's what you will need in order to get started:

• Setup a MongoDB account to host your database.
• We will continue on the simple starter Vue3/ExpressJS app from our prior post.

Getting Started

First, let's clone our prior Vue3/ExpressJS app and rename it.  Run the following:

git clone git@github.com:Initial-Apps/vue3-express.git vue3-express-mongo

Now, let's move into our app and install our modules on our server:

cd vue3-express-mongo/server
npm install

Next, let's start the server to make sure all is working.  Run the following:

node server.js

Setting up MongoDB

Login to your MongoDB account: https://cloud.mongodb.com/

Select New Project and name your project. You can add members if you like. Then click Create Project.

Next, continue to Build a Database.

Select whatever plan you like and click create.

Next, create a username and password for your database, and be sure to save this info.

Then, select connect from My Local Environment (see below):

Finally, select Finish and Close. Hooray, we've setup our database! 🤓

Connecting ExpressJs to our MongoDB

Now let's work on our server to connect ExpressJs to MongoDB. To do this, we'll work on our server middleware file server/server.js. Let's open this file and get to work.  

I'm adding the following code to server.js just after defining our imported modules. I've added code comments as well.

require('dotenv').config(); // needed to read our environment variables
const mongoose = require('mongoose');  // We need the mongoose module
const connectString = process.env.MONGODB;  // This holds our username and password, stored as a environment variable
mongoose.connect(connectString, { useNewUrlParser: true }).then(
  () => { 
    console.log ('Succeeded connected to database');
   },
  err => { 
    console.log ('ERROR connecting to database: ' + err);
   }
);

Here's what the above code does:

• Adds the dotenv module so that we can store our MongoDB username and password as an environment variable.  This is preferred over placing this sensitive information directly in your code.
• Adds the mongoose module for connecting to our MongoDB database
• The connectString variable will hold our login credentials for MongoDB.  We'll set this up next.
• Finally, we add the connect script to connect to our DB.

Next, we have to setup our login and password for MongoDB as an environment variable.  You do not want to ever share this file because it has sensitive login information.  That said, I've created a example_env.txt file in our github repo to provide template.  

We make sure our environment credentials are hidden by opening your .gitignore file, adding the following to the end of the file and save:

# env files
.env

Next, we'll get our connect string from MongoDB. You can find your connect string format on your MongoDB dashboard.  Click connect and then connect by Drivers.

We are going to add our key using mongoose so we only need to pay attention to the Driver and the Connection String.

Select Node for the Driver like so:

Then copy and paste your Connection String:

Now create a file named .env and add your connect URL. The contents of the file should look something like this (replacing <username> and <password> with the MongoDB username and password we created in the last section). Save the file once this is added.

MONGODB=mongodb+srv://<username>:<password>@cluster0.ltkorue.mongodb.net/?retryWrites=true&w=majority

Then we install the modules we need for the connection.  From the terminal window that we used to run our node server (the one that we ran node server.js).  First stop the server (hit ctrl+c).  Now install the modules:

npm install mongoose dotenv

Now we can restart our server by running:

node server.js

If all runs properly, you should see the following on your console:

Congrats as you are now connected to your database!

What's Next

Next, we need to start using your new database for various data!  Want to see how we do that?  Stay tuned or subscribe as we continue this app.

AI is hot these days, and OpenAI has an excellent and powerful API for all to use! They have a nice tutorial for getting started, with a source repo built in ReactJs. I wanted to do this with Vue3 and share with the world. So without further ado, here's how to setup a starter app with OpenAI using Vue3 and Expressjs.

You can find more about OpenAI's quickstart guide example here.  This example app takes in an animal and spits out 3 suggestions for a pet name.  The quickstart app is built on ReactJs and Nextjs. This guide will rewrite the quickstart guide using Vue3 and ExpressJs.  Why, because I really like Vue3! 🤓

Prerequisite: Setting up an app with Vue3 and ExpressJs

This tutorial picks up from where our last tutorial left off.  If you want to setup your app from scratch, please see the below link:

Setting up Vue3, Vite, and Express

A simple example setup of Vue3 using Vite, with ExpressJS and NodeJS on the backend.

Initial AppsAndrew Akagawa

Otherwise, you can skip ahead by cloning the repo from the link below:

git clone https://github.com/Initial-Apps/vue3-express.git

Setting up the client side

Let's first start with some housekeeping. We'll give our app a new directory name and then move into our new repo:

mv vue3-express openai-quickstart-vue3
cd openai-quickstart-vue3

Now let's start the client side.  Move into your new apps client folder, install our modules, and run the dev script:

cd client
npm install
npm run dev

Hooray, we should now have a Vue starter app running! Navigate to http://localhost:5173/ to see it.

Setting up our OpenAI credentials

Now lets start to work on on server.  Open a new terminal, move in the server folder, and install our npm modules.

cd server
npm install

Next, let's make sure our environment credentials are hidden.  In the server directory, open your .gitignore file, add the following to the end of the file and save:

# env files
.env

This will keep your API credentials hidden to your git repo.

Next, create a new file and name it .env.  Copy and paste the following into your .env file.  Add your OpenAPI key.  

# Do not share your OpenAI API key with anyone! It should remain a secret.
OPENAI_API_KEY=

Setting up ExpressJs

Now, let's setup our server script.  Open the server.js file and rewrite as follows:

const express = require('express')
const app = express()
const port = 3000
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

require('dotenv').config(); // needed to read our environment variables

// the next 3 const integrate the openai API
const {Configuration, OpenAIApi} =  require("openai");
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

// this post function is a taken from openai quickstart example, but modified to work with expressjs
app.post('/api/generator', async (req, res) => {
  if (!configuration.apiKey) {
      res.status(500).json({
          error: {
              message: "OpenAI API key not configured, please follow instructions in README.md",
          }
      });
      return;
  }

  const animal = req.body.animal || '';
  if (animal.trim().length === 0) {
      res.status(400).json({
          error: {
              message: "Please enter a valid animal",
          }
      });
      return;
  }

  try {
      const completion = await openai.createCompletion({
          model: "text-davinci-003",
          prompt: generatePrompt(animal),
          temperature: 0.6,
      });
      res.status(200).json({ result: completion.data.choices[0].text });
  } catch(error) {
      // Consider adjusting the error handling logic for your use case
      if (error.response) {
          console.error(error.response.status, error.response.data);
          res.status(error.response.status).json(error.response.data);
      } else {
          console.error(`Error with OpenAI API request: ${error.message}`);
          res.status(500).json({
              error: {
              message: 'An error occurred during your request.',
              }
          });
      }
  }
  function generatePrompt(animal) {
  const capitalizedAnimal =
      animal[0].toUpperCase() + animal.slice(1).toLowerCase();
      return `Suggest three names for an animal that is a superhero.

      Animal: Cat
      Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
      Animal: Dog
      Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
      Animal: ${capitalizedAnimal}
      Names:`;
  }    
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

This updated code adds the openai generator route to our server script. The generator route is basically a rewrite of the the quickstart example provided by OpenAI, so that it works with ExpressJs. The server script makes all the API calls to OpenAI, so feel free to come back to this later and play around with it for fun!

We also must install the OpenAI API, and dotenv to read the access keys in our .env folder.  We do this by running the following install scripts:

npm install openai
npm install dotenv --save

Now we can run our server with the foll0wing command from the server directory to start our sever:

node server.js

Finally, let's rewrite the VueJs frontend

First, let's rewrite our App.vue file.  You can find this in the client\src\ directory. Basically, we are rewriting the OpenAI quickstart example from React to Vue as follows:

<template>
  <div>
    <Head>
      <title>OpenAI Quickstart</title>
      <link rel="icon" href="/dog.png" />
    </Head>

    <main class="main">
      <h3>Name my pet</h3>
      <form @submit.prevent="onSubmit">
        <input
          type="text"
          name="animal"
          placeholder="Enter an animal"
          v-model="animalInput"
        />
        <input type="submit" value="Generate names" />
      </form>
      <div class="result">{{result}}</div>
    </main>
  </div>
</template>

<script lang="ts">
	import { defineComponent, onMounted, ref } from 'vue'
  import axios from 'axios'

	export default defineComponent({
		data() {
			return {
				animalInput: "" as string,
        result: "" as string,
			}
		},
		methods: {
			onSubmit() {
        try {
          axios
          .post("/api/generator", { animal: this.animalInput })
          .then((response) => {
            this.result = response.data.result;
          }, (error) => {
            throw error || new Error(`Request failed`);
          })
        } catch(error:any) {
          // Consider implementing your own error handling logic here
          console.error(error);
          alert(error.message);
        }
      }
		}
	});
</script>

<style>
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff2)
        format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff2) format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff) format("woff");
    font-weight: bold;
    font-style: normal;
  }
  .main,
  .main input {
    font-size: 16px;
    line-height: 24px;
    color: #353740;
    font-family: "ColfaxAI", Helvetica, sans-serif;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
  }
  .main .icon {
    width: 34px;
  }
  .main h3 {
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    color: #202123;
    margin: 16px 0 40px;
  }
  .main form {
    display: flex;
    flex-direction: column;
    width: 320px;
  }
  .main input[type="text"] {
    padding: 12px 16px;
    border: 1px solid #10a37f;
    border-radius: 4px;
    margin-bottom: 24px;
    outline-color: #10a37f;
  }
  .main ::placeholder {
    color: #8e8ea0;
    opacity: 1;
  }
  .main input[type="submit"] {
    padding: 12px 0;
    color: #fff;
    background-color: #10a37f;
    border: none;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
  .main .result {
    font-weight: bold;
    margin-top: 40px;
  }
</style>

Congrats for setting up your Vue3 app with OpenAI!

You should now have a working app that harnesses the power of AI and ChatGPT (or text-davinci).  Refresh your http://localhost:5173/ to see it.  When you enter an animal in the text box, the AI API will give you suggestions for 3 names for this animal.  Now that you have the initial setup, feel free play around with all the possibilities that this AI technology brings!

A quick guide to getting started with Vue3, Vite, and ExpressJS & NodeJS for our backend.  Let's jump right in!

First, Let's Setup Vue3

First let's make a directory to house our app and open that directory.

mkdir vue3-express
cd vue3-express

Next, make sure you're up to date with node, npm, etc. and run the following.

npm init vue@latest

This will walk through the official Vue3 install script.  It will ask you to name your app. I named mine client.

For the rest of the questions, if you don't know the answer I recommend you answer no. When done with these questions, you will have a starter Vue3 app!

Finish the install by changing into the directory and installing the npm packages (use the following code):

  cd client
  npm install
  npm run dev

Hooray, we should now have a Vue starter app running! Navigate to http://localhost:5173/ to see it. Mine looks like this:

Setting up ExpressJs

Now we install ExpressJs.  First, we should start a new terminal in our parent directory named vue3-express.  Then create a new directory for our server, which I will name this directory server.  We then move into our server directory and initialize it in npm.

mkdir server
cd server
npm init

Next, we  install our needed modules: ExpressJs for our API posts, and Body-Parser to get the posted data.  We install these by running the following.

npm install express
npm install body-parser

Next, we setup our server script.  Create a new file titled server.js (or whatever you want to name your server file) and add the following:

const express = require('express')
const app = express()
const port = 3000
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));


app.post('/api', (req, res) => {
  console.log(req.body)
  res.status(200).json({ result: req.body.text });
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

The above is a very simple node server using express as a middleware to capture post data from our client.

Start the server by running:

node server.js

Finally, Let's Configure Vite and Create a Vue3 Test Form

Open a new terminal window and move back into our client directory and install Axios for post requests. Run the following:

cd client
npm install axios

First, let's configure Vite to proxy our server so the client and server ports can talk to each other.  Open vite.config.ts and add the the proxy info such that the entire file will now look like this:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
		proxy: {
			'/api': {
				target: 'http://localhost:3000',
				changeOrigin: true,
				secure: false,
				ws: true,
			},
		},
	} 
})

Next, lets completely rewrite our App.vue file (inside the src directory) so that it is a test form, to try out our post:

<template>
  <div>
    <main class="main">
      <form @submit.prevent="onSubmit">
        <input
          type="text"
          placeholder="Enter Anything"
          v-model="testInput"
        />
        <input type="submit" value="Test Server" />
      </form>
      <div class="result">{{result}}</div>
    </main>
  </div>
</template>

<script lang="ts">
	import { defineComponent, onMounted, ref } from 'vue'
  import axios from 'axios'

	export default defineComponent({
		data() {
			return {
				testInput: "" as string,
        result: "" as string,
			}
		},
		methods: {
			onSubmit() {
        try {
          axios
          .post("/api", { text: this.testInput })
          .then((response) => {
            this.result = response.data.result;
          }, (error) => {
            throw error || new Error(`Request failed`);
          })
        } catch(error:any) {
          // Consider implementing your own error handling logic here
          console.error(error);
          alert(error.message);
        }
      }
		}
	});
</script>

<style>
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff2)
        format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIRegular.woff) format("woff");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "ColfaxAI";
    src: url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff2) format("woff2"),
      url(https://cdn.openai.com/API/fonts/ColfaxAIBold.woff) format("woff");
    font-weight: bold;
    font-style: normal;
  }
  .main,
  .main input {
    font-size: 16px;
    line-height: 24px;
    color: #353740;
    font-family: "ColfaxAI", Helvetica, sans-serif;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
  }
  .main .icon {
    width: 34px;
  }
  .main h3 {
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    color: #202123;
    margin: 16px 0 40px;
  }
  .main form {
    display: flex;
    flex-direction: column;
    width: 320px;
  }
  .main input[type="text"] {
    padding: 12px 16px;
    border: 1px solid #10a37f;
    border-radius: 4px;
    margin-bottom: 24px;
    outline-color: #10a37f;
  }
  .main ::placeholder {
    color: #8e8ea0;
    opacity: 1;
  }
  .main input[type="submit"] {
    padding: 12px 0;
    color: #fff;
    background-color: #10a37f;
    border: none;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
  .main .result {
    font-weight: bold;
    margin-top: 40px;
  }
</style>

Now, you should be able to see the new form at http://localhost:5173/.  When you enter information and submit the form, you should see this info log on the server and then see it sent back to the client.

Congrats, you've setup a new node app using Vue3, Vite, and ExpressJS!  Thanks for reading and hope this helps.

An example for how to create custom theme color pallets in Bootstrap 5 using Sass. This post focuses on Bootstrap's color mapping functionality.

I was super happy to learn Bootstrap 5 is jQuery-less. Don't get me wrong, jQuery deserves it's place in legendary JS history, but doesn't play well with a lot of the latest frameworks today.

That said, it took me awhile to figure out how the Sass color mapping worked, so I shall share my experimentation in this post, using a new Vue app as an example!

Github repo here.

The Setup

First off, I'm creating a new Vue 3 app with Vite to compile our Sass. Feel free to skip this section if you're not interested in setting things up and just want to see the Sass customization.

Make sure you're up to date with node, npm, etc. and run the following.

npm init vue@latest

If you run into any issues, you can find the official instructions for starting a Vue 3 app provided here.

The installer asks a series of questions, that you can answer mostly no too as we're just using this as an easy setup to compile the sass.

Name the project whatever you like (mine is bootstrap-5-sass-example). Next, move into it when created and install.

cd bootstrap-5-sass-example
npm install
npm run dev

Hooray, we should now have a Vue starter app running! Navigate to http://localhost:3000/ to see it. Mine looks like this:

Now let's install bootstrap! Exit the running terminal ctrl+c and let's keep going:

npm install --save bootstrap
npm install --save @popperjs/core

Next, let's setup our Vite to compile Sass!

We start by making a scss file in our source directory. I'm making the following new file & path: src>assets>sass>main.scss, and leaving the main.scss file blank for now.

Vue is currently using Vite to compile everything, so we can reference the path to our sass file in the Vite config file (vite.config.ts) by adding the following in the export default defineConfig block:

  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `
          @import "@/assets/sass/main.scss";
        `
      }
    }
  }

Also, per the Vite docs, we need to install the Sass pre-processor by running the following (more info provided here):

npm add -D sass

Now we're almost Bootstrap ready!  

Let's test this out by adding some nice buttons. I'm going to grab some code from the Bootstrap website. We can add it into the main App.vue file in the source code (src>App.vue). I'm basically going to re-write the html template block inside this file with the following Bootstrap'd out code:

<template>
  <div class="container mt-5">
    <h1>Bootstrap Buttons!</h1>
    <div class="row">
      <div class="col">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
      </div>
    </div>
  </div>
</template>

We also need to import our sass file. Again, in the App.vue file we replace the style block to import our sass:

<style lang="scss">
  @import "@/assets/sass/main.scss";
</style>

Creating the custom Sass file

Note, this is where things first got confusing for me. Bootstrap gives you either an option to load all of bootstrap (with no access to customization functions), or load parts of bootstrap (see here). For the life of me, I could not get Option B (including only parts of Bootstrap) to work. Since, I wanted all of bootstrap, as well as access to functions I decided to do both! e.g. I wanted to have my cake and eat it too! 🎂

So here's my main.scss file (hacked together with both options):

// Custom.scss

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here


// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here


// 5. Import all the rest of Bootstrap 
@import "../node_modules/bootstrap/scss/bootstrap";


// Then add additional custom code here

Now lets run run the developer script in the terminal, to see things up and running:

npm run dev

It should look like this (with all the nice bootstrap colors)!

Now lets customize the Sass!

Bootstrap gives us some nice functions to do this. It's important to note where things are placed in the sass file for it to work properly, so pay attention to the comments in the main.cscc file.  

I'm going to head over to coolors to make a random new theme color palette. Here it is!

Now let's re-write bootstrap's usual color variables (primary, secondary, etc) in the main.scss file, just under the 2. comment:

// 2. Include any default variable overrides here
$primary: #D4CBE5;
$secondary:#CFC7D2;
$success: #BEA8AA;
$warning: #9E9885;
$danger: #7C7F65;

Notice these re-writes are added before loading Bootstrap's variables in the 3. comments. That's because Boostrap uses the !default tag on all of it's variables. That meas the theme will take Bootstrap's defined value by default, if no other value has been assigned prior.

And our buttons now look like this:

Adding our own classes

Awesome! What if we want our own custom names for colors (e.g. btn-lavender), and with all the nice functionality, like changing shades when hovering over a button? Bootstrap has a mapping function for that! So, using coolors again, here's a new palette:

Per the bootstrap docs, we can load the Bootstrap variables first then call the map-merge function to add our own new custom classes to our pallet!

First we define the custom colors after the 4. comment (under the variables and mixins):

// 4. Include any default map overrides here
// Create your own map
$custom-colors: (
  "dark-lava": #4B4237,
  "goldenrod": #D5A021,
  "alabaster": #EDE7D9,
  "spanish-gray": #A49694,
  "dim-gray": #736B60,
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Notice the map-merge function at the end.  That's what creates our new color classes.

Now let's test them in our html (App.vue) file by adding the following:

<h1>Custom Buttons!</h1>
<div class="row">
  <div class="col">
    <button type="button" class="btn btn-dark-lava">Dark Lava</button>
    <button type="button" class="btn btn-goldenrod">Goldenrod</button>
    <button type="button" class="btn btn-alabaster">Alabaster</button>
    <button type="button" class="btn btn-spanish-gray">Spanish Gray</button>
    <button type="button" class="btn btn-dim-gray">Dim Gray</button>
  </div>
</div>

And now we check out the site:

We now have a set of fully functional customized theme classes!

Accessing all of Bootstrap's colors

If you noticed, bootstrap has a ton of extra color classes!  However, they are not added by default so we can also activate them in our color mapping function.

In this example, I'll add the following: purple-100, blue-200, pink, and teal-800.

We add a bit more html code to our App.vue file:

<h1>Additional Bootstrap Colors</h1>
<div class="row">
  <div class="col">
    <button type="button" class="btn btn-purple-100">Purple-100</button>
    <button type="button" class="btn btn-blue-200">Blue-200</button>
    <button type="button" class="btn btn-pink">Pink</button>
    <button type="button" class="btn btn-teal-800">Teal-800</button>
  </div>
 </div>  

Also, we append to our main.scss file in the $custom-colors:

// 4. Include any default map overrides here
// Create your own map
$custom-colors: (
  "dark-lava": #4B4237,
  "goldenrod": #D5A021,
  "alabaster": #EDE7D9,
  "spanish-gray": #A49694,
  "dim-gray": #736B60,
  "purple-100": $purple-100,
  "blue-200": $blue-200,
  "pink": $pink,
  "teal-800": $teal-800,
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Notice, since we use this function after loading the bootstrap variables, we can just add the extra color variables to our custom colors.

And the final site looks like this:

Final thoughts

Hope this helps you get started setting up Sass on Bootstrap 5!

Get the source code here: https://github.com/initialapps/bootstrap-5-sass-example

Locked out of your Digital Ocean server?  Here's how to get back in.  This short article is for anyone that has lost access to the SSH key used to setup their Digital Ocean droplet.

This article will not help you, if you do not know the username and password used to setup your server.  In that case, you will have to instead reset your root password per the Digital Ocean docs.

Finally, we assume that you have some basic knowledge of Ubuntu, SSH keys, command line editors (if not, just google it).

Basic overview of the following steps:

• Access the Digital Ocean online terminal
• Update the SSH config file to allow username and password login
• Setup new SSH key
• Revert your SSH config file

Step 1: Access the Digital Ocean online terminal

Log into your Digital Ocean account, select your droplet, and click Access > Launch Console.

This will get you into your droplet through the online terminal.  

If you're brave enough, you can try to update your ssh key directly through this terminal, but the interface is a bit clunky and crashed on me. Hence, I recommend the next steps.

Step 2:  Allow username and password

Next, we'll update the droplet's config file to allow SSH by username and password. Note, the below will be a less secure setup, but we'll change it back afterward.

Using your favorite editor (nano below), open the file:

sudo nano /etc/ssh/sshd_config

We'll update this file to turn off PAM (Pluggable Authentication Modules).  Find this line and update to no:

UsePAM no

We'll also update this to allow password authentication:

PasswordAuthentication yes

Save and exit the file, and reload SSH on your droplet:

sudo systemctl restart ssh

Step 3: Setup your new SSH key

If you don't have one already on your local machine, set this up:

ssh-keygen -t rsa

Copy your key to the server, using your username and droplet IP address in place of the demo below:

ssh-copy-id username@droplet_IP

You should now be able to complete the above, and access your droplet with your original username and password.  Note, if you do not know your username and password, you will have to instead reset your root password per the Digital Ocean docs.

Step 4: Revert your SSH config file

Now that you are setup with SSH keys, you can reset your config file back to its original settings.  You can either use the Digital Ocean terminal, or SSH into your droplet ssh username@droplet_IP.

Using your favorite editor (nano below), open the file:

sudo nano /etc/ssh/sshd_config

Revert this file to turn PAM on:

UsePAM yes

Revert password authentication to off:

PasswordAuthentication no

Save and exit the file, and reload SSH on your droplet:

sudo systemctl restart ssh

Your droplet should now be good to go!

We're excited to be sharing our first OC Civic Coder's project to help easily visualize where Corona Virus is spreading in Orange County using data provided by the OC Health Care Agency.  This open source app uses visualization charts, and bubble maps to show where Covid-19 is in Orange County, and how it is spreading over time.  

The goal of this app is to provide tracking data to the general public that's easy to understand, in efforts to help slow the spread and see if our preventative measures are working.  This app is hosted on the OC Civic Coders site (check it out)!

How Corona Virus has spread in Orange County over time by city

Case counts have been gradually on the rise from mid March through April, however hospitalizations and ICU counts have been relatively flat.  The dropdown menu provides individual case counts by city, thus allowing locals to track and encourage preventative measures close to home.  The app additionally breaks down Covid-19 case ratios by gender and age.

A bubble map for where Covid-19 is occurring in Orange County

This bubble map displays visual representations for the amount of Corina Virus cases by city in Orange County.  The dropdown menu additionally lets you visualize by case counts per population, which in turn displays some interesting results as opposed to visualizing by counts alone.  The sidebar to the right sorts case counts from largest to smallest and points out the location when hovered over.

In addition, the app shows how the spread initially began, trending data by travel related, vs locally spread.  Data related to travel is no longer being tracked as most cases now are locally spread within the community.

Built open source by local civic coders

The Orange County Covid-19 tracker is an open source project made by local residents.  It's an interesting example of coding for causes together to help the local community.  The code uses Cheerio, Axios, and Node to get the data from the city website.  It then uses Chartjs and Mapbox and D3js to visualize the data.  You can view, download, and contribute to this code on GitHub.

Welcome to the very first meetup for OC Civic Coders! Grab your laptops and come out to build something great. Feel free to work individually or team up. Connect with others to learn and share knowledge.

Agenda:
1. New project ideas.
2. Share your experience levels and what you'd like to gain from the group.
3. For those working on a project, share your progress.
4. For those completing a project, share what you've created!
5. Open networking and collaboration time.

Tips for getting started:
- Work on something you're passionate about.
- Work on something practical. For beginners start of with a small project, and simple framework. For others, work on something with a reasonable enough scope to complete it. Look for existing data resources before starting a bunch of code work.
- Be prepared to learn. Whether you're just starting out, or using this as an opportunity to learn a new framework, anything can be achieved with google, patience, and coffee.

RSVP Here: https://www.meetup.com/OC-Civic-Coders/events/267756002/

Starting 2020 of right with another civic hacking project.  This time, we've thrown together an app that visualizes traffic collisions in Los Angeles.  Each week there are about a thousand traffic collisions in LA.  This data visualization tool can hopefully help for deeper insights, which can lead to new solutions.  Big thanks to lacity.org for providing the data!

View the demo website here

https://developer.initialapps.com/la-collisions/

View the code on GitHub

https://github.com/initialapps/la-collisions

Project Goals

The goals for this project are simple:

• Exercise some JS data processing techniques
• Provide something civically engaging
• Create something open source, and see where others take it

Feel free to pull the project from GitHub!

Contributing To This Project

Civic hacking is an awesome way to learn coding, while providing value to your local community.  This pretty close to a full vanilla javascript project, so contributing is easy.  

Built With

• Mapbox - For the maps
• Bootstrap - Front end framework
• jQuery - Who doesn't use jquery?
• chartjs - Nice charts
• flatpickr - Great date range picker

Getting Started

The app is a simple, single page built with Mapbox. Simply grab a Mapbox API key and clone this repo to use.

Connecting With Contributors

Please comment below to connect with others.  Share what you'd like to see from this project, or share your creations.  Let us know what to do next!

Happy Coding!

IMC Intertech is pushing the limits of micro precision parts, with parts less than .012 cu inches, and tolerancing on the level of microns.  

We're thrilled to be working with IMC Intertech on the launch of their new website.  When it comes to micro precision and extremely small parts, IMC Intertech provides unparalleled capabilities, offering incredibly small micro-parts, micro-tubes, micro-needles, and micro-sub-assemblies.  

IMC Intertech's Unique Capabilities

IMC Intertech provides solutions for a very niche specialty of extremely small part fabrication.  Our goal was to help showcase that through use of both wide background images and focused part imagery to gain perspective on just how incredible their capabilities are.

IMC's capabilities opens new possibilities for designers and innovators, ranging from medical devices, electronics, and many others.

Site Features

IMC Intertech is built on WordPress.  The site seamlessly integrates with procurement software - KaizenDesk, to streamline your supply chain paperwork, while growing your leads.

• Search engine optimized
• Blog ready
• Mobile optimized
• Fast load times
• Integration with KaizenDesk Online Quoting and Invoicing Platform

Looking to create a new site, or upgrade your current site? Please, don't hesitate to reach out to us!

Mapbox GL JS is a powerful mapping API, that can create really nice data visualizations and styling.  Their maps look really clean and do a nice job at communicating engaging information interactively.  

That said, getting started with Mapbox, and it's data driven styling may not be completely straightforward, and required me to do a little testing to get started.  For this post, I'll be sharing notes on how this great tool works, using the example Mapbox has provided.

Style circles with a data-driven property

Mapbox provides a nice example for how data driven styling works, which maps out ethnicity data in San Francisco.  Check out the code by clicking here, or also pasted below:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Style circles with a data-driven property</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    zoom: 12,
    center: [-122.447303, 37.753574]
});

map.on('load', function () {

    /* Sample feature from the `examples.8fgz4egr` tileset:
       {
           "type": "Feature",
           "properties": {
               "ethnicity": "White"
           },
           "geometry": {
               "type": "Point",
               "coordinates": [ -122.447303, 37.753574 ]
           }
       }
     */
    map.addLayer({
        'id': 'population',
        'type': 'circle',
        'source': {
            type: 'vector',
            url: 'mapbox://examples.8fgz4egr'
        },
        'source-layer': 'sf2010',
        'paint': {
            // make circles larger as the user zooms from z12 to z22
            'circle-radius': {
                'base': 1.75,
                'stops': [[12, 2], [22, 180]]
            },
            // color circles by ethnicity, using a match expression
            // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
            'circle-color': [
                'match',
                ['get', 'ethnicity'],
                'White', '#fbb03b',
                'Black', '#223b53',
                'Hispanic', '#e55e5e',
                'Asian', '#3bb2d0',
                /* other */ '#ccc'
            ]
        }
    });
});
</script>

</body>
</html>

If you haven't already received an access token from Mapbox, you can signup for one here.

Mapbox examples are easy to get started, as you can get up and running simply by copying their code into a text file and saving with an html extension (e.g. mapbox-demo.html).  You will just need to add your access token, by finding this line in the code, and adding it:

mapboxgl.accessToken = '<your access token here>';

How the Styling Works

Circle Radius

Stops

By default, this allows you to set radius based on zoom level.  The format is: [[zoom, size], [zoom, size]].  

To demonstrate this, let's change our stops to be from zoom level 12 to 14, so we can see a more dramatic shift:

'circle-radius': {
	'base': 1.75,
	'stops': [[12, 2], [14, 180]]
}

Now, if you zoom in just a little, here's the result:

Base

The base is the rate at which the transition takes between stops.  It defaults to 1, which is a linear rate.  You can go above or below that for an exponential rate in either direction.

To demonstrate this, lets initiate our map to load at a zoom level exactly in between our stops, at 13:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    zoom: 13,
    center: [-122.447303, 37.753574]
});

From here, we can try base levels of both 1 and 100, and compare how they look on loading:

Pretty dramatic difference!  Setting the base to 1 gives us a linear relationship, so the dot size is half way between the set points on your stops.  Moving the base to 100 gives us a more exponential curve, hence the dots are still small when loaded at midpoint, but will sharply increase as you near the stop setting.

Circle Color

The circle color property is more straight forward and should just match the color to a given string property in the geojson object.

The format is: ['match',['get', object key], object value, color,...]

The given json object has the following values for ethnicity: White, Black, Hispanic, Asian.  Let's try changing the color for 'White' to be white:

'circle-color': [
    'match',
    ['get', 'ethnicity'],
    'White', '#ffffff', //hex color for white
    'Black', '#223b53',
    'Hispanic', '#e55e5e',
    'Asian', '#3bb2d0',
    /* other */ '#ccc'
]

Now take a look at our map.  It's a little more difficult to see, but the yellow dots have now changed to white.

Final Thoughts

The above post just scratches the surface of what Mapbox can do with data driven styling.  You can additionally set sizes based on json properties, add map markers and more.  Hope this helps you gain a footing with this API.  If you find this info helpful and would like more content about Mapbox or data visualizations, please feel free to comment below.

If you've made the switch from SQL to NoSQL, you've probably started to dabble into Mongoose population as a means to make up for the lack of table joins.  This, unfortunately, is one area where NoSQL databases fall short of their SQL counterpart.  Mongoose population can be tricky to setup.  This article take a deeper dive into Mongoose populate, to help avoid some pitfalls that you may encounter setting this up.

What Mongoose Populate Does

Mongoose stores data sets in JavaScript objects, hence you may have a JS object for Users.  A user in turn, may have friends, which are an array of other Users.  They will also likely have arrays of other objects, such as Posts, Comments, and even Comments of Comments.

In SQL you could simply perform table joins.  For NoSQL databases like Mongo, your best option is to create separate JS object schemas for each, and reference the connection by object ID.  For example, the User object will contain arrays for other Users, Posts, Comments, etc.  Each array would only contain the object IDs of the objects they are pointing to (i.e. User IDs, Post IDs, Comment IDs, etc).  When querying data, you can then call the populate function to load the data of the associated object for the arrays that you select.

Yes, this has drawbacks.  For example, if you delete an object such as a User, you will also need to find everywhere that references that user, and delete the user ID from there as well (such as a user's friends).  Not doing so can cause issues when trying to populate the ID's that no longer exist.  Even with these drawbacks, you'll find that working with the populate function is still probably your best option, over other JavaScript hacks.

Populating Across Multiple Levels

Mongoose provides great documentation for how to get started with populating arrays.  Below is a simple example they have provided for populating across multiple levels.  In this case we have Users, with an array of friends that are other Users.  We would like to populate the object to show the user's friends, and friends of friends.

First, we need the User schema:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const ObjectId = mongoose.Schema.Types.ObjectId;


const userSchema = new Schema({
      name: String,
      friends: [{ type: ObjectId, ref: 'User' }]
});


const User = mongoose.model('User', userSchema);

Notice, we are only tracking an array of Object IDs for the user's friends.  Those Object IDs are just other User IDs.

Next, we'll query by user name, and populate friends, and friends of friends:

User.findOne({
    name: 'Val'
}).
populate({
    path: 'friends',
    // Get friends of friends - populate the 'friends' array for every friend
    populate: { path: 'friends' }
}).
exec(function (err, user) {
    if (err) return handleError(err);
    console.log('Here is the populated user: ', user);
});

The return value should convert all of the Object IDs in the friends array, to the actual data in the associated User schema.  In the above example, we've done this for 2 levels, so it will also populate data for friends of friends.

Populating With Multiple Schemas Across Multiple Levels

In many applications, you'll want to do a lot more populating.  Here's how to do that. Let's add posts and post comments to our object.

First off, let's define our Schemas. These will need to be readily available:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const ObjectId = mongoose.Schema.Types.ObjectId;


const userSchema = new Schema({
    name: String,
    friends: [{ type: ObjectId, ref: 'User' }],
    posts: [{ type: ObjectId, ref: 'Post' }]
});
const postSchema = new Schema({
    name: String,
    content: String,
    comments: [{ type: ObjectId, ref: 'Comment' }]
});
const commentSchema = new Schema({
    name: String,
    content: String
});


const User = mongoose.model('User', userSchema);
const Post = mongoose.model('Post', postSchema);
const Comment = mongoose.model('Comment', commentSchema);

Next, we query and populate the document.  Let's say we're no longer interested in friends of friends, but we want to populate friends, posts, and post comments.  Here's how we populate these:

User.findOne({
    name: 'Val'
}).
populate({
    path: 'friends',
    model: 'User'
}).
populate({
    path: 'posts',
    model: 'Post',
    populate: {
        path: 'comments',
        model: 'Comment'
    }
}).
exec(function (err, user) {
    if (err) return handleError(err);
    console.log('Here is the populated user: ', user);
});

Notice, how we now have defined the model in each object.  Mongoose will often need this with multiple schemas.  

To populate multiple paths, we simply repeat the populate function.  To dig deeper, we just populate a level deeper within the object.  

Final note, if you get stuck, be sure to log out your errors on execution.  Mongoose provides good error handling for those who listen!