GithubHelp home page GithubHelp logo

sumeet-sethi / peachtree-bank Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 2.58 MB

This is an interview assignment app built on Angular 9.1.7 and upgraded to 10.0. It uses Angular Material for ready to use elements and FlexLayout for layout and responsiveness

Home Page: https://peachtree-bank.netlify.app/

JavaScript 3.67% TypeScript 84.70% HTML 9.67% Sass 0.93% SCSS 1.03%

peachtree-bank's Introduction

PeachtreeBank

This project scaffolding was generated with Angular CLI and with this change it has been upgraded to version 10.0 (from version 9.1.7) This project also use Angular Material library for all ready to use visual components.

Release Notes [0.1.1]

Whats New:

  • Under the hood changes like upgraded angular core libraries to the latest angular version 10.0

Business Requirements Delivered:

This initial version of this application has completed the following aspects of the business requirements:

  • Home Component which brings the two Transfer and Transcation components together
  • NotFound Component which shows up on any invalid route
  • Transfer Component
    • Form with 3 fields (From Account, To Account and Amount) and 3 buttons (Clear, Submit, Tranfer)
    • Checks to not overdraft amount more that $ -500
    • Clear buttons resets state
    • Submit button toggles preview state
    • Transfer button sends transaction record to transaction component
  • Transaction Component
    • Reads the mock JSON to render data on the table
    • Filter will search per keystroke for matched records to display on the table
    • Sorting is using Angular Material's inbuilt table header sort per column instead of dedicated buttons which are on the design document.

This project has some requirements which I couldn't make it in time as I only had a weekend to work on this. Here are the things which I couldn't get to:

  • i18n and a11y (a11y was added only in some places using aria-label for accessibility) couldn't be added with time left
  • Couldn't get to adding Kanit specific font
  • Added FlexLayout to handle basic layout management but couldn't get to adding responsive behavior per element with the time left

This project may feel raw in some places but given the right time, this can be made into an application keeping with latest standards.

Known Bugs

  • In Transaction Component, the close icon on Search by typing will clear the value but doesn't fire the event to reset the table below
  • Sorting works with initial data coming from mock but once a new transaction is added, the sort stops responding. This seems to be tied to this [issue].(https://stackoverflow.com/a/57014516/5420817) but even on making it false it now fails the initial and update event. Also the button sorting seems a bit buggy when new entries are added and needs to be looked into

About Me

Other than what is already mentioned on my resume, I enjoy working with Front-End technologies more than other things. I have over 12 years of experience and most of which is on Front-End. I keep my self upto date on the latest tech in in industry (and that too not just limited to Front-End). I started as an intern in this idustry and have gotten to a point where I went to architecting sets of UI application as a solution for one of my client, that I worked for and then stablizing as a Tech Lead on the current project which I have been on for around 3 years now. As a career path next move, I have choosen UI Architecture which I did for a little while ago and want to continue on that trajectory.

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.

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 the following command to execute the end-to-end tests via Protractor:

npm run e2e -- --baseUrl=https://peachtree-bank.netlify.app/

or

npm run e2e -- --baseUrl=http://localhost:4200/

peachtree-bank's People

Contributors

sumeet-sethi avatar

Watchers

 avatar  avatar

peachtree-bank's Issues

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.