HooBank UI

📋 Table of Contents

• ✨ Introduction
• ⚙️ Tech Stack
• 📝 Features
• 🚀 Quick Start

✨ Introduction

[EN] This bank landing page showcases a contemporary design developed using React, emphasizing reusable functional components and a well-organized file and folder structure. It integrates Tailwind CSS for streamlined styling, emphasizing mastery of fundamental CSS properties such as flex for flexible layout design. Responsive design is ensured with meticulously implemented media queries, optimizing display across all devices.

[FR] Cette page d'accueil présente un design contemporain développé avec React, mettant l'accent sur l'utilisation de composants fonctionnels réutilisables et une structure de fichiers bien organisée. Elle intègre Tailwind CSS pour un style simplifié, mettant en avant la maîtrise des propriétés CSS fondamentales telles que flex pour des designs de mise en page flexibles. Le design responsive est assuré grâce à des media queries soigneusement implémentées, optimisant l'affichage sur tous les appareils.

⚙️ Tech Stack

• React is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain.

• Tailwind is a utility-first CSS framework that speeds up UI development by providing a set of pre-built utility classes. It allows developers to quickly build custom designs without writing traditional CSS, promoting rapid prototyping and design consistency.

• Vite is a modern frontend build tool known for fast ES Module imports, efficient bundling, and quick development server startup times. It supports frameworks like Vue.js and React, optimizing workflow and performance compared to traditional bundlers.

📝 Features

👉 CSS Variables: Utilize CSS variables to maintain a consistent and easily adjustable styling approach throughout the project

👉 Importing CSS Files: Import CSS files into others, promoting modularity and organization in styling.

👉 Flex and Position Properties: Use of flex and position properties in CSS to create responsive and well-structured layouts.

👉 Rendering HTML through JavaScript: Rendering HTML through JavaScript using reusable functions, enhancing code efficiency.

👉 Smooth Animations: Smooth and subtle animations to enhance the overall user experience, focusing on fluid transitions.

👉 BEM Method: Follow the Block Element Modifier (BEM) methodology for naming classes, promoting a clear and maintainable structure.

👉 Organized File and Folder Structure: Maintain a well-organized file and folder structure for easy navigation and management of project assets.

👉 Responsive Design: The application is completely responsive across all devices, employing responsive design techniques such as media queries and fluid layouts.

🚀 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone {git remote URL}

Installation

Let's install the project dependencies, from your terminal, run:

npm install
# or
yarn install

Running the Project

Installation will take a minute or two, but once that's done, you should be able to run the following command:

npm start
# or
yarn start

Open http://localhost:5173 in your browser to view the project.