A Netflix styled application in React from scratch using JavaScript, HTML, CSS and React. From frontend, backend and deployment
This project was developed during a 2 month evening development bootcamp, which I took to further my knowledge in development and to use what I have learnt for future personal and professional projects
Debugging, Stateless and stateful Component creation, Hooks, Objects, Arrays, Functions, accessibility for code, drontend development, backend development, deployment
2020 - 2 months (bootcamp)
Developer and UX Designer
• HMW create an application that uses web technologies to make mobile first and accessibility first product?
JavaScript Foundamentals
Learning the foundamentals of JavaScript is very key to building an web application. The areas that I focused on were 'Arrays', 'Loops', 'Objects', 'Functions', 'Classes'
Functions
Functions are a powerful feature to JavaScript code, as it allows for code to be re-used throughout the application whereby reducing duplication and redunent code.
Frontend Principules
Accessibility is a foundamental part of frontend development, it allows users with various needs to use a product of service with addition tools such as, screen readers, keyboards, controllers and more.
Design to code: Bring over design to code can be a challenge, but with the frontend principles of code the transition was smooth.
React
Selecting React library for this project was due to the ease of learning it's syntax (JSX) and there's a lot of documentation to support new learners like myself. Furthermore, the library is flexible enough to work across a large of devices because of the usage of web technologies such as, HTML5, CSS and JavaScript.
The card component is a main element for most applications. This component pulls in data from an array of objects in a JavaScipt file. The object 'key' allows specific data to be applied to different parts of the card.
This component pulls in the 'Card' component and lists them in a grid format. Each card shows unique content different from the others, this has been done by making the 'Gallery' a stateful component. A stateful component can select specific objects to list the same or different content.
This page is very simple as it pulls in the 'Navigation' and 'Gallery' component. The unique part of the page is the inclusion of 'Routing'. Routing allows pages to be connected to different components to bring navigation to the application.
This page uses 'Class' function that has 3 key parts; 'Constructor', 'Component DidMount' and 'Render'. The 'ComponentDidMount' listens to the previous page's component select which would be the 'Card' component and reads that Card's 'Id'. The Id gets passed onto 'Render' where parts of the Card component's object related to the Id can be displayed on the screen. The developer has the flexibility to place content within the object anywhere on the page.
The final part of the delivible for the 2 month coding bootcamp was to deply the application to the internet. The method that I took to do this was by using a service called Zeit Now, a service that connects to GitHub and deploys it their own database. Zeit Now doesn't work with databases such as, MongoDB. Due to this I have also deloyed the application to Heroku.
The experience of being able to create an application based on web technologies has helped me gain a deeper understanding of the digital space. The 2 months in-person bootcamp braoded my understanding of how design can be taken and used for development, which has helped me create my own personal applications, as well as being abel to contribute more with the development team at work.
What has been learnt goes beyond the basics for learning JavaScript and React as I've learn about databases and backend development too.
This project is far from over and has only begun. I am continuously updating the application with new components, trying out new JavaScript and React methods. More exploration with the backend with MongoDB will help make the application more dynamic.
I have continued to progress my knowlegdge of code by enrolling in Codecademy's 'Website Development' course. Moreover, have started developing my own personal projects which I have created from User Research, Design and now Development.
More future development projects will be added to my portfolio in the near future.