SkyScraper

Visualizer Dashboard for AWS EC2 Instances
Report Bug · Request Feature

---

Table of Contents

1. Introduction
2. Built With
3. Usage
4. Installation
5. Contributing
6. License
7. Creators
8. Contact Us
9. Acknowledgements

---

Introduction

SkyScraper is an innovative visualizer dashboard that transforms the way developers interact with AWS performance data, starting with EC2. By offering a streamlined, intuitive interface, SkyScraper optimizes the retrieval, organization, and visualization of performance metrics, enabling users to manage their AWS environments effectively.

Leveraging Auth0 and AWS Cognito for secure user authentication, SkyScraper ensures safe data retrieval using AWS credentials, with multiple security checkpoints to maintain data integrity and privacy. The application abstracts complex configurations, presenting clear and actionable insights that empower users to monitor instance activity, identify optimization opportunities, and make informed decisions to minimize costs and enhance performance.

Designed with a focus on clarity and aesthetics, SkyScraper features custom themes that provide a visually pleasing user experience. Data is categorized and displayed through modern charts and graphs, allowing users to quickly identify trends and anomalies. By turning complex data into easily understandable insights, SkyScraper revolutionizes AWS performance data management, making it more efficient and accessible for developers.

Built With

• TypeScript
• React
• Redux
• Node.js
• Express
• Chart.js
• Webpack
• Auth0
• AWS Cognito API
• AWS CloudWatch API
• AWS EC2 API

(back to top)

Usage

1. Navigate to https://skyscraper-api.com in your browser
2. Click Get Started
3. Sign Up or Log In with Auth0
4. Once Logged In, you will see an overview of the name and status of all EC2 Instances
5. Clicking on any instance box will bring you to the metrics page where you can view detailed metrics of each instance

(back to top)

Installation

Installing from Github:

1. Clone and open the Repo in your Code Editor

   git clone https://github.com/oslabs-beta/SkyScraper.git

2. Create a .env file in the root directory from the provided template and input values from an AWS account
3. Install dependencies

   npm install

4. Build and run the application on your local machine

   npm run go

5. Navigate to http://localhost:8080 in your browser to view the application

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks!

1. Fork the Repo

2. Create your Feature Branch

   git checkout -b feature/AmazingFeature

3. Commit your Changes

   git commit -m 'Add some AmazingFeature'

4. Push to the Branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Creators

Abel Ratanaphan

Bin He

Christie Laferriere

Tripp Murphy

Nikola Andelkovic

(back to top)

Contact Us

[email protected]

@SkyScraperApp

github.com/oslabs-beta/SkyScraper

(back to top)

Acknowledgements

• README Template
• shields.io Badges
• Icons 8
• Icon Finder
• Icon Scout
• Flat Icon
• AWS Icons

(back to top)