Git Product home page Git Product logo

fedex-test's Introduction

FedexTest

This is a test application for FedEx frontend case:

Requirements

  1. ✅ SPA form
  2. ✅ First name, last name, e-mail and password
  3. ✅ All these fields are required
  4. ✅ Password validation:
  • ✅ Minimum 8 characters
  • ✅ Should have lower and uppercase letters
  • ✅ Shouldn't contain user's first or last name
  1. ✅ Email validation (using Angular's validator and minor custom checks)
  2. ✅ Send a POST request to https://demo-api.now.sh/users in a JSON such as
{
  firstName: "Thomas",
  lastName: "Shelby",
  email: "[email protected]"
}

Tools to use

  1. ✅ Latest Angular and TypeScript
  2. ✅ UX/UI based on a CSS Framework (using latest Angular Material)
  3. ✅ Don't bother about old borwsers
  4. ✅ Solution is available on GitLab, here

Review criteria

  • 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?

How to run

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:

  1. git clone https://gitlab.com/danieldanielecki/fedex-test.git please remember about the default master branch. The other branches I'm leaving you for investigation
  2. npm install
  3. npm run serve or ng serve or if you're using Docker docker-compose -f "docker-compose.yml" up -d --build
  4. Visit localhost:4200 in your preferred browser (please don't use Internet Explorer)

Server-Side Rendering (SSR) locally using ng

  1. git clone https://gitlab.com/danieldanielecki/fedex-test.git please remember about the default master branch. The other branches I'm leaving you for investigation
  2. npm install
  3. npm run dev:ssr
  4. Visit localhost:4200 in your preferred browser (please don't use Internet Explorer)

Server-Side Rendering (SSR) locally using Node

  1. git clone https://gitlab.com/danieldanielecki/fedex-test.git please remember about the default master branch. The other branches I'm leaving you for investigation
  2. npm install
  3. npm run build:ssr
  4. npm run serve:ssr
  5. 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.

About

The application generally contains what was required, on top of this there are several additions:

  1. 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 the develop branch the feature branches should be removed.
  2. Automated deployment to Firebase, which consits of these (automated) steps:
  • Build
  • Test
    • Known vulnerabilities using audit-ci (Vulnerabilities) - that's the reason why not yarn, in most cases you can fix these simply npm 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) - using Jest, code coverage around 90%
    • End-to-End Testing (E2E in pielines) - using Cypress, several sample test cases
  • 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.

  1. Docker
  2. Monorepository Nx
  3. Application architecture to distinguish between CoreModule, SharedModule and other (FeatureModule's)
  4. Responsive Web Design using Angular Grid Layout (CSS Flexbox + CSS Grid Layout)
  5. ARIA tested ChromeVox
  6. SweetAlert's for user information
  7. JSDoc for documentation of the core logic
  8. Accessibility plugin Agastya
  9. Progressive Web Application
  10. (New) Angular Universal/SSR using Cloud Functions for Firebase on deployment, or locally as described in "How to run"
  11. (New) Content Security Policy (CSP) with Security Headers
  12. (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
  13. (New) robots.txt and sitemap.xml included

Lighthouse results

  • Performance 81/100
  • Accessibility 100/100
  • Best Practices 93/100
  • SEO 83/100
  • Progressive Web App ✅

Vulnerabilities remark

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

Feedback

  1. 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
  2. Validation could've been done in less naive way without if/else, but in some kind of regular expressions + concat combination

fedex-test's People

Contributors

danieldanielecki avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.