AndrewJBateman/angular-material-portfolio

Stars
10
Rank 1,770,819 (Top 36 %)
Language
TypeScript
License
MIT License
Created almost 5 years ago
Updated over 1 year ago

AndrewJBateman/angular-material-portfolio

AndrewJBateman

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

📋 Angular Material & RxJS Observables are used to display my data. A Google Cloud Firestore NoSQL database stores the blog posts & Contact Form data. Anyone can read the blog posts. Angularfire-lite was used as a Firebase API wrapper as it is simple and lightweight, reducing Vendor bundle size & improving the Chrome Lighthouse score.

pern-stack-auth

📋 Repair. PERN stack todo app with jwt user authentication

angular-website-example

📋 Namari website converted from HTML template to Angular

ionic-angular-news-app

📋 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

📋 Ionic 5 app to collect items in a shopping basket, tutorial code from Simon Grimm at the Ionic Academy

ionic-angular-world-data

📋 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. Integrated Google Maps API to show interactive country map. Ion-grid with fixed column size used so content is responsive.

ionic-angular-project

📋 App from Udemy Ionic course that is similar to Airbnb. Firebase 'ionic-maps-api' project deleted. Would need a new Firebase project creating

ionic-angular-infoapp

📋 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-firebase-auth-service

📋 Firebase user authentication service, tutorial from Stephen Fluin, Demos with Angular

pern-stack-todo

📋 PERN full stack todo app using PostgreSQL as a backend database with Express middleware React as the frontend and Node.js as the backend server. deployed to Heroku. Tutorial code by The Stoic Programmers (see 'Inspiration' below)

ionic-angular-calendar

📋 Ionic app to drag & drop items, tutorial code from Jameson Saunders of JamiBot.

python-django-crypto

📋 Python-Django app to fetch and display crypto currency prices from the Coingecko cryptocurrency API

angular-material-nav

📋 Angular app using Angular Material & Angular Material Schematics to create a responsive side navigation menu.

ionic-angular-stock-data

📋 Ionic app to chart historic stock prices from a financial data API

angular-data-charts

📋 The Coronavirus API this app is based on no longer exists. Covid-19 data was displayed using angular-google-charts module. Covid data/news from api.coronatracker.com was shown in mat-cards.

google-cloud-resources

📋 Collection of links, repos, pdfs and all other material for Google Associate Cloud Engineer

python-django-barcode

📋 Python-Django app to create & display barcodes

angular-tutorial-assignments

📋 Course notes and assignment solutions for Udemy Angular 8 course

node-sequelize-postgresql

📋 Node.js + Express used with Sequelize Object-Relational Mapping (ORM) to perform promise-based Create, Read, Update & Delete (CRUD) operations on linked data tables in a PostgreSQL database

ionic-react-firebase

📋 Ionic app with react and firebase as a backend

react-native-cryptos

📋 Displays crypto-currency API data from CoinGecko. Tutorial code from Fazt Code.

postgresql-rest-api

📋 PostgreSQL database used with nodejs and express to create a REST API

ionic-angular-datatable

📋 Ionic app to show json data table, using Swimlane npm module 'ngx-datatable'.

ionic-angular-imagecrop

📋 Ionic app to crop images. Another excellent tutorial from Simon Grimm at the Ionic Academy

angular-tailwind-unsplash

📋 Angular app to get random images from the Unsplash API

react-app-cryptocurrency

📋 Shows prices of cryptocurrencies via an API. Uses the React library

ionic-angular-contacts

📋 Ionic app to transfer contacts using Cordova plugins. Tutorial from the Ionic Academy

vue-app-crypto

📋 Vue app to display cryptocurrency api data

ionic-angular-auth

📋 Ionic Authorization app using jwt tokens. Tutorial code from Simon Grimm of the Ionic Academy

fastapi-python-sql

📋 FastAPI web framework used to create a REST CRUD API with Python and a MySQL database.

ionic-angular-todo-app

📋 App created using the Ionic framework, using a firebase cloud database to store to-do data. All CRUD operations can be carried out using the Ionic UI.

angular-material-table

📋 Angular app to display a table using the Material library

react-file-upload

📋 Express backend server app to handle file uploads

mevn-stack-notes

📋 Full-stack app using MongoDB, Express, Vue and Node.js for CRUD operations

pern-stack-database

📋 Full stack app using PostgreSQL, Express, React & Node.js. Tutorial app

ionic-angular-material

📋 Ionic app to use the angular material library. Another great tutorial from Simon Grimm at the Ionic Academy

ionic-angular-notes

📋 App to show a list of items, each with a clickable link to a detailed page. To be developed into an Android app.

ionic-angular-weatherapi

📋 App to display weather data from a weather API using the Ionic 5 framework.

mern-stack-records

📋 Mongo Express React Node (MERN) full-stack app to perform CRUD operations on records

vuex-state-management

📋 App to learn about state management using Vuex. Tutorial from Gary Simon of Coursetro

angular-pwa-ssr

📋 Angular app with Server Side Rendering working as a Progressive Web App. Deployed to Netlify.

angular-tailwind-authpanel

📋 Angular app using Webpack & Tailwindcss components to display a login dashboard

angular-material-notepad

📋 Angular used with Material & Tailwind components to display and add notes in a table

ionic-select-searchbar

📋 Ionic app to use the Ionic Selectable Module

angular-graphql-data

📋 Angular app to display data from Rick and Morty API using GraphQL with Apollo.

angular-news-app

📋 Angular app that displays news articles from a news API.

angular-data-dashboard

📋 Angular dashboard to display data using Google charts

angular-movie-database

📋 Angular app to create movie database using rxjs and observables

angular-crud-operations

📋 Angular app to store fast-food orders in a Firebase database. They are then retrieved and shown in a table on-screen

