Dada-Tech / angular-portfolio-web-app

Single Page Web App with multiple micro-services

Dada Legacy Portfolio Web-App

Detailed Writeup - Portfolio Gist

Intro

I built this project to exercise and solidify my full stack knowledge as well as creating a developer portfolio. This is to show the inner workings of my portfolio as I may not be releasing all of the content on GitHub.

Technologies used

• Angular 2+ - Single page application
• Bootstrap - Tailwind-like streamlined styling
• SCSS - For more advanced styling
• Firebase - Cloud Services for security, quickdevelopment, scalability
• Firestore (NoSQL DB) - for Database backed contact form
• Node - Backend Server
• Express - Backend Server API
• Captcha v3 - Security middleware, prevents spam/bots
• Security Middleware (CORS, input validation) - Additional backend security
• CMS - Dynamically update Portfolio projects without touching code
• Wordpress API - Leveraging this API as a CMS
• RESTful Web Services - concept behind the CMS API

The front end of this project is a Single-Page-Application built with Angular 2+. Bootstrap was used to achieve responsive views for mobile, tablet, and any size web browser.
For more advanced customization I used SCSS which allowed me to leverage nested syntax, mixins, and variables.

This project was generated with Angular CLI version 12.

Install

Run npm install --legacy-peer-deps to install dependencies.

Gotchas

1. Also, you will need to be using Node v16.

2. You might have to run npm audit fix --force, but ensure angular-cli (@angular/cli, @angular/compiler-cli) stays at v12

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.