Display List of Available Properties

[respp]

📘 Issue Description

Create a /properties page in the frontend to display all available properties by fetching them from the backend’s GET /properties endpoint, respecting the StellarRent monorepo structure.

🔍 Steps

1. In apps/web/src/pages/properties.tsx, create a /properties page.
2. In apps/web/src/components/features/, create a PropertyList.tsx component to display a list of properties.
3. In apps/web/src/services/api.ts, create a getProperties function that makes a GET request to the /properties endpoint using fetch.
4. In apps/web/src/pages/properties.tsx, use the PropertyList component and the getProperties function to display the properties.

✅ Acceptance Criteria

• The user can navigate to /properties and see a list of all available properties.
• Each property displays its title, description, price, and the owner’s name.
• If there are no properties, an empty list or a message like "No properties available" is shown.
• The design uses TailwindCSS for a clear and readable layout.
• If there’s an error fetching properties, an error message is displayed.

🌎 References

• Next.js Documentation: https://nextjs.org/docs/pages-router
• React useEffect: https://react.dev/reference/react/useEffect
• TailwindCSS: https://tailwindcss.com/docs

📜 Additional Notes

• This page does not require authentication since it’s a public listing.
• In the future, add a link on each property to a /properties/[id] page for more details or to initiate a rental request.
• Document the component in apps/web/docs/.

🛠️Technologies Used:

• Next.js (next)
• TailwindCSS (tailwindcss, @tailwindcss/postcss, tailwind-merge)
• tw-animate-css (extension for animations in TailwindCSS)
• Lucide-react (icons)
• Next-themes (dark/light mode in Next.js)
• Zod (validation)
• @simplewebauthn/browser (WebAuthn authentication)
• @stellar/stellar-sdk (interaction with the Stellar blockchain)
• base64url, bigint-conversion, cbor-x (utilities for handling cryptographic data)
• clsx, class-variance-authority (helpers for conditional CSS classes)
• TypeScript (typescript, React and Node types)
• ESLint (eslint, eslint-config-next, @eslint/eslintrc) (linter for best practices)
• shadcn/ui (UI components built with Tailwind and Radix UI)

--
I’ve attached an example of the expected appearance, followed by a visual guide. This document is not purely textual, suggestions for design improvements and creative input are encouraged and appreciated.

[MelyIriarte]

Hi 👋 I’d love to work on this issue. I have experience with React, Next.js, and TailwindCSS, and I'm familiar with monorepo structures. I've implemented similar integrations using fetch, useEffect, and reusable components, so I can take care of the /properties page while meeting all the mentioned criteria. I'm ready to get started!

[salazarsebas]

Hello StellarRent Team,

My background

My name is Sebastián, and I'm part of the Dojo Coding community ⛩️💻 I'm excited about the opportunity to contribute to your Stellar-based project during ODHack13! 🚀

Experience

I'm a full-stack developer with experience in Web3 and blockchain technologies, particularly in projects involving smart contracts and decentralized solutions. I have worked on projects mainly based on Stellar.

I have participated in hackathons with the intention of improving my skills.

Motivation

I am interested in this particular topic because it combines two of my passions: blockchain technology and innovation. I am motivated by the opportunity to improve my skills and contribute to the project.

Availability

ETA 2 days
I am committed to active collaboration, delivering high quality code, and maintaining open communication with the team.

Links

You can find my profiles and links here:

GitHub: https://github.com/salazarsebas

OnlyDust: https://app.onlydust.com/users/salazarsebas/overview

Thank you for considering my candidacy. I am excited about the opportunity to contribute to this project and create a positive impact. Please let me know if you have any questions or need additional information.

Best regards, Sebastián!

[respp]

@salazarsebas the issue is yours!

[respp]

Hi @salazarsebas , How is your progress on the issue?

Only Dust requires to merge the PR on Monday and Tuesday.

Anything you need, I'm here for you.