This Semester
I have had workexperience
with the Mazzanti Development team
Mazzanti Automobili is a globally recognised hypercar brand, which is sought after by car collectors, enthusiasts and buyers, who desire to own one of the rarest hypercars ever built. I got work experienece with the Mazzanti development team, who had just launched the companies main website after a massive rebranding in August 2021. I shadowed and followed the development team and was tasked with creating a Prototype Native IOS and Android application for their customers to use, presenting them with a login in system, store information, tour dates and enabling users to connect with the cars via thier phones, as well as a small electronics mini project to coincide with the app. The launch date set for August 2022.
What I have done
Week 1: Fitting in
Within my first week of work experience, I was introduced to the team and what they had been working on within 2021. I was also informed about what sorts of experience I would get, as well as ascertaining my passions and strengths within development. These meetings were conducted via teams due to half the team being stationed in Italy and the other within UK, also doesn’t make sense to fly out on a student loan!
I established that I was a fan of Javascript, especially the React.js framework, as I had used it on my previous projects such as Project O and the transmedia project. I was introduced to what langauges and frameworks the team had used inside of the development for the main website. I was sent away to look at the main website and look at any mistakes and flaws within the websites interface as well as its code. I was very satisfied with my first week of work experience as I got to know the team and I was able to show my strengths and weaknesses, however I was keen to get straight into a project however the team wanted to teach me industry practice before I jumped into anything major.
Week 2: Bug fixing and skills
In my second week of work experience, I was introduced to the main Mazzanti website and I was presented with how it was made. They had recently launched the main Mazzanti webiste back in August 2021. They took me through how they had started the development process and gave me suggestions for how I should start my future projects. I was shown how to create an effective site map, as well as assessing what appropriate frameworks and stacks should be used for different projects. For example if I am to create an application that needs to last long into the future, its probably not best to make use of jQuery as a framework, as it is starting to die as a programming lanaguage and thus would be redundent furthur into the future.
Furthurmore I had completed my overall asessment of the main websites code as well as looking into its fucntionality issues, in which I was given to do in week 1. The website had a few minor functionlity issues, such as download links not linking to relavent links aswell as the main contact page for the website not actaully linking and coming up with 404 messages, in which I felt was a very easy fix as the head developer had made a mistake within the sites HTML. I also had a few design issues with the website, in which I passed on to the head designer to make the relevent changes to the website itself.
Week 3: The webapp
In week 3 my development work with the team really started to get going. The main objective for the company, aswell as the development team was to get the brand out into the world, and I suggested that they should consider making a mobile webapp, in which users can use to learn about the brand and the cars they sell, as well as this, existing customers can log into the application and interact with their cars, similar to that of Tesla and Ferrari, who both utalise native applications to enable customers and enthusiasts to learn about the brand and to keep up to date with the brand. I offered to create a prototype for the team to look at, as I am an avid fan of React and I wanted to expand my skills within native programming, aswell as expanding my knowledge furthur into the wonderful framework that is react.
The team were keen to see what I could produce and what I could learn from this, so they gave me the opportunity to do it. I immediatly started to research different types of car applications and what makes them stand out to customers and users, as well as what types of frameworks they are built from.
Week 4: Teaching myself React Development
Before this project, I had only used React within one of my group client projects: "Project O". The team and I decided to follow the web app approach as the main developer felt that web apps are not only becoming the future of coding, but are also a lot more cost effective as they work on most, if not all devices. I told the team I would like to make use of React, as I like how user orientated the framework is, as well as React being known to be one of the most popular frameworks within programming. I also preferred it over other langauges such as Xcode, as I was relatively familiar with Js.
In order to understand and plan how to create the prototype, as well as brushing up on my React skills, I made use of the Clever Programmer youtube channel, as well as looking in to Traversy medias: React crash course. I also made use of W3Schools React page. After gathering some ideas about react and how to approach it I jumped into researching and developing the app.
Week 5: Methods, Research and Redux
In week 5 I was told that before I started to code, I would need to map the projects architecture, have solid plan for what language I was using, a list of all features and entities and a work schedule. I therefore created a Gantt Chart and provided the team with a rough time scale of the development of the prototype (seen to the left).
I made use of Redux within React, this is because me and the team wanted to have the navigation state stored in the same area as the application state. By using Redux, I was allowed to store the state within my own custom actions which communicate with the navigation state directly, allow dispatch navigation actions from anywhere.
Furthurmore Redux also works via reducers and states. A reducer commands actions to a state, an examples of this can be changing the value of a states variable.
- A store essentailly records varibles and does not allow to change via Javasscript resolution
- And an action is what can be changed to a state. Actions can also communicate with a reducer enabling command actions.
- I have decided to use the components as users and information can be stored safely within the app, as the information will not be changed without intention.
Week 6: Great Leap Forward
In my reading week, I took advantage of the time I had off to look into possible back end routes I could use. I was keen to look into Laravel and tokens however after having a meeting with the development team, we felt it appropriate to go with a system I was already acquainted with I was therefore left with either Firebase, which is a Google backed back end service or MongoDb, in which I had not used since my first year.
However using Firebase has its pros and cons, as using it as a service for large amounts of traffic can be very expensive to use, however its ease of use and compatability outweigh this negative. Furthurmore using Firebase for the prototype is appropriate, as its not going to gain large amounts of traffic and the back end can be easily reorganised for the launch of the app when it is completed. So I therefore decided to go with Firebase for the back end of the webapp.
I also decided to cover some admin processes during this week as well, I created the github repository and started to orgainse the project so that the team could moniter my progress via my uploads to the github repository.
To establish the webapp as a react application I made use of Visual Source code, as it is not only the standard service used to program in react, but it also has many helpful plug ins, in which th dev team provided me with, which enabled me to work with them via screen share, as well as useful commands which make life easier whilst coding. Examples of plug ins I used for this project include: Live Share extension - which enables me to share my programming screen with another user via their Github account, Yarn - which enables me to make simple commands for VS code, as well as ES7 snippet search - which enables simple extensions for React, Redux and Native.
Week 7: App.js and More
As I used reading week to set up and create a plan for how I would code the project, I was finally ready to start coding, I made use of Clever Programmers video on creating a React Redux Application to help guide me through the project. I started the project by downloading native and redux before creating the react app through the integrated terminal.
Coding the structure of the application was relatively straight forward, with me making use of basic CSS to make the app look presentable. I imported the Material Ui, as I had used it in my previous projects, to make use of the many icons they have to offer as linking them within a react application is very straight forward and the icons are styled like any generic icon you'd find on the internet.
To make sure that My website felt clean and smooth to the user, I also imported animations via the website react-reveal, which is a high performance animation library for react, which lets you add to your website to enable small animations when the user interacts which certain components, for example a zoom effect when a user hovers over a button.
Weeks 8/9: Menu System,Redux slicing and reducing
Going into Week 8 I started to create a smooth functioning menu system in which the dev team told me that it must be sleek, simple and easy to navigate. From this I decided to go with a transparent border for the top menu which overlaps the pages as the user scrolls down through the website, this was done in accordance with what the designer wanted for the webapps look.
Moving furthur into week 8 I started to redux slice. A 'Slice' is a collection of Redux reducer logic for a feature within a react app, usually within one singluar file. This derives from splitting up the root of the Redux state object into multiple 'slices'. I found this process quite confusing and I had a few minor issues to do with grammatical errors, in which I turned to the dev team to help me fix, which to my dismay was just a simple fix changing "iintialState to intialState," etc.....
To make sure that My website felt clean and smooth to the user, I also imported animations via the website react-reveal, which is a high performance animation library for react, which lets you add to your website to enable small animations when the user interacts which certain components, for example a zoom effect when a user hovers over a button.
Pushing into week 9 I also started the function of Redux Reducer, which is a pure function that takes the previous action/state and then returns the next state. This function is called a reducer, as it is a function in which you pass to an Array.
At the end of week 9 I had a catch up meeting with the development team to inform them of my progress as well as telling them what I had learnt. As I had built built the structure of the front end to the desingers needs, I was then instructed to create a fucntional log in system, which links to Firebase. I was allowed to do this with any means necessary. I was then asked what sort of code I would like to work with next- That was not to do with React.
I informed the team that I was quite fond of Python and that I had enjoyed learning about it in college before uni. We decided that I would utailise my raspberry PI and electronics to create a feature that enabled the webapp to notify the user of how many people were sitting within the car and show whether they were wearing a seatbelt, as Eventura Hypercars come with interchangable racing seats which dont have this feature linking to the cars computer.
Week 10: Finishing up the Webapp and Starting the Python project
In order for the log in to work properly it would need a competant API, which can pull and implement files between the back end of Firebase and the React Webapp. I believed that creating this link was the most difficult part of the process and required the most iterations. As seen to the left is the js I programmed to link the firebase back end to the react application.
To create a link between the front end and the back end I created a configurration file within the react app. This file was responsible for all the configuration settings within the app. It contains an API key which enables the user and the database to communicate, this in turn, initilises the application. To the left are lines of code in which enable the app to access to the firebase database, as well as user autherntication (Logging in/out).
After completing this setting up the API key. I used one of Firebases many benefits which enables you to use many different login methods, I spoke with the dev team on what would be the most applicable to them for when customers are using the app. They decided that using an email authentication would be the most appropriate way forward, as customers were required to have an email when purchasing through the mazzanti store and thus ease of data.
The login system was functioning well however whenever the tab was closed users were logged out. I solved this issue by storing the exisiting keys and tokens within the phone/computers storage. CleverProgrammer suggested that using an expo secure store library on devices would be a move. This enables a token to be stored within redux, allowing the app when the user re-opens the app, to check for a token and sends it to firebase for back end validation. Firebase verifies this and enables the user to be checked for validation.
To conclude, I feel this project has been extremely beneficial to my growth as a Developer. This is down to working with people within industry, who have helped me to mold my skills within React, CSS, SQL and Python. I have sharpened my skills within CSS and feel a lot more confident about implementing intersting style features into my coding and I am also more confident in how I begin a project, as well as ending one. Furthurmore I have dipped my fingers into Pyhtonwhich is a langauge in which I have been keen to work with for a very long time. It has enabled me to gain a passion for electronics and I will look to expand this passion into my second semester at university. This project has allowed me to flourish my organisation, time management and communicatative skills, as the weekly team and zoom calls enabled me to stay up to date with the team, as well as allowing me to bring up any quieres I had as well. However I do feel that my organsiation and time management skills could have been improved, as I completed the webapp two weeks later than intended on my gantt chart however I have learnt my lesson and will work on this into the future. This did somewhat impact my project as I did not manage to get around to creating an e-shop for the team, however I will most likely take this challenge in January 2022. If I were to work with Mazzanti on this Webapp again, I would definatly look into using Laravel as the back end langauge, as I am familiar with vanilla PHP and Laravel is more of an industry standard back end service than firebase. I would also set myself coding targets for each week, instead of having and end date and just working towards it, this would save my blood pressure a lot of stress! With a solid plan and target, I would have had a good coding routine in which I could balance my coding work out against my Literature Review and my business plan. This would have allowed more time for coding and preparation which ultimately would've kept me on target. Going into the future I will keep my love of react up and continue to light my passion for electronics, as I feel Python would be a very beneficial langauge to learn especially if I'm looking for interships at robotics and development firms. The files were requested via any form so this wasn't too difficult, however the team want me to continue to work on this project within 2022, so the form will be properly complete in March.
Final Development and project summary
Handover Document
NLT form
NLT Form
Live CV
CV
