Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marx-wrld/real-estate
A real estate web application built in React.js(UI), redux, Firebase, JWT, MongoDB and tailwind-css
https://github.com/marx-wrld/real-estate
mern-stack mongodb nodemon reactjs tailwind-css
Last synced: 2 days ago
JSON representation
A real estate web application built in React.js(UI), redux, Firebase, JWT, MongoDB and tailwind-css
- Host: GitHub
- URL: https://github.com/marx-wrld/real-estate
- Owner: Marx-wrld
- License: mit
- Created: 2022-11-17T14:53:14.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-03T20:03:56.000Z (11 months ago)
- Last Synced: 2024-01-04T15:57:55.797Z (11 months ago)
- Topics: mern-stack, mongodb, nodemon, reactjs, tailwind-css
- Language: JavaScript
- Homepage:
- Size: 83.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Real-Estate
A real estate web application built in React.js(UI), redux, Firebase, JWT, MongoDB, and tailwind-css.
- Link to the app - https://kana-estate.onrender.com/
It allows users to search for properties based on various criteria, such as location, price, and number of bedrooms. Users can typically browse listings, view photos, and contact agents or brokers to schedule viewings.
- Tutorial on how the app works ⬇️
https://github.com/Marx-wrld/Real-Estate/assets/105711066/e7520977-dbf0-4761-b640-86b5e05d7264
### Libraries used:-
- Building the project
```
npm create vite@latest client
npm i
```
- Installing Tailwind css
```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
- Installing React router-dom for the web pages
```
npm i react-router-dom
```
- React icons install
```
npm i react-icons
```
#### Building our api server
- On our root folder
```
npm init -y
```
- Create an index.js file in our api folder then do,
```
npm i express
```
- Add "type": "module", to the package.json file in our root folder then run,
```
node api/index.js
```
#### Installing nodemon to auto-refresh our server in case of any changes
```
npm i nodemon
```
- Edit your package.json script section to this:-
```
"scripts": {
"dev": "nodemon api/index.js",
"start": "node api/index.js"
},
```
- To run our server, we'll now simply do:-
```
npm run dev
```
#### Installing the mongoose package for mongodb
```
npm i mongoose
```
#### Installing bcryptjs for encrypting our users' passwords
```
npm i bcryptjs
```
#### Installing the json web token to handle the user email and password storage
```
npm i jsonwebtoken
```
#### Installing redux-persist which helps us store user data inside the local storage
```
npm i redux-persist
```
**You can also install the google chrome redux extension
#### Installing Firebase after setting firebase web app in our account
```
npm install firebase
```
#### Rules to add to your Firebase storage
```
allow read;
allow write: if
request.resource.size < 2 * 1024 * 1024 &&
request.resource.contentType.matches('image/.*')
```
#### Installing cookie-parser to store and retrieve the user-session token
```
npm i cookie-parser
```
#### Installing react swiper, a modern touch slider for web apps
```
npm i swiper
```
#### Installing tailwindcss line-clamp for truncating text after a fixed number of lines
```
npm install -D @tailwindcss/line-clamp
```