This is the frontend for the ABI (Amanot Business Invest) platform — "Stay Ahead By Investment" — an online business website built using React.
To start developing the frontend, follow the React installation steps for your operating system:
-
React Installation on Windows: Watch the tutorial
-
React Installation on Mac: Watch the tutorial
We will be using Visual Studio Code as our code editor. Follow the instructions below to install it on your operating system:
-
Visual Studio Code on Windows: Watch the tutorial
-
Visual Studio Code on Mac: Watch the tutorial
- React (Front-end framework)
- Vite (Build tool)
- Tailwind CSS (CSS framework)
- Visual Studio Code (Development environment)
To set up the project, follow the steps below:
-
Initialize the project with Vite:
npm create vite@latest ./
Choose the following options:
- React
- JavaScript
-
Install the necessary dependencies:
npm install
-
Start the development server:
npm run dev
-
Install Tailwind CSS along with PostCSS and Autoprefixer:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
-
Update the
tailwind.config.jsfile:content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ],
-
Add Tailwind's base, components, and utilities styles in the
index.cssfile:@tailwind base; @tailwind components; @tailwind utilities;
-
Run the development server again:
npm run dev
- npm install react-router-dom
- npm install react-redux
- npm install axios
-
Extension
ES7+React/Redux/React-Native snippets -
Handling
unknownatruleWarnings:
If you encounterunknownatrulewarnings, you can configure your editor(settings) to ignore them. -
Tailwind CSS Intellisense Extension:
Install the Tailwind CSS Intellisense extension in Visual Studio Code.
This repository contains the frontend code for the ABI online business platform. Follow the provided guides to set up your local environment.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh