Skip to content

Commit 04b328d

Browse files
committed
Adding course 03
1 parent db84b8d commit 04b328d

File tree

489 files changed

+194489
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

489 files changed

+194489
-0
lines changed
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Udagram Simple Frontend
2+
3+
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.
4+
5+
The project is split into three parts:
6+
1. [The Simple Frontend](https://github.com/grutt/udacity-c2-frontend) `This Repo`
7+
A basic Ionic client web application which consumes the RestAPI Backend.
8+
2. [The RestAPI Backend](https://github.com/grutt/udacity-c2-restapi)
9+
Which is a Node-Express server which can be deployed to a cloud service.
10+
3. [The Image Filtering Microservice](https://github.com/grutt/udacity-c2-image-filter)
11+
Which is the final project for the course. It is a Node-Express application which runs a simple Python script to process images.
12+
13+
***
14+
15+
## Getting Setup
16+
17+
> _tip_: this frontend is designed to work with [The RestAPI Backend](https://github.com/grutt/udacity-c2-restapi). It is recommended you stand up the backend first, test using Postman, and then the frontend should integrate.
18+
19+
### Installing Node and NPM
20+
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](https://nodejs.org/en/download/).
21+
22+
### Installing Ionic Cli
23+
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](https://ionicframework.com/docs/installation/cli).
24+
25+
### Installing project dependencies
26+
27+
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:
28+
```bash
29+
npm install
30+
```
31+
>_tip_: **npm i** is shorthand for **npm install**
32+
33+
### Configure The Backend Endpoint
34+
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.
35+
36+
***
37+
### Running the Development Server
38+
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:
39+
40+
```bash
41+
ionic serve
42+
```
43+
44+
### Building the Static Frontend Files
45+
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:
46+
```bash
47+
ionic build
48+
```
49+
***
50+
51+
## @TODO
52+
2. Tasks
53+
i. Setup
54+
a. Clone, set up protected branches (dev, staging, master)
55+
b. NPM, Ionic CLI
56+
c. run tests (npm test), identify broken function, fix the function
57+
d. write tests for form validation and re-run tests

0 commit comments

Comments
 (0)