VueJS/Laravel Address Book app

As an introduction to vue development – I’ve used it to build an address book – it’s running on a PHP/Laravel 5.8.

The app is quite loose and is a straightforward introduction / easy to understand app to play around with and make changes / additions. It’s got a simple routed component structure and various bits of CRUD functionality.

Github link here

Live Demo Here

Built on Vue JS 2, this app incorporates:

  • Laravel 5.8 Json API
  • Token based auth
  • Vue router
  • Bootstrap 4 UI
  • Basic token-auth functionality
  • Axios http library

Apache2: Disable mod_security for a virtual host

How to remove the security module for a particular site.

This cannot be done in the htaccess file for modsecurity2 – youll get a sitewide 500 error and “SecRuleEngine not allowed here”.

To switch it off in the vhost:

<VirtualHost *:80>
        #...
        ServerName ...
        ServerAlias ...

        ServerAdmin ...
        DocumentRoot ...
        
        <IfModule mod_security2.c>
                SecRuleEngine Off
        </IfModule>

Portfolio: Insurance claim management platform

IImageIT is a large insurance claim management platform – used by many large auto repair centre’s across the UK. It tracks everything from initial customer damage reports, all the way through to the repair of the vehicle and the ordering of new parts from any number of suppliers.

I worked on a large upgrade of the site including scalability enhancements. This involved all aspects of full stack development from concept, to structure to development and testing.

Features:

  • Huge library of features – completely comprehensive solution
  • Rapid development tools created by the team

Tech stack:

  • PHP7
  • AWS
  • S3
  • Codeigniter
  • MariaDB
  • NodeJS

Improvements & Next steps

  • Split into micro-service structure

Portfolio: E-Learning Platform

This project is an e-learning platform built for industrial clients – used to manage the compliance/training needs of staff within a business. Typically it’s used in industries where staff compliance is required, such as GDPR.

I worked on the design, conception, implementation and on-going maintenance and upgrade of the site.

My role was to support a variety of international clients get set-up with the system, including development, integration, functionality, support, training and site-technical consultations.

Features:

  • Highly robust hosting solution
  • Various integrations of external products, such as in-app video conferencing, Scorm and x-api support

Tech stack:

  • Laravel 5.7 build in a modular/extendable structure
  • Bootstrap
  • Semantic UI
  • Websockets
  • MariaDB

Improvements & Next steps

  • Further enhancements to video conferencing.

 

Portfolio: Large scale news portal for the European Union

This is a very large scale news portal built using Drupal. It publishes thousands of news articles and research papers on behalf of the EU Scientific project.

I worked on the design, conception, implementation and on-going maintenance and upgrade of the site.

My role was an on-site consultant for the project, covering Germany, Italy and the Netherlands to further develop and support the project.

Features:

  • Alexa rank of 803 (at the time of writing)
  • Extremely high load
  • Various integrations of content sources

Tech stack:

  • PHP / Drupal
  • Bootstrap
  • Varnish caching
  • Jquery & various libraries

Improvements & Next steps

  • Build out custom content/editor workflow functionality

Portfolio: Takeway ordering app

This is a large scale white-labelled ordering app that holds around 500 restaurants. It’s similar to Hungry House and allows users to search for the nearest takeaway/store and create an order for collection/delivery. It’s a large application that’s been in development for around 10 years – I held the position of API Engineer/Web developer (senior).

I contributed many functions to the system, such as external hardware integrations, payment integrations and order-product management.

I lead the development of all new web features during my tenure and worked closely with mobile development teams and other departments to enhance the product and deliver a suitable solution to feature requests.

Features:

  • Huge library of functionality
  • Handles thousands of orders per day
  • API Supporting iOS & Andriod apps
  • Extremely flexible

Tech stack:

  • PHP5 / Symfony Components
  • Bootstrap/Twig
  • MariaDB high performance database structure
  • Jquery & various libraries
  • Fully whitelabelled
  • Fully managed solution

Improvements & Next steps

  • Convert the order flow to a more modern JS framework such as React.

 

Portfolio: Web database – GDC Resource

https://gdcresource.com/

This site was developed by myself as a public database for debt collection agencies. I’ve built it in a structure that can be copied to basically any industry.

Features:

  • Global search functionality
  • Distance calculation on the fly
  • Stripe integration & premium membership options
  • Low build time: under 1 week from concept to production ready product

Tech stack:

  • Codeigniter 3 & PHP7.2
  • Bootstrap
  • MariaDB high performance database structure
  • Jquery & various libraries
  • Responsive design
  • Lighweight & seo friendly structure

Improvements & Next steps

  • Multilingual
  • Convert the search functionality to React for a smoother experience
  • Paypal integration

 

This site can be easily white-labelled in under a day – so if you’re looking to host a similar site then get in touch!

 

ReactJS Address book app

As an introduction to react development – I’ve used it to build an address book – it’s running on a PHP/Symfony api.

The app is quite loose and is a straightforward introduction / easy to understand app to play around with and make changes / additions. It’s got a simple routed component structure and various bits of CRUD functionality.

Github link here

Live Demo Here

