Case Study for myFlix full-stack project
Overview
myFlix is a web application that gives users access to details on movies, directors, and genres. It was created using the MERN stack. Users have the option to register, edit their personal information, and compile a list of their favourite films.
Purpose & Context
myFlix was a side project I created for CareerFoundry's web development course in Berlin, Germany, to show off my proficiency with full-stack web programming utilizing frameworks like React and Angular.JS
Objective
The project's goal was to construct the application's server-side and client-side components entirely from scratch.
Tools
The following tools were used to create the application:
• Html
• Scss
• Javascript
• Postman
• Angular.Js
• MongoDb
.png)
Methodology/Implementation
Server-Side creation
Using Node.js and Express, I developed a Restful API that communicates with a non-relational database (MongoDB). I also used well known HTTP methods such as GET or POST to access the API. Finally I employed the CRUD techniques to obtain and save data in the database. The API then returns a JSON-formatted movie information when called upon.
Also i used Postman to check that the API was functioning properly and in addition, I added JWT and elementary HTTP authentication for user identification and authorization codes.
Client-Side creation
After finishing the API, I began to create the user interface that users would use to send requests to and get results from the server-side. It was created using React and React-Redux and is a singlepage, responsive application. It offers a number of interface views, including, but not limited to, a main view (displays a list of all movies), single movie view (displays information about a single film and enables users to add the film to their list of favourites), login view, registration view, and profile view (where users can update their user data and list of favourites).
Challenges
I particularly found Angular framework interesting. Despite that the fact that its development process was a bit arduous. This is because i noticed some differences in the syntax as ascribed to the TypeScript language of the Angular framework in comparison to the regular JavaScript syntax. To also tackle this disparity I had to utilize some documentation and also look at some YouTube tutorials which were recommended by my mentor and also my tutor. This step actually helped me a great deal to resolving the syntax issues. The installation of the software was another intriguing and difficult aspect of the project, requiring constant documentation checks to make sure the correct versions were correctly installed. I occasionally get problems, but I typically am able to address them on my own by conducting my own investigations and debugging. But in situations where these procedures failed, my tutor and mentor always made the difference by using peer programming to assist me resolve the issues and adhere to the project deadline
Duration
The development of the client-side was particularly challenging. It took me a month to accomplish the objectives. Eventually, after some break and a restudy of the React documentation, a better understanding was achieved as to the functionalities of React, React-redux, Angular and also the use of typescript
Credits
- Role: Lead Developer
- Tutor: Jonathann Nshuti
- Mentor: Mohamad Muaaz Nashawi