angular-webcam-video-capture

📋 Displays webcam video stream and captures images from local PC using a web browser. Photos can be captured using a button that will save the images in an array. Works in Chrome only.

ionic-angular-sqlite

📋 App to store data using the Ionic framework, cordova SQLite database, cordova SQLite Porter and Capacitor.

angular-api-project

📋 App using a DataService with httpClient to get json data from an external API.

javascript-scroll-navbar

📋 Uses css to add a class to change the nav bar when the user scrolls up. Wes Bos Javascript30 tutorial 24

ionic-angular-authUser

📋 Ionic-Angular used to authenticate users so they can access a simple chat app.

angular-dragdrop-module

📋 Angular app to learn about Drag and Drop module, following Youtube tutorial by 'Demos with Angular'

ionic-angular-accordian

📋 App to show accordian UI and some artistic modifications

node-mongodb-zod

📋 Node.js app

mevn-stack-data

📋 MEVN Info & Full stack MEVN app with CRUD functions

ionic-angular-photostore

📋 App to take, store and display photos using the Angular 8 and Ionic 5 frameworks.

ionic-angular-swipeTabs

📋 Ionic tutorial app from Simon Grimm of the Ionic Academy

ionic-angular-github

📋 App to search for a Github profile using the Github API then display key info using ion-cards

ionic-angular-qrreader

📋 Ionic app to read bar codes. Another excellent tutorial from Simon Grimm at the Ionic Academy

ionic-angular-csvdata

📋 App built with Ionic using code from another great tutorial by Simon Grimm of the Ionic Academy

next-graphql-prisma

📋 A Next.js React app using Apollo GraphQL to get data from a Prism database.

angular-firebase-access

📋 Angular with Firebase backend for CRUD operations on blog posts

angular-highcharts-dashboard

📋 App using Angular Highcharts to display data using different chart types

angular-full-stack

📋 Adds a backend to an Angular app within the same folder using node.js, express and typescript. Tutorial from 'Demos with Angular'

angular-bootstrap-api

📋 Simple responsive app to fetch API data and display it using RxJS observables and infinite-scrolling

angular-rxjs-api

📋 Angular app to fetch Wikipedia API data and display it on cards using asynchronous reactive programming observables

ionic-angular-news

📋 App to show news from an API using Angular and Ionic

angular-user-posts

📋 Angular app to get user details and posts from an external API.

angular-graphql-api

📋 Frontend: Angular used with GraphQL and Apollo Client to view the backend Engineering Parts data set Backend: Node.js + GraphQL used with Apollo Server and GraphQL schema to execute queries on a data set

pean-stack-api-display

📋 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-tailwind-ratp

📋 Angular app to show JSON data from the RATP (French transport system) API

ionic-angular-firebase

📋 Ionic app to perform Create Read Update & Delete (CRUD) operations on a Google Cloud Firestore database.

rxjs-learn

📋 Practise using Reactive X with javascript (RxJS) without using a framework such as angular. Webpack is used to bundle this javascript application, requiring a webpack.config.js file with boilerplate code.

angular-app-crypto

📋 Angular app to get crypto currency price data from a CryptoCompare API.

nodejs-tutorial-shoppingcart

📋 Udemy Node.js tutorial shopping cart

mean-stack-app

📋 App using an Angular frontend to Create, Read, Update & Delete (CRUD) data from a Node.js backend server database.

angular-tomtom-api

📋 Angular app to display map data from the Tomtom API

nx-angular-router

📋 Nx monorepo of Angular Tour of Heroes Router tutorial

mean-task-manager

📋 MEAN - MongoDB, Express, Angular & Node.js full-stack tutorial app to manage tasks.

ionic-angular-notepad

📋 Ionic 4 app to Create, Read, Update and Delete notes. Notes can be stored and retrieved. Don't update

angular-tutorial-recipe-shopping

📋 Angular course from Udemy - project to create an app with a recipe book and shopping list

angular-chatgpt-app

Angular app to Create-Read-Update-Delete (CRUD) items from a MockAPI endpoint, created mostly using ChatGPT_4

angular-animated-list

📋 App using interpolation, property-binding, event-binding and Formbuilding to add text items to a list.

angular-httpclient-module

📋 Angular App to get user data from an external JSONPlaceholder API.

javascript-cellular-automata

📋 Javascript used to produce an automata; a regular grid of cells, each one in a finite number of states. Code from Youtube Cellular Automata Pair Programming FunFunFunction #49 (see Inspiration below).

ionic-angular-tutorial

📋 App to show a map view of a location using Leaflet & the Ionic framework.

angular-api-booklist

📋 App to retrieve and display book details from the Google books API

ionic-angular-links

📋 App to use Cordova DeepLink to add a Wordpress site address in an app

stencil-component-table

📋 Stencil component to display API data in a table

example-mongodb-connection

📋 Connect to a dabase in mlab and add data then close db

nodejsPractise

📋 basic node.js programs

svelte-rollup-crypto

📋 Svelte framework used with rollup to display latest Crypto coin prices

javascript-local-storage

📋 Exercise to understand how local storage works in storing item settings, From Wes Bos Javascript30 Youtube series, tutorial 15.

next-tailwind-card

📋 A PWA Next/Tailwind template app with simple Create, Read, Update & Delete card components, deployed to Netlify.

angular-pwa-eslint

📋 Progressive Web App to show crypto stock prices using the polygon.io financial market data API and ng chart modules

angular-pwa-game

📋 Angular Progressive Web App, Tutorial code from Fireship.io

freeCodeCamp-Front-End-Certification

📋 Contains my code created to meet challenges for the JavaScript Front End Certification at Free Code Camp.

angular-api-countries

📋 Angular app that displays details about countries using API data.