A simple realestate.com.au clone built with React and Styled Components.
https://ashleetan.github.io/realestate
- 🐣 create-react-app
- 👩💻 Modern JavaScript/ES6: arrow functions and higher-order functions
- ⚛️ Latest React: function components with hooks
- 🧭 React Router
- 🎨 Styled Components for CSS
- 🎁 Flexbox for layouts
- 🆎 Free Pangea Font and Styled Icons
- 🚙 GitHub Actions for CI/CD
After I completed HTML, CSS, JavaScript and React courses from Codecademy, I'd like to work on a production-ready project to practise my knowledge. realestate.com.au is a beautiful property website with many components. I choose to rebuild the search results page and property details page to improve my web development skills.
- Property card with carousel component in the search results page
- Fetch mock data using
useEffect - Navigate from search results to property details page using react Router
- Hero component in property details page
- Action bar component
- Branding bar component
- Address component
- Price component
- Gallery component
- General features component
- Full-screen gallery component
- Home loan calculator component
- Interactive map component
- Property description component
- Property features component
- Travel time component
- Request inspection component
- Floorplans and tours component
- Agent float widget component
- Inspections component
- Home loans component
- Renovation estimator component
- Suburb profile component
- Nearby schools & child care component
- Agent price guide component
- Contact agent form component
- Footer
- Responsive design to support mobile devices
To set up a local development environment:
- Open Terminal app
- Run
git clone https://github.com/AshleeTan/realestate.git - Run
cd realestate & yarn start - Open http://localhost:3000 to view the website in the browser.
GitHub Actions will automatically deploy the main branch to GitHub Pages, the live website is https://ashleetan.github.io/realestate