-
Notifications
You must be signed in to change notification settings - Fork 0
/
reddit_clone.html
158 lines (145 loc) · 10.5 KB
/
reddit_clone.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Reddit Clone</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>Reddit Clone</h2>
<p class="subtitle">An Angular CRUD Application with a PostgreSQL Database</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/angularjs.png" alt="">
<p>AngularJS</p>
</li>
<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/knex.png" alt="">
<p>Knex.js</p>
</li>
<li><img class='tech' src="img/technologies/bootstrap.png" alt="">
<p>Bootstrap</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>Reddit Clone is an Angular 1.6 CRUD (create, read, update, delete) Node.js Express application. This is a week-long individual assignment from the Angular unit of Galvanize's 24-week web development immersion course. The database is seeded
and queried using Knex.js.</p>
<a class='code-link' target="_blank" href="https://abby-reddit-clone-3.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/Galvanize-2017-reddit-clone-3">View Code <i class="fa fa-external-link" aria-hidden="true"></i></a>
</article>
<article class="project">
<h3>Seperation of Concerns In Angular</h3>
<p>Learning how to structure an AngularJS application was one of my biggest takeaways from this project.</p>
<div class="screenshots">
<div class="screenshot screenshot-files">
<img src="img/screenshots/file_structure_reddit.png" alt="reddit clone file structure">
<p class="caption">The application architecture is compartmentalized by component type (e.g. the post components), rather than by services, controllers and templates. This places related content together, making it easier to find a component's associated
service and template.</p>
</div>
</div>
<script src="https://gist.github.com/abbystarnes/8764bd1f3a33399cbd7e2446db590e27.js"></script>
<p class="text">The comments component displays post comments to the view. On initialization, the comments component renders the comments template with content retreived using the comment service function getComments(). When the comments component's updateComments()
function is called in the comments template, it uses the comment service functions getComments() and addComment() to add the user's new comment to the database and render the updated comments.</p>
<script src="https://gist.github.com/abbystarnes/88a306aaecec82268642542e268170d9.js"></script>
<p class="text">Any functions that make requests to query the database are seperated out into the comments service. Here getComments() retreives the comments currently in the database, while addComments() inserts a new comment into the database. The service
also stores the comments retreived from the most recent database query. This allows multiple components to receive the same data from a single source of truth (eg. in posts, where the post-edit, post-form, post-list and post-single
components alll draw on the post service to obtain current data).
</p>
<script src="https://gist.github.com/abbystarnes/2252ca0b9c2be4883ce0d8eeada8505c.js"></script>
<p class="text">The comments template uses two-way data binding to render a live view of the comments. If the user submits a new comment, the controller's updateComments() function is called. This updates the comments in the database to include the new
comment, and the results are immediately reflected in the view.</p>
</article>
<article class="project">
<h3>Data Binding</h3>
<p class='text'>One of the challenges I faced was figuring out how to pass data between components. For example, in order to edit a post, the user would ideally see an edit form prepopulated with the post's current data. In order to show this view, I
needed to pass the post id and and post from the post-single component to the post-edit component.</p>
<script src="https://gist.github.com/abbystarnes/60194373d3cdb116c6928df4de949121.js"></script>
<p>The acceptable variables for the post-edit component are defined in the the app.config.js file's $stateProvider. The id variable is defined in the url '/post/:id/edit', and the post variable is included in the params object.
</p>
<script src="https://gist.github.com/abbystarnes/9cb7e2f3931c21e8b77a8c0fbf676123.js"></script>
<p class="text">In the post-single template, there is a an 'edit' button. When clicked, user is rerouted to a view where they can edit the associated post. The post id and post are passed as variables from the post-single component to the post-edit component.</p>
<script src="https://gist.github.com/abbystarnes/745f2c9409c66b529532f56837dbdab7.js"></script>
<p class="text">In the post-edit template, the current post's title is displayed, and the post variable is passed once again, this time to the post-form component.</p>
<script src="https://gist.github.com/abbystarnes/0407d221a9bf60694578a9abef15f8c6.js"></script>
<p class="text">The post form is rendered with prepopulated data from the passed down post variable. Because the user is editing an existing post, the submit button says 'Update Post'. When the user submits the form, the controller's createNewPost() function
is called.</p>
<script src="https://gist.github.com/abbystarnes/8efc84998eacc692696248f69258a696.js"></script>
<p class="text">In the post-form controller, the form's submit button content is changed from 'Create Post' to 'Update Post' because a post with an id has been passed down from the post-edit component. In createNewPost() the post service's editPost()
function is called.</p>
<script src="https://gist.github.com/abbystarnes/5956f571ea566bbcaa61aabb70b01be9.js"></script>
<p>In the post service, the editPost() function makes a patch request to update the database with the user's edited post information. Afterwards, the getPosts() function is called to request the updated version of the posts from the database,
and the user is redirected to the post-list view.</p>
<p class="text"></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>