Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/annaburd/web-real-estate
A web application that blends modern design approaches with a timeless and intuitive UI, designed and developed exclusively for the local small-scale real estate business.
https://github.com/annaburd/web-real-estate
astro contentful landing-page leaflet react real-estate ssg tailwind typescript webapp website
Last synced: 3 days ago
JSON representation
A web application that blends modern design approaches with a timeless and intuitive UI, designed and developed exclusively for the local small-scale real estate business.
- Host: GitHub
- URL: https://github.com/annaburd/web-real-estate
- Owner: AnnaBurd
- Created: 2023-08-17T07:29:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-15T11:48:11.000Z (9 months ago)
- Last Synced: 2024-09-30T03:23:49.656Z (3 days ago)
- Topics: astro, contentful, landing-page, leaflet, react, real-estate, ssg, tailwind, typescript, webapp, website
- Language: Astro
- Homepage: https://viet-land.netlify.app/
- Size: 22.1 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
[VietLand - Real Estate App][vietland]
> A web application that blends modern design approaches with a timeless and intuitive UI, designed and developed exclusively for the local small-scale real estate business.
[vietland]: https://viet-land.vn/ "Viet Land App"
[](https://app.netlify.com/sites/viet-land/deploys)
The main objective of this project is to help the local business establish a strong connection with potential customers and create an outstanding first impression, ultimately giving the business a distinct advantage amidst the fiercely demanding marketplace.
Initial constraints that we needed to address:
- user-friendly design with an understanding of local language and cultural distinctiveness
- competitive performance on mobile devices
- smooth delivery and uncomplicated content management processes
- **restricted budget**
In this particular scenario, the approach taken was to generate static pages rather than rely on client-side or server-side rendering. The client-side rendering was ruled off due to the significance placed on mobile performance and search engine optimization (SEO). Meanwhile, the idea of spending on the development/hosting/management of the backend side ruled off the server-side rendering approach as well. Instead of overinvesting in the backend infrastructure, we choose the services of the headless CMS (with generous free tiers).
And, although static pages sound … lifeless, the app pages have been designed in a manner that does not give off a static impression entirely! The secret is the usage of component-based islands of JS interactivity whenever necessary.
[**View Viet Land App (Live)**][vietland]
## Key Features
- Mobile-first responsive design
- Forms with intuitive UI
- Interactive search
- Responsive map
- Integration with Contentful CMS
## Designed with and Build with
This project was developed by selecting a carefully curated set of modern technologies and tools. The pivotal ones are listed below. For a comprehensive view of all dependencies, including exact versions, feel free to explore the details in the [package.json](https://github.com/AnnaBurd/web-real-estate/blob/main/package.json) file.
| Name | Usage |
| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| [](https://astro.build/) | Leveraged for generating static pages, emphasizing fast load times and optimal performance. |
| [](https://reactjs.org/) | Integrated strategically for dynamic content and interactive components, providing a lively user experience. |
| [](https://www.typescriptlang.org/) | Ensured codebase reliability and scalability, contributing to the overall maintainability of the application. |
| [](https://www.contentful.com/) | Served as the headless CMS, facilitating easy content updates and management. |
| [](https://www.figma.com/) | Utilized for collaborative design processes, ensuring a cohesive and visually appealing user interface. |
| [](https://tailwindcss.com/) | Applied for a streamlined and responsive design, enhancing the overall aesthetic and usability. |
| [](https://leafletjs.com/) | Integrated for interactive maps, enhancing the user experience and providing valuable location-based information. |
## Installation
| Command | Action |
| :---------------- | :------------------------------------------------------------------------------------------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` Note: switched from `localhost:3000` to `localhost:3000` in latest versions of Astro |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
## Project Structure
The project contains the following files and folders:
```
/
+---.github - configurations for github actions ci
+---.vscode - list of recommended extensions for vscode editor
+---dist - files generated by build command
+---node_modules - third-party libs
+---preview - preview assets for md documentation
+---public - fonts, images and icons
|
\---src
|
+---components - reusable Astro components
|
+---layouts - common layout for all pages
|
+---model - application data
|
+---pages - file-based routes
| 404.astro
| index.astro
| thong-tin.astro
| tim-dat.astro
| [slug].astro
|
+---scripts - vanilla js (ts) scripts
|
\---styles - css defaults and variables
... ts, prettier, tailwind, astro config files
```
During the build, Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. The `404.astro` page is exposed as the default error page. `[slug].astro` exposes dynamically-generated pages.
Astro components in `src/components/` can include pure Astro or React/Vue/Svelte/Preact components.
## 👀 Want to contribute?
1. Fork project ()
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes (`git commit -am 'Add some fooBar'`)
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
[Discuss Issues](https://www.linkedin.com/in/anna-burdanova-b91453218/)