-
Notifications
You must be signed in to change notification settings - Fork 0
/
shelter.html
127 lines (114 loc) · 7.09 KB
/
shelter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shelter</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans+Condensed:300" rel="stylesheet">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<header>
<div class="wrapper">
<a class="hidden" href="">Skip to Main Content</a>
<nav>
<li><a href="/">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</nav>
<a class='h1-link' href="/"><h1>Abby Starnes</h1></a>
<p class="tagline">front-end developer</p>
<ul class="links">
<li><a class="" href="https://jsfiddle.net/user/ordette/fiddles"><i class="fa fa-jsfiddle "></i> JSFiddle</a></li>
<li><a class="" href="https://github.com/abbystarnes"><i class="fa fa-github "></i> GitHub</a></li>
<li><a href="https://medium.com/@abbymstarnes/" class=""><i class="fa fa-medium "></i> Blog Posts</a></li>
<li><a href="https://www.linkedin.com/in/abbystarnes" class=""><i class="fa fa-linkedin "></i> LinkedIn</a></li>
</ul>
</div>
</header>
<main>
<div class="wrapper wrapper-max-width">
<h2>Shelter</h2>
<p class="subtitle">A CRUD Application Built with Petfinder's API</p>
<article class="project">
<!-- <img class="logo" src="" alt="IBM Analytics Platform Style Guide"> -->
<h3>Technologies</h3>
<ul class='tech-list'>
<li><img class='tech' src="img/technologies/nodejs.png" alt="">
<p>NodeJS</p>
</li>
<li><img class='tech tech-express' src="img/technologies/express.svg" alt="">
<p>Express</p>
</li>
<li><img class='tech' src="img/technologies/postgresql.png" alt="">
<p>PostgreSQL</p>
</li>
<li><img class='tech' src="img/technologies/petfinder.svg" alt="">
<p>Petfinder API</p>
</li>
<li><img class='tech' src="img/technologies/materialize.png" alt="">
<p>Materialize</p>
</li>
<li><img class='tech' src="img/technologies/heroku.png" alt="">
<p>Heroku</p>
</li>
</ul>
</article>
<article class="project">
<h3>Overview</h3>
<p>Shelter is a CRUD (create, read, update, delete) Node.js Express application. This is a week-long individual project from quarter 2 of Galvanize's 24-week web development immersion course. Shelter displays data on Austin Pets Alive! shelter
animals gathered via Petfinder's API. I implemented user authentication by using hashed passwords, cookies and Oauth via Google's authentication library. Shelter features a PostgreSQL database and is deployed to Heroku.</p>
<a class='code-link' target="_blank" href="https://shelter-abby-starnes.herokuapp.com/">View Live <i class="fa fa-external-link" aria-hidden="true"></i></a>
<a class='code-link' target="_blank" href="https://github.com/abbystarnes/shelter">View Code <i class="fa fa-external-link" aria-hidden="true"></i></a>
</article>
<article class="project">
<h3>User Authentication</h3>
<script src="https://gist.github.com/abbystarnes/b2ca902a127f276eff6788f6bf8a4fc2.js"></script>
<p class="text">If user logs in with Gmail, an external dialogue opens and allows the user to login to their Gmail account. Upon successful login, the users information is passed to the front-end javascript file's onSignIn() function (below) for processing.
Afterwards, whenever the user is logged in to their Gmail account, they have frictionless access to their account. If the user chooses to log in using their email and password, the form information is submitted to the /login_local
route (below) for processing via a post request.
</p>
<script src="https://gist.github.com/abbystarnes/a79277451c341d9ad8339cb7d216111e.js"></script>
<p class="text">In the front-end Javascript, onSignIn() takes the user's Gmail account information and passes their email and id token to the /login_gmail route via a post XMLHttpRequest. The getCookie() function parses the current cookie to obtain the
user's authentication information.
</p>
<script src="https://gist.github.com/abbystarnes/e7b9440fb2e594610b3c340e2aa135fa.js"></script>
<p class="text">The /logout route empties the user's cookies, which logs them out and prevents protected elements from rendering to the page. The /login_gmail route validate's the user's id token. If the user's credentials are valid, a cookie is set with
the user's permission level and email. The /login_local route checks the user's password against the stored hashed password associated with their email. If the password or email is invalid, the post request resolves with a 404 and
the user sees an error message. Otherwise, once their credentials are validated the user is rerouted to the pets page.</p>
</article>
</div>
</main>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function() {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>