Skip to main content

Bank App Home Page

Throughout this course we will try to create full stack bank app web application that fully functioning


Creating Home Page

The final result of this lab should look like this 

image.png

The home page should consist of 

  1. Deposit/transfer/ withdraw card : originally it's 3 components but it will change whenever we click the logo on option card. The card show the type of transaction that we choose between deposit, transfer or withdraw
  2. Option Card:  Card that consist of 3 logo that act as a button to click which have a function of choosing type of transaction that will trigger the card above it 
  3. Balance Card: Card to show the account balance
  4. Transaction Card: Card to show the list of transaction history

 

Setup the Project

1. Follow the previous lesson about how to create or start a react project or you can click here to navigate 

2. On the src folder inside the assets folder create images folder . After that, download the images from this link and insert to the images folder

https://drive.google.com/drive/folders/1iTWmtOYd86Y1d9RxAEM2-qgSQyT-toQi?usp=drive_link 

image.png

 

3. Inside the src folder create pages folder for storing  pages in our frontend also components folder to store our components of each pages

image.png

 

4. Inside the pages folder create Homepage.jsx file

image.png

 

5. Inside the components folder create another folder called HomePage and inside the HomePage folder create files exactly like shown in the picture

image.png

 

6. Replace the code inside the App.jsx with the code below

import Homepage from './pages/Homepage';

function App() {
  return (
    <div className="App"  style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
      <Homepage />
    </div>
  );
}
export default App;

and also replace the index.css with provided code below

body {
  margin: 0;
  font-family: Roboto;
  height: 100%
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.App{
  height: 100vh;
}

 

7.  The last step isThen we're gonna install some dependencies that will help us in the front end. In you terminal of current project type the command below 

npm i @emotion/react @emotion/styled @mui/material @mui/icons-material

@emotion/react: Provides utilities for using Emotion CSS-in-JS with React.
@emotion/styled: Allows creating styled components using Emotion CSS-in-JS.
@mui/material: Core Material-UI library for ready-to-use React components styled according to Material Design.
@mui/icons-material: Collection of Material-UI icons for use in React applications.

 

8. Try to insert the code below inside the Homepage.jsx and try to run the project

import React, { useState } from "react";
import { Box } from "@mui/material";

function Homepage() {
  return (
    <>
      <Box
        sx={{
          width: { md: 600, xs: "90%" },
          display: "flex",
          justifyContent: "start",
          alignItems: "start",
          flexDirection: "column",
          gap: 4,
          p: { md: 0, xs: 2 },
          margin: 7,
        }}
      >
        <h1>Homepage</h1>
      </Box>

      <Box
        sx={{
          width: { md: 600, xs: "90%" },
          display: "flex",
          justifyContent: "start",
          alignItems: "start",
          flexDirection: "column",
          gap: 4,
          p: { md: 0, xs: 2 },
        }}
      >
        "Hello, World!"
      </Box>
    </>
  );
}

export default Homepage;

Currently it show only text, but in the future step we will create each components 

 

 

Back to top