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: 6 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 (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-29T21:24:24.000Z (about 1 year ago)
- Last Synced: 2025-01-31T22:07:22.112Z (8 months ago)
- Topics: bankingapplication, frontend, reactjs, tailwind-css, vitejs, webdev
- Homepage:
- Size: 8.79 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 folder
- add images to public folder
- kill terminal
- install tailwind css (https://tailwindcss.com/docs/guides/vite)
- remove unwanted codes, files, and folders
- npm install react-icons
- npm install react-router-dom
**How to deploy it on hostinger**
- npm run build
- dist folder is created
- copy folder into public_html in hostinger
- add .htaccess file in public_html
**Structure defintions**
Public folder: used for static assets e.g images, etc. that don't need processing by the build tool. Files in this folder are directly accessible and won't be processed by Vite. One can call images in .jsx files without having to import it as a component e.g "
if they are stored there.
Src folder: where the application's source code resides. It includes all the JavaScript/JSX, CSS, and other files that need to be processed and bundled by Vite.
index.html: where one can add the favicon, and webapp/website title, it contains the entry point of the vite project e.g. main.jsx
tailwind.config.js: if using tailwind css, one can define screen size values here using theme as a property
src/components: .jsx files that need to be imported to pages. Components hold the exact content and styles for the webapp/website e.g text, text cells, etc.
src/pages: components are imported here. pages are .jsx files too
src/styles: contains custom css stylesheet e.g global.css, which is imported in main.jsx
src/App.jsx: imports pages, contains path names definitions in routes, and the 'scroll to the top' component
src/index.css: holds tailwind's base, components and utilities
src/main.jsx: imports index.css, global.css (custom stylesheet), App.jsx, BrowserRouter, ReactDom, called in the root defined in index.html i.e main.jsx, is enclosed in BrowserRouter