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?
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.
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.
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.