Fake REST API with JSON-Server

Fake REST API with JSON-Server (backend) and vanilla HTML and JavaScript (frontent)

For the 2023 Rugby World Cup, I created a sweepstake for my friends and I. The frontend is essentially vanilla HTML and JavaScript deployed as an Azure Static Web App while the backend is a Fake REST API with JSON-Server deployed as an Azure App Service. To use the app, the user must enter their name and click Sign Up. Then, a team will be chosen for the user at random. If the team has already been allocated, the user will be asked to refresh the browser and try again. If the user enters a name which is not unique, the user will be asked to enter a unique name. Finally, if all teams have been allocated, the user will be informed. The dubliners2023worldcupsweepstake.com domain name was procured from Namecheap

Close Project

Chatbot

Interactive Compute Chatbot

Created an interactive chatbot using React.js and deployed it to Heroku. The eddiechatbot.xyz domain was procured from Namecheap and the SSL/TLS encryption is handled via Cloudflare. The chatbot provides assitance with the following: Cloud Vendors, SQL, Free AntiVirus, Useful Tutorials, and SSL Certificates.

• Visit site

Close Project

E-commerce

Book counselling and psychotherapy sessions

Using Ruby on Rails, I created a web application where users can schedule and pay for counselling sessions with a trained professional. In addition, users can view all upcoming sessions and leave comments for the counsellor.

Devise was used to handle authentication and when a user signs up, he/she must complete Google reCaptcha verification. The eddiestackmindfulproject.com domain was procured from Namecheap and the site uses SSL/TLS encryption which is handled via Cloudflare.

The e-commerce functionality is handled via Stripe and the web application is using test API keys. To test the e-commerce functionality, please use the following values:

Card Number	4242424242424242
Year	Any future date (MM/YY) e.g. 02/25
CVC	Any 3 digit number e.g. 123
Post Code	12345

• Visit site

Close Project

Build Docker Container

Dockerize a React.js application and deploy to Docker Hub

For the purposes of this tutorial, I'll be cloning a React application from my GitHub repository. The app which I created is a quiz which contains seventeen general knowledge questions in total but the app will only ever display five questions at random. If you would prefer to dockerize your own React application, please proceed to step 3 of the Dockerize React App instructions and ensure that all prerequisites are installed. Finally, the instructions were written under the assumption that all users will be using Ubuntu. If you're using a Windows machine, here are instructions to install Windows Subsystem for Linux.

Prerequisites

- Docker
- npm
- React
- React Bootstrap: npm install react-bootstrap bootstrap
- Docker Hub Account

Dockerize React App

1. On your terminal, enter git clone [email protected]:x19172176/react-quiz.git
2. If you haven't already done so, enter npm install to install npm. Otherwise, proceed to the next step
3. At the root of your application, create a file called Dockerfile with the command touch Dockerfile. Alternatively, you can create the file manually
4. Retrieve the code from this link and paste it into the newly created Dockerfile
5. At the root of your application, create a file called nginx.config with the command touch nginx.config. Alternatively, you can create the file manually
6. Retrieve the code from this link and paste it into the newly created nginx.config
7. At the root of your application, create a file called .dockignore with the command touch .dockerignore. Alternatively, you can create the file manually. Once created, make sure to add node_modules and save
8. Build the Docker image with the command docker build -t react-quiz . (make sure to include the full stop). If you're using your own Docker application, please consider replacing react-quiz with the name of your React application to avoid confusion
9. When you see the message on-screen inicating that the build was successful, you can verify by entering docker run -p 3000:80 react-quiz. Proceed to http://localhost:3000/ and if the quiz is displayed, the build was successful

Deploy to Docker Hub

1. Login to Docker Hub using the folllowing command: Docker login. Follow the on-screen instructions
2. Tag the Docker image by entering docker image tag react-quiz [username]/react-quiz. Make sure to replace [username] with your Docker Hub username
3. Push the image to Docker Hub by entering docker push [username]/react-quiz

Close Tutorial

Deploy Docker Container to Azure

Create Azure web app using Docker Container

With Microsoft Azure, you can deploy Docker Containers using Azure's App Services feature free of charge. This is particularly useful when your credits run out or when your free trial ends. Click here to view an example of a Docker Container deloyed to Azure. For this tutorial, I will be using my own Docker Container but you can use yours if you wish.

Prerequisites

Azure Account

Steps

1. Login to the Azure Portal
2. In the search bar in the top of the screen, enter App Services and click on the service once it appears
3. Click + Add
4. On the Basics tab, specify the following settings (replace [PLACEHOLDER] with names specific to you or the container). Leave all other settings as they are:

Subscription	Choose your subscription
Resource Group	[PLACEHOLDER RESOURCE GROUP] (create new)
Name	[PLACEHOLDER NAME]
Name	Docker Container
Operating System	Linux
Region	Choose closest geographical region
Sku and size	Free F1

5. Click Next : Docker > and ensure the criteria corresponds to the following:

Options	Single Container
Image Source	Docker Hub
Access Type	Public
Image and tag	eddiestack/react-quiz

6. Select Review + create and then click Create
7. Wait for the Web App to deploy and once deployed, select Go to resource
8. Click on the URL generated and you should be greeted with the quiz

Close Tutorial

Create & Manage Kubernetes Cluster

with Linode Kubernetes Engine (LKE)

For this tutorial, I will be demonstrating how to create a Kubernetes Cluster with Linode. At the time of writing, Linode are offering new users a 60-day free trial along with $100 credit. Simply click on this link in order to avail.

Steps

1. On your terminal, install kubectl using the following command curl -LO https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/linux/amd64/kubectl
2. To ensure that the file is executable, enter chmod +x ./kubectl
3. Move the command into your path by entering sudo mv ./kubectl /usr/local/bin/kubectl
4. Login to Linode -> Create -> Kubernetes Cluster
5. Create the Cluster using the following settings and make sure to replace [PLACEHOLDER LABEL] with a more suitable name:

Cluster Label	[PLACEHOLDER LABEL]
Region	Select closest geographical region
Kubernetes Version	Latest Version (1.18 at the time of writing)
Add Node Pools	3 x Shared CPU Linode 2 GB

6. Wait for the Cluster to deploy and once deployed, open the Kubeconfig file which is automatically generated

7. Copy the code and in your terminal, enter nano kubeconfig.yaml
8. Paste the code into the file on the terminal and save
9. Enter the command export KUBECONFIG=kubeconfig.yaml
10. Retrieve the code from this link and enter the command nano quiz-deployment.yaml in your terminal
11. Paste the code retrieved in the previous step into the file on the terminal and save
12. To apply the changes, enter kubectl apply -f quiz-deployment.yaml in your terminal
13. Retrieve the code from this link and enter the command nano quiz-service.yaml in your terminal
14. Paste the code retrieved in the previous step into the file on the terminal and save
15. To apply the changes, enter kubectl apply -f eddiestack-service.yaml in your terminal
16. Log back in to Linode in your browser and select NodeBalancers

17. Copy the IP Address and paste it into a new tab in your browser. If all previous steps were successful, you should be be greeted with the quiz

Close Tutorial