A modern, responsive banking application built with JavaScript and deployed on Vercel.

Visit the live application: justbank.vercel.app

JustBank's modern banking interface featuring transaction management, statistics, and account operations

JustBank is a modern banking interface that provides users with a clean, intuitive way to manage their financial transactions. The application features a responsive design and includes functionality for viewing recent transactions, account statistics, and performing banking operations like top-ups and withdrawals.

• 📱 Responsive Design - Works seamlessly across desktop and mobile devices
• 💳 Transaction Management - View and manage recent transactions with detailed history
• 📊 Financial Statistics - Visual charts and summaries of income and expenses
• 💰 Account Operations - Easy top-up and withdrawal functionality
• 🎨 Modern UI Components - Built with reusable Button, Field, and Heading components
• 🌙 Dark Theme - Sleek dark interface for better user experience
• ⚡ Fast Performance - Optimized build with Webpack
• 🔧 Developer Experience - Automated component generation with Plop.js

JavaScript	SCSS	HTML5	Webpack
ESLint	Prettier	Vercel

Make sure you have Node.js installed on your machine.

1. Clone the repository

   git clone https://github.com/mikemaz-dev/justbank.git
   cd justbank

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm start
   # or
   yarn start

4. Open your browser Navigate to http://localhost:3000 to view the application.

justbank/
├── plop-templates/          # Component generation templates
├── public/
│   └── icons/              # Application icons and assets
├── src/                    # Source code
├── .eslintrc.json          # ESLint configuration
├── .gitignore              # Git ignore rules
├── .prettierrc.json        # Prettier configuration
├── jsconfig.json           # JavaScript configuration
├── package.json            # Project dependencies
├── plopfile.js             # Plop.js configuration
├── webpack.config.mjs      # Webpack configuration
└── yarn.lock               # Yarn lock file

This project uses Plop.js for automated component generation. To create a new component:

npm run plop
# or
yarn plop

Follow the prompts to generate components with consistent structure and styling.

The project includes ESLint and Prettier for code quality and formatting:

# Run linting
npm run lint

# Format code
npm run format

npm run build
# or
yarn build

The application is automatically deployed to Vercel. Any push to the main branch will trigger a new deployment.

To deploy manually:

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel
3. Follow the prompts

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• ✅ Created reusable UI components (Button, Field, Heading)
• ✅ Implemented recent transactions list functionality
• ✅ Added financial statistics with visual charts
• ✅ Integrated account balance and card information display
• ✅ Built top-up and withdrawal functionality
• ✅ Fixed icon pathname issues
• ✅ Added app&render service integration
• ✅ Configured API services
• ✅ Set up automated folder and file generation with Plop

⭐ If you found this project helpful, please consider giving it a star!