About my weather app

Hello and thank you for viewing my first project, which is a weather app. I created this app by completing The Odin Project, which is an online course for learning full-stack web development. I independently learned about the utilised technologies before commencing my Master of Information Technology degree at the University of Southern Queensland.

#Why I built this app I built this weather app to improve my competencies with the technologies commonly used in front-end web development. Another reason I created this app is to demonstrate my abilities, proactiveness and high level of motivation as a junior software developer. Please note that as this was my first major software development project, it is not as well designed or implemented as my more recent projects that are also on GitHub.

Technologies used

This app was created using various technologies, including:

• Visual Studio Code
• Git for version control with the Feature Branch Workflow
• npm and a configured package.json file
• React (Create React App) and Javascript
• Tools such as Webpack and Babel for creating optimised production builds (managed by Create React App)
• Tailwind CSS (a PostCSS plugin) -HTML5
• ESLint and Prettier for linting and formatting my code
• Github for hosting my code and Github pages for hosting the app's deployed builds.
• OpenWeather APIs for determining longitude and latitude coordinates and for obtaining weather data.

Skills developed during this project

I developed several skills important to junior software developers by completing this project. These skills include:

• Defining an app's requirements and selecting the appropriate tools to create it.
• Decomposing the app's requirements into smaller requirements and then using these requirements to formulate a practical approach to building it.
• Using HTML and CSS concepts such as CSS grid, flexbox, margins, padding and font styling to achieve the desired UI.
• I deepened my understanding of React and its virtual DOM implementation. I also practiced creating both class and function components, though during refactoring I converted the class component to a function-based component to improve consistency across the app. In addition, I created custom hooks such as use3H5DForecast.js, which uses the Fetch API to get three-hourly data from a server.
• I gained practice in implementing form validation for the city search box.
• I gained proficiency in using SVGs in React applications.
• I greatly improved my competency with vanilla javascript, as I used it to create various functions needed by my app in the ./functions folder.
• I increased my ability to independently fix syntax and runtime errors, as well as find the solutions to problems using resources such as Stack Overflow and documentation.
• I improved my understanding of synchronous versus asynchronous control flows and javascript promises.

What I would add to my app

• Client-side input validation to check that the user has input a valid city
• A backend implemented with ASP.NET Core and C# to hide the API key used to make fetch calls to the OpenWeather APIs.
• The backend would also enable me to implement an autocomplete feature by storing city names in a SQL or other type of database.
• Thorough unit testing for every React component and most of the javascript functions to ensure that the app operates reliably.
• I would either pay for better weather data from the OpenWeather APIs or use a different API. This is because a key limitation of my app is that minimum and maximum temperatures are not provided by the APIs used and therefore need to be estimated based on the limited available data, which leads to inaccuracies in the temperatures displayed in my application.

What I learned during the development of this app

Designing and creating this app has greatly improved my competency in front-end web development. However, errors often occurred when developing my app which indicates that I should have created unit tests for each React component that I constructed immediately after doing so. Alternatively, I could have wrote tests for a given component before creating it, in the form of test-driven development. I therefore intend to learn more about Jest and React Testing Library, so that I can develop unit tests for each of my React components and javascript functions. Implementing this testing will improve the reliability of my app and enable me to more easily detect when I make changes that negatively affect its operation.

Creating this app also led me to realise that there is a lot that I do not yet know about both front-end and back-end development. I am therefore keen to continue to learn about new technologies and to improve my skills as a developer. I will achieve these aims through continued proactive independent learning, completing more projects, continuing with my online masters degree and by gaining employment as a junior developer.

Once employed, I will proactively learn about my organisation's codebase and technology stack. I will also endeavour to quickly improve my competencies in the skills needed in my role and seek feedback and learn from experienced colleagues. I am extremely passionate about software developement and wish to apply what I have learned to bring value to your organisation.

Thank you for taking the time to read this description.

Please contact me if you have any feedback on my portfolio or wish to discuss an employment opportunity.

Yours faithfully

Julian Khan