Ayo Credit Development

Comprehensive-ayo-credit-credits-web-platform

Ayo Credit is a financial services platform designed to provide users with various types of loans. As a web frontend developer, I was responsible for designing and developing the user interface, implementing advanced features such as a loan calculator, and ensuring a seamless user experience across all devices.

Technologies Used

• Frontend: Bootstrap, jQuery, SCSS, Swiper
• Build Tools: Gulp, Webpack
• Additional Libraries: Select2, Bootstrap Slider

Key Features Implemented

Loan Calculator Utilized mathematical skills to develop a comprehensive loan calculator that dynamically updates based on user input.

Advanced Animations and UI Components Implemented smooth animations and interactive elements using Bootstrap and jQuery plugins.

Responsive Design Ensured the application was fully responsive across different devices and screen sizes.

Frontend Development Bootstrap Integration: Used Bootstrap for rapid and responsive design. For example, creating a loan calculator form with Bootstrap classes:

<div class="container mt-5">
  <form id="loanCalculator">
    <div class="form-group row">
      <label for="loanAmount" class="col-sm-2 col-form-label">Loan Amount</label>
      <div class="col-sm-10">
        <input type="number" class="form-control" id="loanAmount" placeholder="Enter loan amount">
      </div>
    </div>
    <div class="form-group row">
      <label for="loanTerm" class="col-sm-2 col-form-label">Loan Term (Months)</label>
      <div class="col-sm-10">
        <input type="number" class="form-control" id="loanTerm" placeholder="Enter loan term">
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Calculate</button>
  </form>
</div>

Modular SCSS: Organized styles using SCSS with methodologies like BEM, OOCSS, and SMACSS for maintainable and scalable CSS.

// _variables.scss
$primary-color: #ff4500;
$secondary-color: #f0f0f0;

// _loan-calculator.scss
.loan-calculator {
  &__container {
    background-color: $secondary-color;
    padding: 20px;
    border-radius: 5px;
  }
  &__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  &__button {
    background-color: $primary-color;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      background-color: darken($primary-color, 10%);
    }
  }
}

Loan Calculator Logic: Developed the loan calculator's core logic using JavaScript to handle user inputs and calculate the monthly payments.

document.getElementById('loanCalculator').addEventListener('submit', function(event) {
  event.preventDefault();
  const loanAmount = document.getElementById('loanAmount').value;
  const loanTerm = document.getElementById('loanTerm').value;
  const interestRate = 0.05; // Example interest rate
  const monthlyPayment = (loanAmount * (interestRate / 12)) / (1 - Math.pow((1 + interestRate / 12), -loanTerm));
  alert(`Your monthly payment is ${monthlyPayment.toFixed(2)} AMD`);
});
Gulp and Webpack Configuration
Task Automation: Configured Gulp to automate tasks such as compiling SCSS to CSS, minifying JavaScript, and optimizing images.

javascript

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');

function compileSass() {
  return src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(cleanCSS())
    .pipe(dest('dist/css'));
}

function minifyJs() {
  return src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(dest('dist/js'));
}

function optimizeImages() {
  return src('src/images/**/*')
    .pipe(imagemin())
    .pipe(dest('dist/images'));
}

exports.default = series(compileSass, minifyJs, optimizeImages);

Module Bundling: Configured Webpack for efficient module bundling and asset management.

const path = require('path');

module.exports = {
  entry: './src/js/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist/js'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

In this project, I utilized my skills in frontend development, UI/UX design, and JavaScript programming to create a user-friendly and functional financial services platform. By deeply analyzing the provided files and code examples, I ensured that the project was built with best practices and modern web development techniques. The use of Bootstrap, jQuery, SCSS, Gulp, and Webpack allowed for a smooth and efficient development process, resulting in a high-quality web application.