https://github.com/akunna1/banking-app-structure

Structure for The Kenya Bankers Vite-React Frontend App (In progress)
https://github.com/akunna1/banking-app-structure

bankingapplication frontend reactjs tailwind-css vitejs webdev

Last synced: 3 months ago
JSON representation

Structure for The Kenya Bankers Vite-React Frontend App (In progress)

• Host: GitHub
• URL: https://github.com/akunna1/banking-app-structure
• Owner: akunna1
• Created: 2024-07-29T18:01:35.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-07-16T21:52:32.000Z (about 1 year ago)
• Last Synced: 2025-10-10T21:16:31.685Z (10 months ago)
• Topics: bankingapplication, frontend, reactjs, tailwind-css, vitejs, webdev
• Homepage:
• Size: 10.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Banking-app-structure 🏦

Structure for The Kenya Bankers Vite-React Frontend App

---

## How to start Vite-React Project

* `npm create vite app --template react`

* `cd app`

* `npm install`

* `npm run dev`

* In `src` folder, create `pages`, `styles`, and `components` folders

* Add images to the `public` folder

* Kill terminal and restart if needed

* Install Tailwind CSS ([guide](https://tailwindcss.com/docs/guides/vite))

* Remove unwanted code, files, and folders

* `npm install react-icons`

* `npm install react-router-dom`

---

## How to deploy it on Hostinger

* Run `npm run build`

* A `dist` folder is created

* Copy the contents of `dist` into `public_html` on Hostinger

* Add `.htaccess` file in `public_html` for routing and configuration

---

## Structure Definitions

* **Public folder:**

  Stores static assets like images that don’t need processing by Vite. Files here are directly accessible and can be used in `.jsx` files without importing as components.

  Example:

  ```jsx

  

  ```

* **Src folder:**

  Contains all the source code — JavaScript/JSX, CSS, and other files that Vite processes and bundles.

* **index.html:**

  The project’s entry point where you can add favicon and set the website title. Connects to `main.jsx`.

* **tailwind.config.js:**

  Configure Tailwind CSS settings, including custom screen sizes under the `theme` property.

* **src/components:**

  Contains `.jsx` files for reusable UI components such as buttons, text blocks, etc. These components are imported into pages.

* **src/pages:**

  Contains `.jsx` files representing different pages of the app where components are imported and assembled.

* **src/styles:**

  Holds custom CSS files like `global.css`, imported into `main.jsx`.

* **src/App.jsx:**

  Imports pages and defines routes. Also contains utilities like a “scroll to top” component.

* **src/index.css:**

  Contains Tailwind’s base styles, components, and utilities.

* **src/main.jsx:**

  Imports global styles (`index.css` and `global.css`), `App.jsx`, sets up `BrowserRouter` for routing, and renders the app into the root element defined in `index.html`.