Improved functionality: River Bank
River bank is a website that is created to simulate real-life bank account registration and management (to a certain extent). We’ll start talking about the backend and then we’ll move to cover some frontend details.
Bankend:
The banend built using Ruby on Rails API. It primarily consists of three models; namely: User, Account, and Transaction, along with their respective controllers and necessary serializers.
The User model was implemented using Device and divice-jwt gems to handle user registration and login/logout scenarios as well as user authentication which was achieved by using tokens and local storage.
Moving on to the Account model, this model handles the details of creating a new bank account that the user is willing to register, account details include account type such as checking or credit, card number, and expiration date. these are submitted via a form and fetched by a POST request which then gets routed to the create action in the account controller. It then gets some authentication and sanitizing process mainly to make sure the currently logged-in user is the authorized user, if everything checks out to be fine the account gets created and associated with the appropriate user.
The Transaction model is a bit tricky since it requires real-world activities like purchasing stuff or paying bills using one of the registered account cards. To go around this for the time being we will have our account fake its own transactions upon creation using the after-create filter. This filter will call a method that will generate a random number of transactions with random attributes and assign them to their respective account that was just been created.
Frontend:
The frontend was built using react and the skeleton was created using the handy create-react-app tool, the app also makes use of the jwt technique to handle user authentications. Overall the app contains three forms, one for signing up, the other is for signing in, and the last one is for registering a new bank account all follow the dispatch-action-reducer pattern using redux. The app also follows the presentational and container components pattern whenever it’s applicable.
Protected content is mainly controlled by using jwt tokens through a function called withAuth() to make sure there is a user logged in and it’s the authorized user to access the requested content. This function sends the token stored in the local storage and fecthed to the backend to be compared with the backend version, if everything turned out to be fine, the current user is returned and protected content is made available to the user.
