-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmyFlix-study-case.html
More file actions
218 lines (206 loc) · 12.6 KB
/
myFlix-study-case.html
File metadata and controls
218 lines (206 loc) · 12.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Case Study</title>
<link rel="shortcut icon" type="image/png" href="./img/favicon-32x32.png" />
<!-- Se usa un punto para especificar la ubicacion en que se encuentra el archivo. Se usa dos puntos para retrocer un folder-->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- forces browsers to render all elements more consistently and in-line with modern standards, precisely targeting only styles that need normalizing-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.production.css">
<!--We added the css file-->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<header style="background-color: #fed7aa">
<nav class="navbar navbar-expand-xl navbar-dark" style="background-color: #fed7aa">
<div class="container">
<a href="index.html">
<img src="./img/logo-playa.png" class="logo" alt="logo" style="max-width: 150px;">
</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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-justified ml-auto nav-list" id="ul_justify">
<li class="nav-item item-nav">
<a class="nav-link" href="work.html" style="color: #333">Go back to Projects</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="study-case-section">
<h1 class="heading-case-study">myFlix Case Study</h1>
<div class="intro-section">
<div class="intro-imgs">
<img src="img/case-study/case-study-1.png" class="intro-img">
<img src="img/case-study/case-study-2.png" class="intro-img">
</div>
<div class="intro-content">
<div class="overview">
<h2 class="introduction-heading">Introduction</h2>
<h3>Overview</h3>
<p>myFlix is a movie app built with MERN stack that allows users to signup and login, that provides users
with access to information about movies, directors, genres, update their personal information, and
create a list of their favorite movies.
</p>
</div>
<div class="purpose-and-context">
<h3>Purpose and Context</h3>
<p>MyFlix was a personal project I built as a part of my web development course at CareerFoundry. My role
was to build the complete server side of a web application, including the server, business logic, and
business layers of the application. And to build a single-page, responsive React application with
routing, rich interactions, several interface views, and a polished user experience based on server-side
code(REST API and Database).</p>
</div>
<div class="objective">
<h3>Objective</h3>
<p>The goal was to implement a complete project. The problem I wanted to solve was to develop the complete
server and client side of the application from scratch. Also, I especially wanted to gain hands-on
experience with Node.js and React.</p>
</div>
<div class="tech">
<h3>Tech Stack</h3>
<p>MERN || Bootstrap</p>
</div>
<div class="credits">
<h3>Credits</h3>
<p>
I thank the people who guided me on this path: <br>
<i class="fa-solid fa-circle"></i> Mentor - Ramadhan Aheebwa <br>
<i class="fa-solid fa-circle"></i> Tutor - Timothy Nyabongo <br>
<i class="fa-solid fa-circle"></i> Career Specialist - Christian Schieren
</p>
</div>
</div>
</div>
<div class="approach-section">
<div class="server-side">
<div class="serverside-content">
<h2 class="approach-heading">Approach</h2>
<h3>Server Side</h3>
<p>My goal was to build the server-side component (Back-end) of the movies to then use the data in the
client-server (web application). To achieve my goal I created a REST API (a software architecture that
imposes conditions on how an API should work) using Node.js and Express. Express and Node make up the
middle (application) layer. Express.js is a server-side web framework, and Node.js is the popular and
powerful JavaScript server platform. It is the ideal approach to working with JavaScript and JSON, all
the way to the endpoint.
API endpoints can be accessed with HTTP methods (POST, GET, PUT and DELETE) to create, read, update and
delete data (CRUD) from the database. You can see the <a
href="https://wichoflix.herokuapp.com/documentation">documentation</a> to know the API endpoints I
made
(the image is the documentation). I created a database containing all the information about movies and
users with MongoDB. The business logic for the database is modeled with Mongoose. The data is provided
in JSON format by the API. I used Postman to test the API. I also included HTTP authentication and JWT
authentication.
</p>
<p>You can check the<a href="https://github.com/wichofly/movie-api.git" target="_blank">
code on Github</a>
</p>
</div>
<div class="serverside-img">
<img src="img/case-study/case-study-3.png" class="approach-img">
</div>
</div>
<div class="client-side">
<div class="clientside-content">
<h3>Client Side</h3>
<p>After completing the API, I started to build the interface where users can make requests, and receive
responses from the server side. It is a single-page, responsive application developed with React and
React-Redux. For the design I used React-Bootstrap and SCCS. It provides several interface views,
including, but not limited to the main view ( where
it shows a list of all movies), a single Movie view ( shows data about a single movie and allows users
to add the movie to their list of favorites), a login view, a registration view and a profile view (
where users can update their user data and list of favorites).
</p>
<p>You can visit myFlix on <a href="https://wichoflix-client-react.netlify.app/"
target="_blank">Netlify</a>
and check the<a href="https://github.com/wichofly/myFlix-client.git" target="_blank"> code on Github</a>
</p>
</div>
<div class="clientside-img">
<img src="img/case-study/case-study-4.png" class="approach-img">
</div>
</div>
</div>
<div class="challanges">
<div class="challange-content">
<h2 class="challange-heading">Challenges</h2>
<p>Developing a complete application with the MERN stack (MongoDB, Express.js, React.js and Node.js) from
scratch it was an exciting challenge, to have the experience and knowledge of a popular Techk Stack. My
difficulties centered on creating the client side: I did not correctly
access the keys, so I did not get the data created on the server side to display on the screen. For
example, when I made the call to display the title of the movies, it was not possible because I was not
accessing the keys correctly. With the advice of my tutor and mentor I learned to be more careful when
calling the data. </p>
</div>
</div>
<div class="conclusion">
<div class="conclusion-content">
<h2 class="conclusion-heading">Conclusion</h2>
<p>myFlix was my first full-stack web application. Going from server code and database structures, to a web
app using React. What I like about React is that it allows us to build complex interfaces through simple
components, connect them to data on your back-end server, and render them as HTML.
<br>
React's strength is handling stateful and data-driven interfaces with minimal code and pain, and it has
all the bells and whistles you'd expect from a modern web framework: great support for forms, error
handling, events, lists, and even more to learn about this widely used framework.
</p>
</div>
</div>
</section>
<footer class="page-footer">
<p>Find me on</p>
<div class="social-media">
<a href="https://github.com/wichofly" target="_blank">
<!-- Github logo -->
<svg enable-background="new 0 0 512 512" id="Layer_1" version="1.1" viewBox="0 0 512 512"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
class="redes_profile">
<g>
<path d="M258.6,507.2C120.3,507.7,6.5,392.6,9.9,251.7C13.1,117.8,124.1,7.1,262.1,8.7c136.7,1.6,249.5,115.4,246,255.8
C504.8,398,394.7,508,258.6,507.2z M230,387.7c-12.2-3.9-24.6-6.8-36-11.9c-23.2-10.4-37.9-28.4-42.6-53.7
c-3-16.4-1.8-32.9,0.2-49.3c1.8-14.5,6-28,17-38.5c0.8-0.8,0.9-3.1,0.4-4.3c-5.3-14.5-4.7-29-0.4-43.7c1.3-4.4,3.4-4.9,7.2-3.7
c10,3.1,18.1,9.1,25,16.7c3.7,4,7,8.4,10.5,12.6c20.8-13.5,80.3-13.5,102.1-0.2c4.2-4.9,8.2-10,12.7-14.7
c6.7-6.9,14.5-12.2,24-14.8c3.1-0.9,4.8-0.2,5.9,3.1c4.9,14.5,5.8,29,0,43.5c-1.1,2.9-1,4.8,1.3,7c6.9,6.6,11.1,14.9,13.3,24.2
c4.2,17.3,5.1,35,3.9,52.6c-1.3,18.9-8.4,35.5-22.3,48.8c-11.7,11.1-25.7,17.7-41.1,21.6c-5.6,1.4-11.2,2.4-17.2,3.6
c7.7,11.8,9.6,24.6,9.3,38c-0.3,14.3-0.1,28.7-0.1,43c0,1.7,0.1,3.5,0.2,5.3c91.3-16.6,183.5-107.5,173.4-233.4
C467.2,119.4,360.9,27.2,237.9,39C123,50,30.8,152.5,41.2,276.7c9.9,117.5,105.1,187.9,179.6,197.1c0-8.5,0-17,0-25.6
c-4.1,0.6-7.8,1.1-11.4,1.5c-26.8,3-48.1-9-60-32.9c-6.5-13.1-13.4-26.2-26.2-34.6c-1.4-0.9-2.2-2.6-3.4-4.1
c1.1-0.8,1.6-1.2,2.2-1.5c0.8-0.3,1.6-0.4,2.4-0.5c9-0.6,17.5,1,24.2,7.3c4.4,4.1,8.4,9,11.7,14.1c12.6,19.7,34.3,28,56.4,21.4
c3-0.9,4.7-2.2,5-5.7C222.3,403.8,224.9,394.9,230,387.7z" />
</g>
</svg>
</a>
<!--For <svg>, viewBox defines the position and dimension for the content of the <svg> element.-->
<a href="https://www.linkedin.com/in/mauricio-erazo-1bba81b7" target="_blank">
<!-- LinkedIn logo -->
<img src="img/1220314_linkedin_in_linked_social_icon.svg" alt="linkedin" class="redes_profile">
</a>
</div>
<a href="file/Impressum.pdf" class="impressum" id="impressum" download="">Impressum</a>
</footer>
<!-- <script src="js/tota11y.min.js"></script> -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>