-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbookable.html
More file actions
113 lines (102 loc) · 6.32 KB
/
Copy pathbookable.html
File metadata and controls
113 lines (102 loc) · 6.32 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
<html>
<head>
<title>Chris' Time at Invictus</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="main.css" />
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
<script src="main.js"></script>
</head>
<body class="is-preload">
<div class="not-main">
<!-- Wrapper-->
<div id="wrapper">
<!-- Nav -->
<!-- Main -->
<div id="main">
<!-- Me -->
<p>
<div class="row">
<div class="col-6">
<h2>Bookable</h2>
<br>
<b>Timeline:</b> June 2018-July 2018
<br>
<b>Created For:</b> iXperience Program
<br>
<br> For my Full Stack Coding class as a part of the iXperience program, over the course of a month
I worked with a partner to develop an booking app. The idea for the app was to create an app,
that allowed users to directly choose where they wanted to be when making their reservation.
For example, in restaurants, movie theaters, or any form of transportation, they could choose
their specific seat. Through the class and working on the project, we learned about the steps
behind app and web development. We followed an agile workflow, had daily standups, and used Trello
to communicate our progress.
<br><br> On the front end side, we started by creating wireframes for our pages. We then started developing
frontend using Ionic, a mobile app kit, which is built on top of Angular.js.
<br><br> On the back end side, we created a UML diagram to map out what we wanted users to be able to
have access to. We created the backend REST API through loopback, a Node.js framework. We stored
all endpoint data in mySQL. We also added three third-party integrations, Yelp, Google Maps,
and Stripe.
<br> Some of our features included:
<ul>
<li>Making a Booking(pretty hard as MySQL can't store 2d Arrays)</li>
<li>Creating a User</li>
<li>Token Authentication </li>
<li>Password Encryption</li>
<li>Payments through Stripe</li>
<li>Searching a location through Google Maps</li>
<li>Getting Venue Information of a Star through Yelp</li>
</ul>
<br> Before working on this project, I knew very little about app development, I didn't even know
what RESTful architecture was. I also had never learned any of the frameworks used before so
it was really exciting to be creating something with no prior experience in the langauges.
</div>
<div class="col-1"></div>
<div class="col-4">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="images/bookable-booking.png" style="width:100%;height:100%">
<div class="text">The main booking page. 0 represents a non seat, -1 represents a booked spot. The other
numbers are the price.
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="images/bookable-stripe.png" style="width:100%;height:100%">
<div class="text">The Stripe payment page. This is not my credit card info!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="images/bookable-maps.png" style="width:100%;height:100%">
<div class="text">The Maps page. My partner attends Duke, so we set locations around there.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="images/bookable-yelp.png" style="width:100%;height:100%">
<div class="text">The Welcome page, that shows all restaurants around a certain area. This picture shows
venues around Duke. Apparently the Bakery in the picture is really good!</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</div>
<div class="col-1"></div>
</div>
</p>
</div>
</div>
</div>
</body>
</html>