Realtor 2.0

MERN Project || MERN Training

Description: A Modern estate Marketplace like Realtor

📌 What we'll Implement:
  🔑 Advanced Authentication: Implement JWT, Firebase, and Google OAuth.
  🏡 Real-world CRUD Operations: Create, read, update, and delete property listings using MongoDB.
  💡 User-friendly Features: Enhance the UX with image uploads, property listing management, and more.
  🚀 Advanced Search Functionality: Implement search features to help users find what they're looking for.
  🌐 Deployment: Deploy your MERN app for free.

Project Breakdown

Day 1

• Frontend Setup (React & Tailwind)
• Creating Frontend pages & routes
• Header Component
• Create & Run Backend Server
• User Model
• Testing backend route

Day 2

• Sign-up Route
• Sign-up Page UI & functionality Sign Up Code

Day 3

• Error Middleware
• Sign-up loading & error states
• Sign-in Route
• Sign-in Page UI & functionality Sign In Code
• Redux Toolkit & persist Persist Store

Day 4

• Google OAuth (Firebase) OAuth Controller OAuth Submit Handler
• Add avatar in header
• Profile Page UI Page UI
• Image Update (Not required) Profile Code
• Update User (Api Route)
• Update User Functionality Profile Fxn

Day 5

• Delete User Reference
• Sign out User Reference
• Create listing page UI Page UI
• Create listing API route Listing Model
• Upload listing images Store Img Firebase
• Create listing page functionality Code

Day 6

• Get user listings API route
• Show user listings functionality Section code
• Delete user listing functionality
• Update listing API route Function
• Update listing functionality UpdateListing UI
• Image Slider Slider UI
• Complete Listing Page Complete UI
• Search API Route Fxn
• Header search functionality
• Search Page Search.jsx Listing Block
• Home Page UI

Deploy to Render (You can also refer to some Yt Video)

Note: Below steps not valid in every scenario

• index.js

import path from 'path';
const __dirname = path.resolve();
app.use(express.static(path.join(__dirname, '/client/dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client', 'dist', 'index.html'));
})

• package.json

"build": "npm install && npm install --prefix client && npm run build --prefix client"

• Render hosting process

1. Open render
2. New -> Web Service
3. Connect from Github repo
4. Build Command: npm run build
5. Start Command: npm start
6. Add env variables (Add key value pair you have in .env)