BIG TRADING - HEAVY MACHINERY TRADING REIMAGINED

A modern, responsive web application for BIG TRADING, revolutionizing the heavy machinery trading industry with innovative solutions for exporting high-quality Japanese vehicles, construction machinery, and spare parts with worldwide shipping services.

BIG TRADING - HEAVY MACHINERY TRADING REIMAGINED

A modern, responsive web application for BIG TRADING, showcasing heavy machinery and vehicle exports from Japan with multilingual support, SEO optimisations and smooth animations.

🌟 Revolutionary Features

• Multilingual Support: Full English and Japanese language support throughout the application
• Responsive Design: Mobile-first approach ensuring optimal experience across all devices
• Interactive UI: Smooth animations and transitions powered by Framer Motion
• Advanced Machinery Showcase: Dynamic galleries with 3D visualization showcasing the inventory with comprehensive filtering options
• Innovative Business Solutions: Clear presentation of how BIG TRADING is reimagining the industry
• Real-time Updates: Social media integration and live inventory status
• Global Reach Optimization: Advanced SEO and structured data for worldwide visibility
• Next-gen Performance: Cutting-edge optimization techniques for instantaneous loading times

🚜 Reimagining Heavy Machinery Trading

BIG TRADING is transforming the industry by:

• Revolutionizing the buying and selling experience for used heavy machinery and vehicles
• Offering comprehensive solutions for attachments and parts with advanced inventory systems
• Providing cutting-edge maintenance services with predictive technology
• Streamlining transportation and export to overseas markets with real-time tracking
• Pioneering sustainable solutions with solar power generation integration

The company handles all processes from procurement to delivery in-house through an innovative end-to-end platform, ensuring a seamless and transparent experience that reimagines how customers interact with heavy machinery trading.

🛠️ Technology Stack

• Frontend: React 18 with TypeScript
• Build Tool: Vite
• Styling: TailwindCSS
• Animations: Framer Motion, Lottie animations
• Routing: React Router
• SEO: React Helmet Async
• Code Quality: ESLint, TypeScript-ESLint

🚀 Getting Started

Prerequisites

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (recommended) or yarn

Installation and development

# Clone the repository
git clone https://github.com/nirzaf/bijtrading.git ; cd bijtrading

# Install dependencies
npm install

# Start development server
npm run dev

Available scripts

• npm run dev — start Vite dev server
• npm run build — build production assets
• npm run preview — locally preview the production build
• npm run lint — run ESLint across the project

Build and preview

npm run build
npm run preview

Installation

# Clone the repository
git clone https://github.com/nirzaf/bijtrading.git
cd bijtrading

# Install dependencies
npm install

# Start development server
npm run dev

Build for Production

npm run build

Preview Production Build

npm run preview

🌐 Project Structure

/
├── public/            # Static assets
├── src/
│   ├── assets/        # Dynamic assets (images, animations)
│   ├── components/    # Reusable UI components
│   ├── contexts/      # React contexts (language, theme)
│   ├── data/          # Static data files
│   ├── pages/         # Page components
│   ├── styles/        # Global styles
│   ├── types/         # TypeScript type definitions
│   └── utils/         # Utility functions
├── package.json       # Dependencies and scripts
└── vite.config.ts     # Vite configuration

🌍 Internationalization

The application supports both English and Japanese languages. All user-facing strings are managed through the LanguageContext to ensure consistent translations across the application.

🎨 Design System

The application uses a consistent color scheme that reflects our innovative approach to heavy machinery trading:

• Byzantine Blue (#3E5AC1): A rich, medium-deep blue with a slightly muted tone. Used for trust and professionalism.
• Ivory (#F7F7EA): A soft off-white shade with a warm undertone. Elegant and subtle backgrounds.
• White (#FEFEFE): Pure, bright white. Clean and neutral elements.
• Pumpkin (#F76C09): A vivid orange with strong energy. Eye-catching and bold accents.
• Violet Blue (#1844C6): A deep, electric blue with a hint of purple. Strong and confident elements.
• Safety Orange (#E77D2E): A strong, warm orange tone, associated with visibility and attention.

📱 Mobile-First Approach

The application is built with a mobile-first mindset, ensuring optimal user experience across all devices:

The application is built with a mobile-first mindset, ensuring optimal user experience across all devices:

• Responsive layouts using Flexbox and CSS Grid
• Fluid typography with rem units
• Optimized assets for various screen sizes
• Touch-friendly interactive elements

---

Notes

• Dependency versions and scripts in this README are synchronized with the project's package.json.
• The package name in package.json is vite-react-typescript-starter; the repository and product name are BIG TRADING.