Build a Banking Dashboard With Reactjs, Tailwindcss & Tabnine
Hi There it has been a while !!! Here is the link to the project's github repository https://github.com/iocods/iobank_frontend_private If you like my content you can support the channel by buying me a cup of coffee https://buymeacoffee.com/isiah100 It will go a long way in keeping me motivated to bring more awesome contents. In This video tutorial we'll be seeing how to develop a complete banking dashboard with Reactjs, Tabnine (a generative AI agent tool) and Tailwind css. This video is the second part of our fullstack banking application with the first part having to do with the development of the server side with the use of the springboot framework, spring data jpa, tabnine and postgresql while using the IntelliJ IDE . The link to the video is seen below https://www.youtube.com/watch?v=hSzCjqZs_uE In this second part of the video we'll be learning how to build the client side (our banking dashboard) with the use of Reactjs, tailwindcss for styling and tabnine for code generation sometimes. The application aims to model more real world cross border banking application where a registered user of the application can create accounts for currencies of different nationality. You can employ the use of the timestamp below to skip to any of your preferred part of the video or perharps continue from a well defined point. Introducton And why I was off the channel for long. 00:00:00 -: Explanation of why I was away from the channel. 00:01:35 -: Introduction to the project 00:05:10 -: Bootstrapping our react app with CRA (create-reacte-app) 00:09:40 -: Installing of project's dependencies 00:14:30 -: Configuring Tailwind css 00:15:40 -: Showing the different pages that makes up the application 00:18:54 -: Defining Routes and Pages for our React application user createBrowserRouter 00:32:08 -: Defining our Login page 00:45:20 -: Creating a reusable InputComponent 00:55:10 -: Defining Our Registration page and styling with tailwindcss 01:02:17 -: Creating an api layer 01:07:55 -: Defining A user state management file called userslice. 01:26:20 -: Creating a Spinner component 01:31:10 -: Creating a page slice for managing shared data within the different pages 02:08:55 -: Creating our Header and Navbar component for the dashboard 02:19:10 -: Creating inner path/routes relative to the dashboard path. 02:31:30 -: Creating state management slice for the account entity 02:49:55 -: Implementing the Homepage 02:59:50 -: Implementing the Payment Page 03:04:18 -: Implementing the Account Page 03:47:45 -: Implementing the Convert Currency Page 04:04:14 -: Implementing the Card Page 04:39:30 -: Implementing the Transaction Page 05:00:20 -: Implementing the definition off AccountDetails and Card Details with a TextComponent. 05:24:45 -: Showing the Changes made to the server Application and Conclusion Tools employed for the development of this application includes -- Tabnine -- JpaBuddy -- Postman https://www.postman.com/downloads/ -- Testfully https://docs.testfully.io/docs/download#download-the-desktop-app -- intellij https://www.jetbrains.com/idea/download/ -- Vscode for the development of the client application The Complete source code for the server api can be found in the github repository using the link below --- https://github.com/iocods/iobank --- Source code for the frontend will be released after a subscriber count of 1500. Pls do subscribe to the channel and give the video a thumbs up. In need of a developer or for collaboration on any project you can always reach out via [email protected]
Download
0 formatsNo download links available.