A modern real estate landing page built with Vite + React.js and Tailwind CSS, featuring Framer Motion animations and a fully responsive design for a smooth user experience.
My Estate is a practice project created to sharpen my skills in React.js and Tailwind CSS. It showcases a clean, modern, and mobile-friendly design with property listings, animations, and a working contact form.
- 📋 Property Listings – Displays multiple real estate projects.
- 📱 Fully Responsive – Works seamlessly across devices.
- 🎞 Smooth Animations – Powered by Framer Motion.
- 📧 Working Contact Form – Integrated via Web3 Forms.
- 🔔 Toast Notifications – Implemented with react-toastify.
- 🖼 Swipeable Projects Section – Interactive property viewing.
- Frontend: Vite + React.js
- Styling: Tailwind CSS
- Animations: Framer Motion
- Form Handling: Web3 Forms
- Notifications: react-toastify
- Data: Local data from
./src/assets/assets.js
Below is the project structure used for My Estate.
My-Estate/
├─ public/
│ └─ vite.svg
├─ src/
│ ├─ assets/
│ │ └─ assets.js # And all th pictures included
│ ├─ components/
│ │ ├─ Navbar.jsx
│ │ ├─ Header.jsx
│ │ ├─ Projects.jsx
│ │ ├─ About.jsx
│ │ ├─ Contact.jsx
│ │ └─ Footer.jsx
│ │ └─ Testimonials.jsx
│ ├─ App.jsx
│ ├─ main.jsx
│ └─ index.css
├─ .gitignore
├─ README.md
├─ package.json
├─ package-lock.json
├─ vite.config.js
├─ vercel.json
├─ index.html
└─ eslint.config.js
Note: Don't forget to add .env and VITE_WEB3_KEY="Your Real Web3 forms Public key" Notice here it is Not API key jus so the Message sents in the Website would be directly sents to you"
Follow these steps to run the project locally:
# 1️⃣ Clone the repository
git clone https://github.com/ibsa-a1/My-Estate.git
# 2️⃣ Navigate into the project folder
cd My-Estate
# 3️⃣ Install dependencies
npm install
# 4️⃣ Start the development server
npm run dev
The app will be running at http://localhost:5173 (default Vite port).Once running locally:
Browse Listings – Scroll or swipe through property projects.
View Details – Explore property details and images.
Contact Form – Send a message directly to the owner (email integration works via Web3 Forms).
Responsive UI – Try resizing the browser to see the responsive design in action.
Inspired by GreatStack.
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
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.