A modern full-stack real estate web application designed to provide seamless property management and booking experiences. This application offers features like responsive design, property listings, favorites management, booking functionalities, easy navigation, and many more. Built with React, Prisma, MongoDB, and other cutting-edge technologies, it ensures high performance, accessibility, and SEO optimization. The app supports easy navigation, simple animations, and robust authentication for a secure, scalable solution.
-
Frontend
- HTML & CSS → Provides semantic structure and responsive styling.
- React.js → Component-based frontend framework for dynamic UIs.
- Mantine UI → Modern React component library for fast UI development.
- React Query → Efficient server-state management and data fetching.
- Toastify → Elegant toast notifications for user feedback.
-
Backend
- Node.js → Runtime environment for executing JavaScript on the server.
- Express.js → Web framework for handling routes and APIs.
- Prisma → Type-safe ORM for database access.
- MongoDB → NoSQL database for scalable data storage.
-
Authentication
- Auth0 → Secure authentication and authorization management.
-
Deployment
- Vercel → Cloud platform for seamless deployment of frontend and backend.
-
Image Upload & Storage
- Cloudinary → Cloud-based image upload, storage, and optimization.
-
Other Features
- Responsive Design → Optimized for all devices.
- Simple Animations → Smooth UI transitions and feedback.
- Cloud-based Storage → Secure and scalable data management.
-
Other Libraries / Tools
- Google Fonts → Custom typography for modern UI/UX.
🌐Demo (Live Preview): https://full-stack-real-estate-web-app-depi-final-project.vercel.app/
📊 Presentation: click here (google slides)
🎥 Watch Demo Video on LinkedIn: Click Here
- Fully Responsive Design: The application is designed to work flawlessly across all devices, from desktops to smartphones, offering a seamless experience on any screen size.
- Property Management: Users can browse properties, view details, and add them to their favorites list for quick access.
- Booking Functionality: The app allows users to book residencies easily with a clear and intuitive booking system.
- Favorites List: Users can add properties to their favorites list, manage their selections, and access their preferred listings at any time.
- High Performance: The app leverages React.js and Prisma to ensure fast load times, efficient data fetching, and minimal downtime.
- Authentication: Secure user authentication and authorization are handled by Auth0, providing a smooth login/signup process.
- Property Search & Filtering: Users can search and filter properties by various criteria, improving the user experience for finding specific listings.
- Image Uploads: Users can upload property images, stored securely using Cloudinary, allowing for dynamic and visually appealing property listings.
- SEO & Accessibility: The app is built with high SEO standards and accessibility features, ensuring that it ranks well on search engines and is usable by all users, including those with disabilities.
- Easy Navigation: Intuitive navigation for a seamless browsing experience through the website.
To download and run this project locally:
1. Clone the repository:
git clone https://github.com/Ahmed-Maher77/Full-Stack-Real-Estate-Web-App__DEPI-Final-Project.git
2. Navigate into the project directory:
cd Full-Stack-Real-Estate-Web-App__DEPI-Final-Project
3. Install dependencies:
yarn install
4. Set up environment variables:
- Create a `.env` file in the root directory.
- Add the required variables for:
• MongoDB (e.g., `MONGODB_URI`)
• Auth0 (e.g., `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`)
• Cloudinary (e.g., `CLOUDINARY_CLOUD_NAME`, `CLOUDINARY_API_KEY`, `CLOUDINARY_API_SECRET`)
5. Run the development server:
npm run dev