Two Brothers Organic Farms – Frontend Clone

This project is a frontend replica of the Two Brothers Organic Farms website homepage, built as part of an internship task. The goal is to recreate the UI and interactive shopping experience of the original website using modern frontend technologies.

The application includes a responsive layout, product listings, cart interactions, and UI elements similar to the original site.

---

Project Objective

The objective of this project is to:

• Recreate the homepage UI and product sections of the Two Brothers Organic Farms website.
• Implement interactive shopping features such as add-to-cart, favorites, and notifications.
• Structure the application using React components and a scalable frontend architecture.
• Prepare the project for future backend integration.

---

Features Implemented

• Responsive homepage layout
• Navigation header and footer
• Hero banner section
• Product grid display
• Add products to cart
• Remove items from cart
• Add/remove items from favorites
• Toast notifications for user actions
• Product quantity selection
• “Shop by Concern” section
• Embedded YouTube video section
• “Beyond Our Products” informational section
• Custom favicon and branding

---

Tech Stack

Frontend

• React
• TypeScript
• Vite

Styling

• Tailwind CSS
• Custom CSS

Icons

• Lucide React

Version Control

• Git
• GitHub

---

Project Structure

Two-Brother-Clone
│
├── public/                 # Static assets
│   ├── favicon.ico
│   └── images
│
├── src/
│   ├── assets/             # Logos and media
│   ├── components/         # React UI components
│   ├── context/            # Cart and global state
│   ├── data/               # Product data
│   ├── services/           # Data access layer
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
│
├── index.html
├── package.json
└── README.md

---

Installation and Setup

Clone the repository:

git clone https://github.com/NikitaGithub17/Two-Brother-Clone.git

Navigate into the project:

cd Two-Brother-Clone

Install dependencies:

npm install

Run the development server:

npm run dev

---

Future Improvements

• Backend integration for:

  • Product database
  • Cart persistence
  • User authentication

• Checkout flow implementation

• API-based product fetching

• Improved mobile optimization

• Performance optimization and lazy loading

---

Disclaimer

This project is created only for educational and internship purposes as a UI/UX recreation. All brand assets and design references belong to Two Brothers Organic Farms.

---

Author

Nikita

GitHub: https://github.com/NikitaGithub17