-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathBehindTheScenesView.vue
181 lines (168 loc) · 6.27 KB
/
BehindTheScenesView.vue
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
<template>
<div class="process">
<h1>Behind the Scenes</h1>
<section class="text-body">
<p>
Upon launch of this project on December 9th, 2023, Team Healers was born! We are a group of
Tech Elevator graduates from varied backgrounds, including education, case management,
business administration, tech support, customer service, and accounting. We are a women-led
team and have an open-door culture of accountability and positivity.
</p>
<p>
Our first action was working together to learn how Continuous Integration / Continuous
Deployment works. We chose to use Render and Docker for this project. Our Tech Stack is
Spring Boot, PostgreSQL, and Vue3 with Typescript. Laura took ownership of the CI/CD
pipeline and configured our repositories and images with test coverage.
</p>
<section class="diagram-container">
<img class="diagram-img" src="../../public/images/architectural-diagram-img.png" />
</section>
<p>
Once we had our pipeline running, we divided our resources and skills into front-end and
back-end teams. Yagmur and Kimlyn took ownership of the back-end development, including user
registration, login, database creation, authorization, and authentication. Between the two
of them, we have functioning authentication on the back-end.
</p>
<p>
Ashley and Viviana took ownership of the front-end, including art direction. We utilized
Figma to decide as a team on fonts, color schemes, and styling guides for responsive design.
Ashley built wireframes and our Vue app, including our Credits & Settings pages as well as
the Global Navigation Bar.
</p>
</section>
<section class="blog-image-container">
<a
href="https://www.figma.com/file/H5yVnPoDudao2avuKk65ea/Style-Guide-%2F%2F-Crusader-Games?type=design&node-id=0-1&mode=design&t=bPRWfp59e0LXwGjn-0"
target="_blank"
>
<img class="blog-images" src="../../public/images/style-fonts-colors.png" />
</a>
<a
href="https://www.figma.com/file/H5yVnPoDudao2avuKk65ea/Style-Guide-%2F%2F-Crusader-Games?type=design&node-id=0-1&mode=design&t=bPRWfp59e0LXwGjn-0"
target="_blank"
>
<img class="blog-images" src="../../public/images/responsive-web-design-figma.png" />
</a>
<a
href="https://www.figma.com/file/H5yVnPoDudao2avuKk65ea/Style-Guide-%2F%2F-Crusader-Games?type=design&node-id=0-1&mode=design&t=bPRWfp59e0LXwGjn-0"
target="_blank"
>
<img class="blog-images" src="../../public/images/style-icons.png" />
</a>
<a
href="https://www.figma.com/file/P8nqI6QG5EORnX5umH18jT/Bug-Wars-Wireframes?type=design&node-id=0%3A1&mode=design&t=KnCVgJtfghiPAYR0-1"
target="_blank"
>
<img class="blog-images" src="../../public/images/bug-wars-wireframes.png" />
</a>
</section>
<section class="text-body">
<p>
Viviana utilized her skills as a pixel artist to draw and design bug sprites for us and
built our logo using ideas from AI concepts to design our Logo. She also built the Login and
Registration pages.
</p>
</section>
<section class="blog-image-container">
<img class="bug-images" src="../../public/images/Red-Bug.png" />
<img class="bug-images" src="../../public/images/Yellow-Bug.png" />
<img class="bug-images" src="../../public/images/Green-Bug.png" />
<img class="bug-images" src="../../public/images/Blue-Bug.png" />
</section>
<img class="bug-wars-logo" src="../../public/images/Logo.png" />
<section class="text-body">
<p>
Our team has been utilizing Test-Driven Development whenever possible, we have a robust testing system in place,
including Unit and Integration testing.
</p>
<p>
Laura is our Tech Lead and built the How To Play page, the Play page, and the Behind the
Scenes Page you are reading.
</p>
<p>
Our application has the following features:
<ul>
-A CI/CD pipeline with testing to ensure we always have a demo link available <br />
-Responsive web design optimizing for Mobile views <br />
-Functioning User Registration <br />
-Functioning User Authentication (Login) <br />
-Functioning User Logout <br />
-Dynamic Navigation based on Authentication <br />
-Security using Spring Boot and JWT token <br />
-PostgreSQL database accessed via JPA in Spring Boot <br />
-Amazing graphics & color schemes <br />
-Every functioning page you see on this site <br />
-Increasing our testing <br />
-Implementing compiler logic to connect to the ScriptEditor Page <br />
-Building the game engine <br />
</ul>
</p>
<p>We are currently working on:
<ul>
-Implementing a Content Management System for this page <br />
-Making functional gameplay!<br />
-More robust error handling <br />
</ul>
</p>
<p>
We will be updating this page as the project continues with a blog feature that allows us to
share our development process.
</p>
<p>Thank you for reading about us and following our journey through this project!</p>
</section>
</div>
</template>
<script setup lang="ts"></script>
<style scoped>
.text-body {
text-align: left;
padding: 30px;
}
.process {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px;
}
h1 {
font-family: 'Press Start 2P', 'Space Mono', Arial, Helvetica, sans-serif;
}
p {
padding: 10px;
}
.blog-image-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.diagram-container {
display: flex;
justify-content: center;
}
.diagram-img {
border: 2px solid black;
padding: 4px;
}
.blog-images {
border: 2px solid black;
border-radius: 4px;
padding: 1px;
width: 350px;
padding: 15px;
margin: 15px;
}
.bug-images {
border-radius: 4px;
padding: 1px;
width: 220px;
}
.bug-wars-logo {
border-radius: 4px;
padding: 1px;
width: 400px;
}
.blog-images:hover {
box-shadow: 0 0 2px 1px rgba(238, 78, 5, 0.795);
}
</style>