Currency Exchange Project designed and developed by Osman Fikret Ceylan.
The final app hosted on https://currencyexchange.work.
Simply go to this URL: https://stackblitz.com/github/ofcyln/currency-exchange
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/currency-exchange.git
npm install
npm start
or if you use yarn as package manager
git clone https://github.com/ofcyln/currency-exchange.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 CLI v10.0.5
-
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
,stylelint
andtslint
plugins run in this script. -
Currency Exchange Project has 4 major components. Namely;
Auth Component
- includesLogin Page
withAuthentication Service
andAuthorization Guard Service
,Core Component
-includesAlert Component
,Header Component
,Not Found Component
-wildcard routing redirection component, 404 page-,Converter Component
andHistory Component
. -
Used
SCSS
as a CSS preprocessor to write efficient CSS codes. -
Used new generation
JavaScript (ES6, ES7)
withTypeScript
. -
Used
Angular Services
for sharing app state and data-binding within injected components. -
Used latest
Bootstrap v4.3.1
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.
-
Used
Interceptors
to simulate backend-less login functionality while using HTTP request. IntegratedJWT interceptor
to sendtoken
for necessary request when needed. -
Used readonly private properties to prevent magic numbers and strings in the project where it needed into the methods.
-
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. Created special CurrencyExchange logo SVG font-icon for the project from search font-icon. -
The app has multiple icons for various Android, IOS devices.
-
App designed from scratch with the inspiration of the Google Material Design principles by the power of the
Angular Material
. -
Modular components created for reusing components elsewhere to improve modularity in the app.
-
PWA integration has been made for the installation of the app to the devices which supports installation.
-
The form immediately responses to user interactions with its
validation
checkers. -
tabindex
values added for form elements in a numeric order to complete the form just with the use of keyboard for accessibility. -
Enter
key press in the selection of currencies helps users to select the currency that they want to exchange easily. -
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 theNot Found
page. -
If a user doesn't authenticate, page routing redirects users to the
Login
page to be authenticated. After authorization, with the help of the routerSnapshot queryParams, the user can continue to browsing. -
Form data is sent asynchronously by
HTTP POST request
withRxJS
observables. TheHTTP POST request
posts the form data to URL./login
. 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 in a live environment. -
Login method requests handled with
MockBackendServerInterceptor
. This interceptor checks the user credentials - username and password then if there is a match it returnsHTTP 200 OK response
with atoken
. This will get the user in the app with an authentication. ThisMockBackendServerInterceptor
is completely hypothetical and ready for the future real-time user authentication data implementation. -
An authentication service -
AuthGuardService
created to protect routes against unauthorized users. If atoken
exist in thelocalStorage
, the user can use the app and reach to the protected routes. -
Used
localStorage
to store user's currency exchanges with a key:value pair namelyexchangeRates
and an array of exchanged currency information objects. Also, localStorage used to storetoken
. -
Whenever a user enters to the
Converter
page, an asynchronousHTTP GET request
runs forhttps://api.exchangerate.host/latest?base=USD
API. -
User can convert between selected currencies with the defined amount.
-
Each conversion immediately goes to the
Exchange History
datatable with the exact time of the execution. -
In
Exchange History
field there isDuration
select box which user can select the defined time intervals. Under the Duration select box, there are two datatable as well. First one includesDate
datatable -execution date and time- and the second one includesExchange Rate
datatable -statistics of the conversions in selected time intervals-. -
On
History
page user can see the previous currency exchanges on datatable with the amount of the executions. User canDelete
the selected item of the datatable or can click toView
button to create previous exchange scenario on theConverter
page. -
Added
Logout
button to the app which redirects the user to theLogin
page. When user routes to theLogin
page, user token is getting removed from localStorage and the user is being unauthorized. -
Mobile device UI behaviours designed to improve User Experience in a performing way and coded with the usage of the @media queries.
-
PWA
support helps users to install the app on their mobile phone and make them use it as a native app. With the integration ofPWA
, it is possible to use the app even if there is no connection to the internet. The offline mode makes the app run under unexpected circumstances.PWA
integration caches the files with the developer choices. Mostly static files for example image files, icons, font libraries etc. -
Angular production build configuration
is used for optimizing bundle, using tree-shaking, aot compilation, compression. -
The total bundle size of the app is
~500KB
including all CSS, JS, FONT, ICONS for PWA and HTML files.