Project 1 - Site Created 2 ways on AWS

 

200 points

Due dates - Oct. 6, 11pm

INDIVIDUAL or GROUP Work - YOUR choice to work individually or in a group but, the requirements are the same.

 

 

---

 

 

 

Goals of this Project

You will create a website consisting of traditional static pages together with a ReactJS Single Page Application ("App") that serves as the frontend foundation for Project 2. It will contain a Home page, About page, Contact page, Sign In page, and an App page that serves as the ReactJS SPA that will serve as the frontend foundation for Project 2.You will then deploy in 2 different ways on AWS (cloud). The website should be for a startup company dealing in Computer Vision and ML technologies. You must come up with the idea of what the company produces keeping Project 2 requirements in mind.

 

 

 

 

PART 1 - Create frontend content

• using HTML, CSS and Javascript (Bootstrap --learn on own) - you are to create a Home Page, About and Contact page and have an additional page that is called "App". Additionally in the navigation bar across the top is a Login link that brings up a sign in page..

• The "App" page shall be implemented entirely as a ReactJS Single Page Application (SPA). This page serves as the frontend foundation for Project 2 (read detals there).

  At this stage, the SPA does not require a backend, nor does it require a fully defined application purpose. The application purpose and functionality will be determined during the Project 2 proposal phase.

• Instead, it should demonstrate:

  • multiple React components ( at least three reusable React components, excluding the top-level App component).
  • component composition
  • state management
  • routing/navigation within the SPA (if appropriate)
  • responsive layout using Bootstrap
  The ReactJS SPA created in this project serves as the frontend framework for Project 2. In Project 2, after the proposal phase, this SPA will be extended with application-specific functionality, a Node/Express backend, Google Cloud services, and ML services/APIs, etc.
  
  
• Client-side JavaScript should be used for minimum 2 GUI interactions. One must be to realign the menu when changing scale of the viewed web content (think browser to mobile) using Bootstrap. The other should be related to your "App" (a SPA) and should demonstrate React state or component interaction within the "App"".
• Images and graphics are required on ALL of the pages you create.
• CSS style must be present on EACH of your pages to create an interesting design that uses the CSS box model.
• The sign in page should have a form to accept a login, password text fields and submit button. It also has a "create account" button. This page will use ReactJS and you will have this page consist of minimal html (only empty div tags) that is populated with React Components. The page should contain only the minimal HTML necessary to host the React application. All visible interface elements should be implemented as React components. If the "create account" is hit then to the right of the login form a new form appears asking for name, email, login and password as separate text fields with a enter button is hit. When this enter button is hit, it simply makes all of the create account form elements dissapear and only the original login form remains but, this time with the new login and password values filled in. So you will need to use state to preserve the login and password via React.

IMPORTANT

The React App page created in Project 1 will become the frontend for Project 2. Students should design the interface, navigation, styling, and React components so they can be reused and extended rather than rewritten.

 

The FULL (and approved through a proposal process) purpose and functionality of the React App will not be determined until the Project 2 proposal phase.

For Project 1, the goal is to build a reusable React frontend framework demonstrating modern React concepts rather than a completed application.

 

PART 2 - Implementing via AWS EC2

You are to setup an EC2 instance, and install Apache Webserver. Then upload all of the content. See Amazon documentation on how to do this (or search web for your own informaiton)

 

REQUIREMENTS PART 2 In this project you will create an Amazon EC2 instance with a later version of Ubuntu pre-defined AMI (something free tier) You will create a GitHub repository called PART 2 (called Project 1 Part2) and use the GitHub wiki documenting your work(take screen shots while you do it) GitHub code must include all HTML, CSS, JavaScript, React source code, images, and supporting files. MAKE sure that you include a screenshot of the site being deployed and show the deployed URL which should match up to your main pages of your website. Demonstrate the use of Bootstrap and JavaScript Interaction (Part 1) in your site. You are required to create and use a Docker Container this must contain all of the software needed for your EC2 server and React frontend and static content. Add to you GitHub repository all the documentation including how to create your Docker Container and deploy it. The DockerContainer should be under the source Code on your GitHub repository in a folder you make called DockerContainer . Create a YouTube video of creation of the Docker, deployment and the website running and show clearly the URL. Go through all the website pages and discuss the CSS styling you did, the JavaScript interactions including the Bootstrap GIthub Wiki make sure that you have the following pages keep names shown Special Issues= turn in a pdf answering the special issue 1 and special issue 2 YouTube Link = link to YouTube video Docker Creation = document with screenshots showing youir docker creation and deployment. If you used DockerHub or other resources AWC ECR, ECS explain that and show screenshots of the AWS related consoles.   SPECIAL ISSUE 1 You must SOLVE---what happens when an instance stops running when you shut down your data is lost you need to learn about how to "freeze" you instance and save it in Amazon S3 as an AMI and then reinstate or duplicate. see http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ExportingEC2Instances.html what are the cost involved?     SPECIAL ISSUE 2 SOLVE---what happens when reboot instance& what can you do?   the IP address changes. What are your options if you want to publish the URL to the public? Some items to read: http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-instance-addressing.html http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html what are the fees incurred Can this be done on the learner lab environment?

 

 

 

PART 3 - Implementing via AWS S3

You are to re-implement your site by deploying to AWS S3.. See Amazon documentation on how to do this (or search web for your own informaiton)

 

REQUIREMENTS PART 3 You will setup the necessary S3 system to host and deliver your website. You will create a SEPERATE GitHub repository called Project 1 Part 3 and use the GitHub wiki documenting your work(take screen shots while you do it). Also discuss the cost involved to implement Part 3. MAKE sure that you include a screenshot of the site being deployed and show the deployed URL which should match up to your main pages of your website. GitHub code must include all HTML, CSS, JavaScript, React source code, images, and supporting files. Documentation = show a YouTube video of setup, the website running and show clearly the URL. Create a YouTube video documenting the deployment and the website running and show clearly the URL. Discuss any issues you had in setup. GIthub Wiki make sure that you have the following pages keep names shown YouTube Link = link to YouTube video S3 Bucket Setup = show screenshots showing the S3 bucket and content that has been uploaded in the AWS console.

 

 

Be prepared to discuss in class both Part 1 and Part 2 and what are the advantages and disadvantages of Part 2 and Part 3 approaches.

• See rubric on Canvas

 

 

1. Turn in Deployed wesite URLs AND GitHub repository URLs for both Part 2 and 3 to Canvas ->Assignments -> Project 1 (see due date and time at top). Wiki on each repository should be created as specified including all specified media and links to youtube as specified.
   
   
2. Discussion in class (must be present when discussed during class)