/kura-gr5

This repo contains the final project of Group 5.

Primary LanguageCSS

Final Project: Grocery Web Application

The source codes and other resources for for the application deployed can be found in this link here on codebasics.

👉Link to instructions from Kura Labs: here

Goal:

In this python project, we will build a grocery store management application. It will be three-tier application with:

  1. Front end: UI (User Interface) is written in HTML/CSS/Javascript/Bootstrap

  2. Backend: Python and Flask

  3. Database: RDS mysql

Architecture:

Software Tools:

  • AWS account: set up an account and a user.
  • AWS: ECS, ECR, RDS, EC2, CloudWatch
  • CI/CD Pipeline: Circle CI
  • Infrastructure as Code (IaC): Terraform
  • Testing: Pytest

Procedure:

Part 1 - Building the app locally

Part 2 - Setting up RDS database and deploying on the cloud

  1. Create an Ubuntu/Linux AWS EC2 instance.
  2. Install Nginx. Use this link.
  3. Copy the files to this path. You can also clone the repository and delete files that are not used for the application.
cd /usr/share/nginx/html
  1. Install mysql client on the EC2. You can follow this tutorial.
  2. Created RDS database on AWS.
  3. Set up the schema of the data tables on your local MySQL Workbench database and imprort it to the RDS database on AWS.
  4. Connect to the RDS from the EC2 through MySQL client; use this command:
sudo mysql -h {endpoint of your database} -P 3306 -u {database_username} -p

This will prompt you to enter the database password.
After you input the password, your web app is now connected to your database.

Part 3 - Infrastructure as Code (IaC):

Provisionning the infrastructure

  1. Install terraform.

Part 4 - Circle CI Set up

Used resource from punkdata.

Part 5 - Setting up the login page

Instead of building a frontend for the login page, we decided to use AWS Cognito.
Follow the link for the setup.

Note: You must set up HTTPS on Nginx before setting up the URLs under App Integration > App Client Settings.

The URLs must be ‘https’, with exception of urls with localhost where ‘http’ is allowed. Here is the source.

For mor information visit the Amazon Cognito - Developer Guide.

Part 6 - The Front-End Modifications

After adding AWS Cognito for authentication, we did not have a way to log out of the application once we have loged in.
For this, we added a logout button. We used an icon from zmdi.
Below is the added code for the logout button in ''blue x'' in the index.html file line 37, order.html file line 35, and the manage-product.html file line 36.

<a href="logout.html">
    <i class="zmdi zmdi-close-circle" title="Logout"></i>
</a>

See picture below.

Sources visited:

  1. https://docs.nginx.com/nginx/deployment-guides/single-sign-on/cognito/#cognito-domain-name
  2. https://cran.r-project.org/web/packages/cognitoR/readme/README.html
  3. https://techexpert.tips/nginx/enable-https-nginx/
  4. https://www.templateshub.net/demo/Mentor-Bootstrap4-Admin-Dashboard-Template/icons-material.html

#This is a comment