Endouble - Job Application Form assignment solution authored by Osman Fikret Ceylan.
The final app hosted on Google Firebase
server with the live environment
.
Live demo: https://endouble-assignment.firebaseapp.com
Simply go to this URL: https://stackblitz.com/github/ofcyln/endouble-assignment
Stackblitz can only show you the visible UI of the project without cloning it to your local environment. Please not that, for security reasons Stackblitz
doesn't show images, fonts or font icons that used on the project.
Run these commands in the terminal to run the app on your local environment
git clone https://github.com/ofcyln/endouble-assignment.git
npm install
npm start
or if you use yarn as package manager
git clone https://github.com/ofcyln/endouble-assignment.git
yarn
yarn start
Run npm start
or yarn start
for a dev server to initialize.
Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
To build the app in Ahead-Of-Time compilation
you need to run yarn build:prod
or npm run build:prod
To run linter and check the code over tslint rules simply run yarn lint
or npm run lint
Run ng generate component component-name
to generate a new component. If you don't have @angular/cli
as a global package on your system, you can run npx ng generate component component-name
. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run yarn build:prod
or npm run build:prod
to build the project.
The build artifacts will be stored in the dist/
directory.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.
-
Used latest Angular version 7
-
Used code scaffolding for effective working and clean development environment. Specialized
build
,deploy
,lint
,pre-commit
scripts added to package.json. -
lint-staged
script cleans and checks theTypeScript
,SCSS
codes before committing any changes to the repository.Prettier
andtslint
plugins run in this script. -
Endouble assignment project has 3 core components. Namely;
Alert Component
- to inform users for success and error messages on the page efficiently,Header Component
andFooter Component
. -
The other components are
Job Component
and its children, which areJob Application Component
andSuccess Component
. Also, the wildcard routing redirection component isNot-found Component
(404 page). -
Used
SCSS
as a CSS preprocessor to write efficient CSS codes. -
Used new generation
JavaScript (ES6)
withTypeScript
. -
Used
Angular Services
for sharing app state and data-binding within injected components. -
Used latest
Bootstrap v4.1.3
version to integrate powerful responsive design powered by CSS FlexBox model. -
Used
semantic
HTML tags and elements with semantic class names. -
Modular components created for reusing components elsewhere to improve modularity in the app.
-
When a user clicks on the form input on mobile, browser is configured to not automatically zoom in page content for improving UX while writing.
-
ng2-date-picker
plugin is used for birth date selection input in the form. Visually improved this plugin's UI to help UX. -
ngx-device-detector
plugin is used for mobile device detection to handle mobile specific problems such as gracefully degrading Dropbox upload feature on mobile. -
ngx-scroll-to
plugin is used to scroll to the top of the page with a smooth animation. -
The form immediately responses to user interactions with its
validation
checkers. -
Dutch zip code
control is integrated withRegExp
to reach to an improved validation. -
Dropbox upload
is integrated into the project with Dropbox Developers "Chooser" interface. Also, the integrated file type and file size controls are used in theDropbox Upload
button actions. -
Native upload
controls is written with browser's native File API to check file type and file size. -
If the user selects a file to upload from the PC with
Native upload
button instead ofDropbox
, theDropbox
upload button is disabled. The same control also applies to theDropbox Upload
button selection. -
Mobile browser security reasons prevent users to use
Dropbox upload
on mobile browsers. Hence, on mobileDropbox upload
button is removed - graceful degradation.Native upload
button grants access to installed cloud apps on user's mobile device. -
aria-label
andaria-describedby
are integrated into the project to help visually impaired users. Tested over Chrome extension namedChromeVox
for accessibility compatibility. -
tabindex
values added for form elements in a numeric order to complete the form just with the use of keyboard for accessibility. -
In case of navigating to a page which doesn't exist in the app, a
wildcard route (404)
is integrated to the project. It redirects users to thejob application
page which is the homepage of the project for demo purposes. -
Instead of using images for icons, font icons are integrated into the project with
Fontello
icon package.Fontello
just includes preferred icons, this helps to balance the file size of the icon package. -
As the mentioned in PSD file, the fonts
Museo Sans
andYanone Kaffesatz
are used asweb fonts
, specified different formats for browser support. -
For instantiating
HTTP GET request
, the project has anassets
folder which also includes an API folder. It represents a static data of the footerFollow Us
section links and icons in aJSON
file. -
Form data is collected and provided on submitting the form. Data is sent asynchronously by
HTTP POST request
withRxJS
observables. TheHTTP POST request
posts the form data to mock file URLassets/api
. I also created an interface for a hypothetical response from the server for this request. A refactor must be done when a backend is ready to make it work on live environment. Although this POST request fails on local environment, I intentionally redirected users to success page for demonstration purposes. -
I didn't have time to run a unit test with the configuration for
TestBed
andJasmine
. -
Angular production build configuration
is used for optimizing bundle, using tree-shaking, aot compilation, compression. -
The total bundle size of the app is
~630KB
including all CSS, JS, IMG, FONT and HTML files.
P.S.: I overcomplicated the app architecture to show my Angular skills.