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-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-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
angular-signals-database
:clipboard: Angular app using signals to display and update data on frontend. The app is styled using Angular Materials. The data displayed is obtained from an array of objects stored in the Robots Service. Robots can be added to and deleted from the list.
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-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
html-scss-card
HTML, SCSS pro-processing of CSS styles to display simple info card with image
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.
node-kafka-webhooks
:clipboard: Work in progress: Kafka client KafkaJS used to interract with Confluent Cloud
nodejs-api-data
:clipboard: Node.js app to display data from a cryptocurrency API. Tutorial code updated to latest ES6
python-udemy-tests
:clipboard: Udemy course tests with solutions
TimestampUNIX
:clipboard: Gives the UNIX-time generated from a user date input