This is a test application for FedEx frontend case:
- ✅ SPA form
- ✅ First name, last name, e-mail and password
- ✅ All these fields are required
- ✅ Password validation:
- ✅ Minimum 8 characters
- ✅ Should have lower and uppercase letters
- ✅ Shouldn't contain user's first or last name
- ✅ Email validation (using Angular's validator and minor custom checks)
- ✅ Send a POST request to https://demo-api.now.sh/users in a JSON such as
{
firstName: "Thomas",
lastName: "Shelby",
email: "[email protected]"
}
- ✅ Latest Angular and TypeScript
- ✅ UX/UI based on a CSS Framework (using latest Angular Material)
- ✅ Don't bother about old borwsers
- ✅ Solution is available on GitLab, here
- Correctness – Is it production-ready application? Does the application do what was asked? If not, does the README explain why it is missing and/or different?
- Code quality – Are there any code smells? Is the coding style consistent with the Angular style guide?
- Testing - Is your logic covered with unit or integration tests?
- UX – Is the web interface understandable and pleasing to use?
- Documentation – Is there a README covering how to build and run your project?
- Technical choices – Are choices of libraries, architecture etc. appropriate for the task?
Assuming that you have installed Node.js
and npm
on your machine please do the following commands in the terminal to run this application locally:
git clone https://gitlab.com/danieldanielecki/fedex-test.git
please remember about the defaultmaster
branch. The other branches I'm leaving you for investigationnpm install
npm run serve
orng serve
or if you're using Dockerdocker-compose -f "docker-compose.yml" up -d --build
- Visit
localhost:4200
in your preferred browser (please don't use Internet Explorer)
git clone https://gitlab.com/danieldanielecki/fedex-test.git
please remember about the defaultmaster
branch. The other branches I'm leaving you for investigationnpm install
npm run dev:ssr
- Visit
localhost:4200
in your preferred browser (please don't use Internet Explorer)
git clone https://gitlab.com/danieldanielecki/fedex-test.git
please remember about the defaultmaster
branch. The other branches I'm leaving you for investigationnpm install
npm run build:ssr
npm run serve:ssr
- Visit
localhost:4000
in your preferred browser (please don't use Internet Explorer)
Disclaimer: the deployed application is takes an advantage of Cloud Functions for Firebase
to render SSR.
The application generally contains what was required, on top of this there are several additions:
- GitHub Flow-like, as wrote the
feature
branches I'm leaving only for the reason to show it, in real projects after every merge to thedevelop
branch thefeature
branches should be removed. - Automated deployment to Firebase, which consits of these (automated) steps:
- Build
- Test
- Known vulnerabilities using
audit-ci
(Vulnerabilities
) - that's the reason why notyarn
, in most cases you can fix these simplynpm audit fix
. Unfortunately, for this case during the day of deployment one of unfeasible to fix packages got something and therefore there are something like 15 medium vulnerabilities within this app deployed. - Style formatting (
Quality
in pipelines) - to keep track of consitent code - Static Code Application Security Testing (
SAST
in pipelines) - basically linting - Unit Testing (
Unit
in pipelines) - usingJest
, code coverage around 90% - End-to-End Testing (
E2E
in pielines) - usingCypress
, several sample test cases
- Known vulnerabilities using
- Staging - deployment to staging environment https://fedex-staging.firebaseapp.com
- Mozilla Observatory to check security on the staging environment. This is just a showcase how to include this in the pipeline, to do so Server Side Rendering (SSR) with (for example) Firebase Cloud Functions is required, within this deadline it wasn't possible.
- Production - deployment to production environment https://fedex-production.firebaseapp.com
- Mozilla Observatory to check security on the staging environment. This is just a showcase how to include this in the pipeline, to do so Server Side Rendering (SSR) with (for example) Firebase Cloud Functions is required, within this deadline it wasn't possible.
Update 29.03.2021: unfortunately, to have working SSR
using Cloud Functions for Firebase
some changes have been introduced after upgrading the project. Now, the SSR has been added, but ng deploy
(new way of deploying to Firebase
) doesn't work with CI systems. Read more in Issue#2523 and PR#2327.
Docker
- Monorepository
Nx
- Application architecture to distinguish between
CoreModule
,SharedModule
and other (FeatureModule
's) - Responsive Web Design using
Angular Grid Layout
(CSS Flexbox
+CSS Grid Layout
) ARIA
testedChromeVox
SweetAlert
's for user informationJSDoc
for documentation of the core logic- Accessibility plugin
Agastya
- Progressive Web Application
- (New) Angular Universal/SSR using
Cloud Functions for Firebase
on deployment, or locally as described in "How to run" - (New) Content Security Policy (CSP) with Security Headers
- (New) TypeScript's Strict Security Compiler Rules, more than just
ng new myProject --strict
, source: my thesis, section 4.2.2. Compilers Rules, pages 34 - 36 - (New)
robots.txt
andsitemap.xml
included
- Performance 81/100
- Accessibility 100/100
- Best Practices 93/100
- SEO 83/100
- Progressive Web App ✅
Vulnerabilities could've been removed if SSR wouldn't be enabled. Cloud Functions for Firebase
are known of causing quite many turbulences to have it working. Hence, a specific versions of firebase-admin
and firebase-tools
packages were required. From security point of view, it has introduced some vulnerabilities. That's part of devDependencies
though, so theoretically in the deployed production-ready bundle it
- One test is without
expect
https://gitlab.com/danieldanielecki/fedex-test/-/blob/master/libs/home/src/lib/home/validators/validator.names-in-password.spec.ts#L25-32 - Validation could've been done in less naive way without if/else, but in some kind of regular expressions +
concat
combination