GithubHelp home page GithubHelp logo

alansparrow / udacity-c2-frontend Goto Github PK

View Code? Open in Web Editor NEW

This project forked from grutt/udacity-c2-frontend

0.0 0.0 0.0 5.25 MB

C2 Project

JavaScript 3.08% TypeScript 80.39% HTML 9.72% CSS 6.55% Shell 0.27%

udacity-c2-frontend's Introduction

Udagram Simple Frontend

Udagram is a simple cloud application developed along side the Udacity Cloud Engineering Nanodegree. It allows users to register and log into a web client, post photos to the feed, and process photos using an image filtering microservice.

The project is split into three parts:

  1. The Simple Frontend This Repo A basic Ionic client web application which consumes the RestAPI Backend.
  2. The RestAPI Backend Which is a Node-Express server which can be deployed to a cloud service.
  3. The Image Filtering Microservice Which is the final project for the course. It is a Node-Express application which runs a simple Python script to process images.

Getting Setup

tip: this frontend is designed to work with The RestAPI Backend. It is recommended you stand up the backend first, test using Postman, and then the frontend should integrate.

Installing Node and NPM

This project depends on Nodejs and Node Package Manager (NPM). Before continuing, you must download and install Node (NPM is included) from https://nodejs.com/en/download.

Installing Ionic Cli

The Ionic Command Line Interface is required to serve and build the frontend. Instructions for installing the CLI can be found in the Ionic Framework Docs.

Installing project dependencies

This project uses NPM to manage software dependencies. NPM Relies on the package.json file located in the root of this repository. After cloning, open your terminal and run:

npm install

tip: npm i is shorthand for npm install

Configure The Backend Endpoint

Ionic uses enviornment files located in ./src/enviornments/enviornment.*.ts to load configuration variables at runtime. By default environment.ts is used for development and enviornment.prod.ts is used for produciton. The apiHost variable should be set to your server url either locally or in the cloud.


Running the Development Server

Ionic CLI provides an easy to use development server to run and autoreload the frontend. This allows you to make quick changes and see them in real time in your browser. To run the development server, open terminal and run:

ionic serve

Building the Static Frontend Files

Ionic CLI can build the frontend into static HTML/CSS/JavaScript files. These files can be uploaded to a host to be consumed by users on the web. Build artifacts are located in ./www. To build from source, open terminal and run:

ionic build

@TODO

  1. Tasks i. Setup a. Clone, set up protected branches (dev, staging, master) b. NPM, Ionic CLI c. run tests (npm test), identify broken function, fix the function d. write tests for form validation and re-run tests

udacity-c2-frontend's People

Contributors

grutt avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.