Hi, I am
Scott Johnston

software developer

The object of this project was get more familiar with using Styled Components with React and to manage a theme switcher using more than two themes. In addition, the practice to learn grabbing the users preferred colour scheme and saving their app theme preference to the browser.

This project helped me learn how to style a project using Styled Components and enhance my JavaScript and React skills. I also used this project to improve my CSS skills with regards to the application styling and using a mobile first approach.

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.

The object of this project was get familiar with using Styled Components with React as well as having a little useful app to use when out socialising to calculate a tip and how much each person should pay in your group.

This project helped me learn how to style a project using Styled Components and enhance my JavaScript and React skills. I also used this project to improve my CSS skills with regards to the application styling and using a mobile first approach.

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.

The object of this project was create a module for authentication that could be easily imported into any future apps with minimal effort.

This gave me a good grounding in using Firebase auth and Firestore tools.

I learned how to use Firebase email and password authentication, where user credentials are stored in the Firebase Firestore database.

I also learned about using Google OAuth 2.0 for a sign in with Google option.

Additional knowledge and skills learned during this project included:

• Working with protected routes (routes locked to authenticated users only)
• API key handling to keep those keys secret and safe
• Reading, writing and interfacing to the Firestore database
• CSS styling with the Material UI library

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.

This was my second project whilst studying Professional Software Development with CodeClan. It was a group project that went from the seedling of an idea to a full working app in the space of just 6 days.

After creating the brief, MVP and extensions to work on, we started the task of design and planning. This included database design to act as our API, front-end design with component diagrams and mock wireframe diagrams.

In the Node back-end, I got to work on and improve my skills with Express server, MongoDB and restful routes.

In the front-end, I gained experience using React and JavaScript and fetching API data from our back-end routes. I also got more experience using CSS styling. I gained new skills in setting up an interactive map with Leaflet.js.

Other technical skills and working practices I improved on include using Git for software source control along with an Agile approach to project work, in having daily stand-ups, working from Kanban board for task management, team working with pair-programming along with solo programming.

Please feel free to click on the DEMO sign at the top of the page to see the project running live.

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.

This was a fun project I completed after my studying of Professional Software Development with CodeClan finished.

It has since been superseded by the current v2 of my portfolio that you are likely looking at right now.

I decided to use React for the front-end for developing my portfolio as I felt this would be best for managing multiple projects as I add more over time with the least amount change to the code going forward.

I initially hard coded all the project pages and data for each, but it was quickly becoming apparent that for each project I was adding, there was a lot of repeatable code and functionality going on.

I then decided to refactor the project to use a template style of building the page using React for each project. This meant that each project would look similar in the design and layout of each project page.

I was also able to use a JSON data file for storing all the data for each project, which means going forward I just need to add the project information to the JSON file and the project will show up in my portfolio looking like all the other previous projects without changing any code.

This project and others showcased are hosted on Netlify, Heroku and MongDB Atlas. This improved my skills and knowledge for hosting web sites on various cloud platforms.

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.

This was a small project I completed after my studying of Professional Software Development with CodeClan finished. It was a small ToDo list project (yes, I know - not another ToDo app!)

I created a brief, MVP and extensions to work on, that would re-enforce my skills using the MERN stack.

In the back-end I setup a Node express server and connected to a MongoDB Atlas database in the cloud using restful routes.

In the front-end, I gained more experience using React and JavaScript and fetching API data from my back-end routes.

After completing this project, I refactored the project to use Serverless Lambda Functions with Netlify instead of Node Express in the backend. This was a great skill to pickup and alternative to using Node Express in the back-end for serving routes.

Please feel free to click on the DEMO sign at the top of the page to see the project running live.

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.

This was a weekend homework exercise during my studying of Professional Software Development with CodeClan. It was to re-enforce my learning of using fetch and external APIs.

I decided to use the TVMaze API for the purpose of fetching TV shows based on a users input.

In the front-end, I gained more experience using React, JavaScript and fetching API data from an external source.

I improved my skills with React using state to manage searching shows, handling shows being returned and managing the users favourite shows as well as passing functions down as props to children.

Please feel free to click on the DEMO sign at the top of the page to see the project running live.

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.

This was a weekend homework exercise during my studying of Professional Software Development with CodeClan. It was to re-enforce my learning and understanding of the Document Object Model (DOM).

I decided to go all in and use JavaScript to insert, update and delete all HTML DOM elements inside the <BODY> tags using nothing but JavaScript.

This took a lot longer than I initially anticipated due to the planning and layout of each node element in the DOM tree.

Whilst I will never likely approach DOM manipulation in this way again, it gave me a great understanding of how the DOM and it's elements are structured.

Please feel free to click on the DEMO sign at the top of the page to see the project running live.

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.

This was my first project whilst studying Professional Software Development with CodeClan. It was Solo Project to re-enforce our learning of Python. It went from an initial idea to a full working app in the space of just 6 days.

After creating the brief, MVP and extensions to work on, I started the task of design and planning. This included class diagrams, wireframe diagrams using Adobe XD, user journey documents, database schema and table design for the PostgreSQL database.

In the back-end, I got to work on and improve my skills with Python Flask, PostgreSQL, CRUD functions and routing.

In the front-end, I gained experience using Python, Jinja2 and fetching data from our back-end database using SQL statements. I also got more experience using CSS styling with tables.

As this was Solo Project, it was quite daunting at first giving up so much time at the start of the project for design and planning, knowing there was deadline to meet for the overall project. However, this re-enforced the teaching we received that good planning and design is key to keeping a project on track.

Please feel free to click on the DEMO sign at the top of the page to see the project running live.

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.

This was a weekend homework exercise during my studying of Professional Software Development with CodeClan. It was to re-enforce my learning of Python after week 3.

I decided to complete the MVP and all extensions so that a player could play against the computer.

This helped improve my understanding of applying logic to the game with regards to the rules of the game and how to check for a winner.

I improved my skills and understanding with Python and scoping of methods in the class with class methods and static methods.

Please feel free to click on the DEMO sign at the top of the page to see the project running live.

Please feel free to have a look at the live demo or checkout the source code on my github.

Thank you for taking the time to look.