-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathspotcheck.html
More file actions
271 lines (267 loc) · 11.5 KB
/
spotcheck.html
File metadata and controls
271 lines (267 loc) · 11.5 KB
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="icon" href="img/favicon.png" type="image/png" />
<title>Daniel Knopf-SpotCheck</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="vendors/linericon/style.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css" />
<link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css" />
<link rel="stylesheet" href="vendors/nice-select/css/nice-select.css" />
<link rel="stylesheet" href="vendors/animate-css/animate.css" />
<link rel="stylesheet" href="vendors/popup/magnific-popup.css" />
<!-- main css -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container box_1620">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html"
><img class="navbar-logo" src="img/daniel.png" alt=""
/></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div
class="collapse navbar-collapse offset"
id="navbarSupportedContent"
>
<ul class="nav navbar-nav menu_nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#experience"
>Experience</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
<!--================Home Banner Area =================-->
<section class="project_banner_area">
<!-- <div class="box_1620">
<div class="banner_inner d-flex align-items-center">
<div class="container">
<div class="banner_content text-center"></div>
</div>
</div>
</div> -->
</section>
<!--================End Home Banner Area =================-->
<!-- Start Sample Area -->
<section class="main-content">
<div class="container">
<div class="row justify-content-content">
<div class="col-12 text-center">
<h1 class="title-color">SpotCheck</h1>
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col-10">
<img
class="img-fluid"
src="img/project_pages/spotcheck/spotcheck.png"
/>
</div>
</div>
</div>
</section>
<section class="sample-text-area">
<div class="container">
<div class="text-left pt-5">
<h3 class="text-heading title_color">Description</h3>
<p class="sample-text">
<a href="https://spotcheck.space">SpotCheck</a> is a web app that
allows Wesleyan students to receive text/email alerts when a seat
opens in a class they want during schedule adjustment. The app is
built on Python Flask, hosted on Google App Engine, using Google
Datastore for storage, BeautifulSoup for webscraping, and Twilio for
texts.
</p>
</div>
<div class="text-left pt-5">
<h3 class="text-heading title_color">A Problem To Be Solved</h3>
<p class="sample-text">
Every year during schedule selection, Wesleyan has a process called
"adjustment," which is a week where students can drop and add
classes in real time, the only time you can just get into a class if
there is space. However, nobody ever really added any classes during
adjustment because the only way to see if there were spots open in a
class was to constantly refresh all the pages for all the courses
you wanted to get into, which is a major pain in the butt. I was so
frustrated with the lack of usability in this system that I decided
to build SpotCheck, a free website that will alert you when a seat
opens in a class you want during adjustment!
</p>
</div>
<div class="text-left pt-5">
<h3 class="text-heading title_color">Humble Origins</h3>
<p class="sample-text">
SpotCheck was first born in July of 2020. At that point, I was
interning remotely for a company called HC1, doing 40 hours of
software engineering a week. For some reason, I decided that the
perfect thing to do to cap my 40-hour workweek was to spend
<strong>another</strong> 48 hours working, as I took part if MLH's
HackItShipIt hackathon. This was the first solo hackathon I had ever
done, and I had literally zero knowledge of web development at that
point, but boy was I determined to learn! I spent the weekend
teaching myself Flask, HTML/CSS, Google App Engine, and Google
Datastore, and managed to get a fully working version of SpotCheck
up over the course of a single weekend!
</p>
</div>
<div class="row justify-content-center pt-5">
<div class="col-10">
<img
class="img-fluid"
src="img/project_pages/spotcheck/spotcheck3.png"
/>
</div>
</div>
<div class="text-left pt-5">
<h3 class="text-heading title_color">How It Works</h3>
<p class="sample-text">
SpotCheck works by scraping the publicly available Wesleyan course
listings page and storing the number of available seats for each
class in Google Datastore. Whenever there are suddenly seats in a
class that previously was full, SpotCheck sends out an email or text
to all users subscribed to that class. The program maintains a
hashmap of courses that have already been scraped to avoid scraping
a course that is listed in multiple departments, and it
automatically updates to only scrape courses for the appropriate
semester. It also has its own Python Selenium bot testing script
that can be used to stress-test the website as needed. The web app
also uses the wondeful Twilio SMS API to send out text messages to
users!
</p>
</div>
<div class="text-left pt-5">
<h3 class="text-heading title_color">Launch</h3>
<p class="sample-text">
I continued to play with SpotCheck over the next few months, so that
when the next adjustment period rolled around I was prepared. I
launched SpotCheck to the Wesleyan community to a hugely positive
response, with hundreds of students using the platform. Since it's
creation, SpotCheck has sent out
<i>over 3,000 texts and emails to over 800 users!</i> As this was
the first website I ever built, I was incredibly proud of SpotCheck,
and I'm glad that I can help the Wesleyan community by getting
people into the classes they want!
</p>
</div>
<div class="row py-5">
<div class="col-md-6 col-12 pb-3">
<a
href="https://www.spotcheck.space"
class="genric-btn e-large info-border circle"
>Check It Out!</a
>
</div>
<div class="col-md-6 col-12 pb-3">
<a
href="https://github.com/dknopf/spotcheck"
class="genric-btn e-large info circle"
>Github</a
>
</div>
</div>
</div>
</section>
<!--================Footer Area =================-->
<footer class="footer_area p_120" id="contact">
<div class="container">
<div class="row footer_inner">
<div class="col-12">
<div class="row">
<div class="col-lg-12 text-center">
<aside class="f_widget social_widget">
<div class="f_title">
<h2>Contact Me!</h2>
</div>
<ul class="list">
<li>
<a href="mailto:danielkn609@gmail.com"
><i class="fa fa-envelope"></i
></a>
</li>
<li>
<a href="https://twitter.com/knopython"
><i class="fa fa-twitter"></i
></a>
</li>
<li>
<a href="https://www.instagram.com/danielkn609/"
><i class="fa fa-instagram"></i
></a>
</li>
<li>
<a href="https://www.linkedin.com/in/daniel-knopf-609/"
><i class="fa fa-linkedin"></i
></a>
</li>
</ul>
</aside>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--================End Footer Area =================-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="vendors/lightbox/simpleLightbox.min.js"></script>
<script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendors/isotope/isotope.pkgd.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/popup/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="vendors/counter-up/jquery.waypoints.min.js"></script>
<script src="vendors/counter-up/jquery.counterup.min.js"></script>
<script src="js/mail-script.js"></script>
<script src="js/theme.js"></script>
</body>
</html>