Allow me to introduce WanderMind, a fun and interactive platform that allows users to chat with it while sharing and displaying memes in real-time.

Architectural Overview

The architecture of our web chat meme app follows a three-tier structure: frontend, backend, and database.

Presentation Tier

This tier represents the user interface and handles the presentation logic of your application.
It includes components such as HTML and CSS that render the chat interface and display memes to the user.

Application Tier

This tier contains the business logic and application functionality. It handles the processing of user inputs, and meme generation.

The application tier integrates with the data tier to retrieve and store data related to users, chat history, and memes.

Data Tier.

This tier involves the storage and management of data used by your application.

I used Azure SQL DB and Blob storage as the data tier.
Azure SQL DB is used for storing structured data such as 'id', meme url and it's caption.

Blob storage is utilized for storing the meme images generated by your application. It offers scalable object storage for unstructured data like images and provides efficient retrieval and serving of static content.

Technology Stack

To bring the web chat meme app to life, I used HTML, CSS, and JavaScript, to create the user interface and handle the client-side interactions.

On the server side, I employed Node.js and Express.js to build a scalable and efficient backend. Furthermore, I leveraged the power of Azure SQL DB and Blob storage to store user data and meme content securely.

The Web app was deployed using Azure App Service as well.

Process

This article is only focusing on the deployment to Azure using Azure App Service and Database storage using Azure SQL and Blob services.

If you'd like to view the code base I created for the web app, check here

Using Azure SQL and Blob Services

Azure Blob service.

• On your Azure portal and search storage accounts.
• Click on create, supply all the required details and go to resource.

• Under Data storage, click containers. Under "public access level" , select container and name it.
• Upload each meme to the blog container and note each url that come with the uploaded meme. It will look like this https://.blob.core.windows.net//giphy (2).gif

Azure SQL Database.

Follow these steps to create an azure SQL Database.

• On your azure portal go to SQL database and click create. Supply your details and create you SQL server.

When creating your server, maeke sure you select SQL authentication for authentication methods.

• In Azure Data Studio create a connection and write the following SQL commands.

This interface will be used to create a table called "Memes", insert and store the memes in our Azure Sql Db.

CREATE TABLE Memes (
  id INT PRIMARY KEY,
  url VARCHAR(255),
  caption VARCHAR(100)
);

SET IDENTITY_INSERT Memes ON;
-- Assuming you have a table named "Memes" with columns "id", "title", and "url"

-- Inserting a single row
INSERT INTO Memes (id, caption, url)
VALUES (1, 'Funny Meme 1', 'url');

-- Inserting multiple rows at once
INSERT INTO Memes (id, caption, url)
VALUES
  (2, 'Funny Meme 2', 'url'),
  (3, 'Funny Meme 3', 'url'),
  (4, 'Funny Meme 4', 'url'),
  (5, 'Funny Meme 5', 'url');

• In your node js file, include this line of code below to connect to your Azure Sql Database.

const config = {
user: '',
password: '',
server: '<name>.database.windows.net',
database: '',
options: {
encrypt: true,
},
};

Deployment to Azure Using App Services.

So I did 2 things that some may find interesting.

1. I deployed the meme app itself using Azure Web App Service
2. I then embedded the Web app on a static site that was also created with Azure.

I honestly had no reason for doing this, I just felt it will be fun to do that😅

Deployment Using Azure Static Web App
To deploy the static content of the web app, I used "Azure Static Web App"

• Go to your azure portal and search static web app.
• Click create, fill in the details and select what works for you in terms of pricing. Use github as a deployment source and point to your location for your api, your app, and output location. -Then click review and create. Your URL will be ready for use.

Using Azure App Service to deploy the Web Chat.

• On your portal, search App Service and created a WebApp. Choose "code" in the publish section of the web app creation.

• Click review and create. Then go to resource

• Under deployment center click FTPS credentials and note them or copy them.

• Download Filezilla
  It is a free and open-source FTP application that supports various platforms and protocols.

• Click on create a new site on the filezilla interface and paste your FTPS credentials where relevant and make a connection.

-Copy all the relevant code and files to the /site/wwwroot/ directory on filezilla

• Visit the URL on your web app created and everything should be up and running

Demo

Try WanderMind out 👉🏾Here