'MyUtd' Website Application

Summer 2020 Project

Brief


"To create a website application utilising new technologies in order to demonstrate the process of improving my skillset as a website developer."

Overview


Whilst searching for full-time employment as a junior or graduate developer, I believed it would have been beneficial to utilise my spare time to improve my skillset as a developer. Having experimented with technologies via 'Codecademy' and 'YouTube', I thought it would have been a great opportunity to create a website application to evidence this. This would have both demonstrated how to apply knowledge to a project scenario whilst also showcasing my self-motivation and conscientious attitude.

I therefore decided to create a website application called 'MyUtd' which was based on the theme of my favourite football team called 'Manchester United'. This was to allow users to view the Manchester United matches I had attended and to understand aspects including which players I had seen play as well as the results and my opinion of each game. Users were to also be able to find out statistics including how many goals I had witnessed being scored and the most seen players when attending matches. Furthermore, the application was to act as a form of diary; allowing myself to look back on the many matches I had attended and to also understand the players I had watched play and who I had seen score for both 'Manchester United' and for the opposition teams.

Due to the fact that this was a project to showcase my programming skills, the processes I undertook weren't documented in detail. This unfortunately means that aspects such as planning have not been able to be included on this page.

Technologies Utilised


Front-end Technologies

Overview

The 'MyUtd' website application mainly used 'React' along with 'Redux' but also included other technologies such as 'HTML', 'CSS' and 'JavaScript'. Furthermore, other extensions had been utilised to enhance the user experience with a key example being 'Framer Motion' to implement smooth animations. Both 'React' and 'Redux' provided a challenge to myself that I thoroughly enjoyed getting my teeth into.

Back-end Technologies

Overview

The 'MyUtd' website application utilised 'Express' to establish routes in order to obtain data from the 'JSON' file I had created and populated with data. 'Axios' and 'Node JS' were also key technologies with the former connecting the front-end and back-end, enabling different pages to receive and utilise the 'JSON' data and the latter allowing the application to run successfully. Ultimately, exploring these various technologies helped to improve my knowledge with back-end technologies.

Conclusion and Reflection


Throughout this project, I was able to learn of new areas within website development regarding modern frameworks relating to both 'front-end' and 'back-end' website development. Although I did encounter quite a few errors and challenges, I was able to overcome these either through various experimentations or through help from online resources.

Additionally, I was able to learn of the platform called 'Heroku'. This enabled myself to deploy my application so that it would work well without any issues.

If I were to approach this project again, I would attempt to utilise a database service to hold the data for the application. This is because I created a 'JSON' file to contain the data in this project.

Overall, I believe I managed to create a website application which was both professional and exciting for users to use. This is something that I thoroughly enjoyed working on and something that especially helped my understanding with elements in 'JavaScript' such as arrays and functions. This has inspired myself to continue learning new technologies; producing projects to display both my learning and my passion for website development in general.

The final outcome for this project can be viewed below.

The Final Outcome