Andrew Bateman's repositories
angular-website-example
:clipboard: Namari website converted from HTML template to Angular
ionic-angular-news-app
:clipboard: Ionic-Angular app to fetch news articles from a REST API using Typescript interfaces to define the expected structure of the json objects returned & http service providers. Custom pipes used to modify API news article titles, contents and convert the Universal Time Constant (UTC) date string. Dark mode, Offline Storage of favourite articles & settings using Ionic Storage. Common Refresh & Progress Bar Components. Localisation using i18n so user can select between English (default), Spanish and French.
ionic-angular-cart
:clipboard: Ionic 5 app to collect items in a shopping basket, tutorial code from Simon Grimm at the Ionic Academy
ionic-angular-world-data
:clipboard: Ionic-Angular app that displays information about world countries and oceans using JSON data fetched from a REST API. Includes a user search of countries/capitals. Page popovers used to provide links to external websites or activate functions such as delete item from favourites.
angular-material-portfolio
:clipboard: Angular Material & RxJS Observables are used to display my data. A Google Cloud Firestore NoSQL database stores the blog posts & website data. Anyone can read the blog posts.
ionic-angular-infoapp
:clipboard: App to search for info from an API and display it using the Ionic framework. Currently using a movie database API to develop the app.
angular-tailwind-ratp
:clipboard: Angular app to show JSON data from the RATP (French transport system) API
angular-tailwind-unsplash
:clipboard: Angular app to get random images from the Unsplash API
angular-crud-operations
:clipboard: Angular app to store fast-food orders in a Firebase database. They are then retrieved and shown in a table on-screen
ionic-angular-accordian
:clipboard: App to show accordian UI and some artistic modifications
angular-firebase-access
:clipboard: Angular with Firebase backend for CRUD operations on blog posts
angular-tailwind-sncf
:clipboard: Angular app using Tailwind styles to display SNCF data from the Navitia API
ionic-angular-audiorep
:clipboard: App to play audio files using audio library Howler, another great tutorial from Simon Grimm of Devtactic
pean-stack-api-display
:clipboard: Full-stack app to display data from a PostgreSQL database & REST APIs using an Angular frontend with Google Charts, Bootstrap CSS & RxJS reactive programming. Node with Express middleware backend used to pass data from database to frontend.
angular-datastream-feed
:clipboard: Angular app that uses RxJS asynchronous code to show Reddit search results in HTML
angular-gauges-realdata
:clipboard: App using npm library 'canvas-gauges' to display real data on analogue gauges
angular-pwa-game
:clipboard: Angular Progressive Web App, Tutorial code from Fireship.io
astro-tailwind-site
Astro framework used with Tailwind styling to create SEO and Pagespeed-optimised website
beckhoff-automation-twincat
Beckhoff PLC, TwinCAT Safety controller and related subjects
ionic-angular-slidedrawer
:clipboard: Tutorial app that uses a slide drawer component to try out Ionic gestures. Tutorial code from Josh Morony
angular-api-gouvfr
:clipboard: Angular app to search for address data from the French Government official API
angular-arcgis-multimaps
:clipboard: Angular multi-page app using RxJS operators and ArcGIS esri-mapping solutions from Esri to display a map. Tailwind CSS used for reduced styles build bundle. For the About page info. the Github API is accessed using Angular httpClient and the RxJS take(1) method.
angular-data-gauges
:clipboard: Angular app using chart component libraries to display data.
angular-highcharts-gauges
:clipboard: Angular app using the highcharts API to display data.
angular-tailwind-dataportal
:clipboard: Angular used with Tailwind to create simple frontend to display backend data
header-parser-microservice
:clipboard: Obtains IP address, language and operating system from request header
meen-stack-articles
:memo: This app displays articles in a grid of Bootstrap cards. It uses the MongoDB, Express, Embedded Javascript Templating (EJS) & Node.js (MEEN) stack to perform Create, Read, Update and Delete (CRUD) operations. EJS is a templating language that uses javascript to produce the HTML template markup. I wanted to see if using EJS resulted in quicker rendering. Backend: Express routes and controllers were created in separate folders to make the code more readable. A Mongoose schema was used for the Note model.Frontend: I used the vue-moment Moment.js filter dependency to extract a more readable time format from the database UTC timestamp using a pipe.
next-apollo-graphql
:clipboard: Next.js app using graphQL with Apollo to retrieve API data.
nodejs-api-data
:clipboard: Node.js app to display data from a cryptocurrency API. Tutorial code updated to latest ES6
TimestampUNIX
:clipboard: Gives the UNIX-time generated from a user date input