Built on react v16, this app incorporates:

  • Context API
  • React-router 4
  • React-alerts
  • Bootstrap UI
  • Basic token-auth functionality
  • Axios http library

Starting software development? / computer science student? – Learn these 5 things now

  1. Git – team collaboration tool, tracks changes to files/scripts over time with tons of useful features.
  2. Setup a web server – Serve websites/files/services over a network.
  3. Learn basic SQL – Application data storage – how many apps can you think of that aren’t storing data somewhere – my guess is not many.
  4. Create an address book – Useful and will teach yourself the basics of whatever is your chosen flavour of development
  5. Get a domain – Learn some essentials and get yourself some web presence
The further studying is for super keen students - not completely necessary but will benefit you in the future in a big way. Also if you're not interested in getting into software development directly - most are applicable to any IT based environment.

1: Setup a git repository

Why?: GIT is an industry standard tool and is used to track the changes of scripts/files/source code.

Source control is not just used in software development – system admins might use it to store/update their shell scripts, or DBA’s use it to track changes to stored procedures.

As an example, this is how a developer might create a “new chat emoji’s” feature off of facebook’s master source code – the branch will be used to test out and create the new functionality, once tested it’ll be pulled back into the main code for going public. Whilst in a separate branch is it kept separate for testing and development.

There are other flavours of source control, such as SVN and Mercurial – they’re all fairly similar so focusing on GIT is a good option.

You will learn?: How to collaborate as a team, how to properly organise and store project source code.

Further studying: Create a branch off of your master (main) codebase – change something and merge it back into your master.

What to do: Head over to https://bitbucket.org/ and create yourself a free account – When you’re working on any project – setup a repository for it and keep committing your changes. Over time and when other team members that come and go – you can track all changes and keep in sync as you go along.

Pro tip: Dont store production passwords in GIT

 

2: Setup a web server

Why?: Websites/web applications/mobile apps – these are using web servers to communicate over the internet. There isn’t much need for an explanation here but if you dont know the basics of getting a web server up and running you’re at a major disadvantage.

Apache is the industry standard here, there are other flavours such as NGINX and IIS – although at the student/starter stage I wouldn’t worry too much about that. If you’re developing in a Microsoft environment then substitute Apache for IIS – it’s built into various versions of Windows.

You will learn?: Configuration, basic networking, basic security, authentication & hosting your website(s)

Further studying: Read up on hardening the security of your web server – turning off things like directory browsing and error reporting in a production environment. Setup an FTP server on your web server computer and edit the files on it from another computer. (Do it on the same local network for now)

What to do: Head over to https://www.apachefriends.org/index.html and install XAMPP – its an easy to get started web server bundle for local development.

Pro tip: Don’t use XAMPP in production.

3: Learn basic SQL

Why?: Almost every app stores data in some way – Instagram posts, facebook like’s, contacts on your smartphone – these are held in database tables.

You will learn?: How to manage the data storage of your application – to store the data in an easily and accessible way. To store/fetch and maintain the data in a way that’s usable, useful and will be the foundation of a solid and reliable application.

Further studying: Read up on SQLite – a small self contained database file similar to MS Access – it’s commonly used in Android apps.

What to do: The above mentioned XAMPP package includes a MYSQL Server installation – here you can setup a database and some tables. Think about something you might want to store – such as a list of contacts, and how you might want to store that in a database.

Pro tip: Read up on sensible database design here. There’s no need to get super in-depth with it at this stage – think of it as guidelines on structuring data in a sensible and scalable way. You could list some phone numbers in an excel spreadsheet easily – what if you had half a million records, associated address(s), relatives, business contacts, locations – SQL is your friend here.

4: Create an address book

Why?: Boring I know – but creating an address book will teach you the absolute fundamentals of software development: CRUD, Create-Read-Update-Delete. How many apps can you think of that aren’t creating/reading/updating/deleting data? Not many I guess.

You will learn?: How to structure an application and the fundamental aspects of software development. Once you’ve got these down the sky is the limit. Everything else will open up to you from this point.

Further studying: Develop the ability to store contact photographs along with the standard details. Include authentication to password protect your address book.

What to do: Start simple – the biggest issue with new developers is getting swamped and trying to go too far. Start by listing out contacts from a database table that you’ve manually inserted, then afterwards you can worry about enhancing the application with inserting new contacts – and updating existing ones. Stay away from frameworks at this stage – worry about specific methodologies later on – also, if you know the core basics of a language, all of its frameworks are easy pickings.

Pro tip: Do some reading on “SQL Injection” – it will save you some security headaches in the future.

5: Get a domain

Why?: Any site/application/service you’re going to create is going to need to be accessible to the public, this is where domains come it. Not only are they are presentable way to get publicity and easy-access – you can use a single domain to host various different things.

You will learn?: Domain setup, IP Routing, DNS Setup, troubleshooting and getting a website live on the internet.

Further studying: Setup your own small site to showcase your skills and abilities.

What to do: Cheap hosting packages are available for pennies per month and usually come with a free domain – grab one and start to publish web pages. You’ll get access to the control panel where you can setup FTP accounts to upload your files. Upload your new site here.

Pro tip: Check the error log files if something isn’t working.