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)
• 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:

  <img src="/ats_website/raleigh.jpg" alt="Me" className="object-cover w-full h-full" />

• 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.