https://five-star-real-property.netlify.app/
A property ecommerce project. The main goal of the project was to build E-commerce site using the learnt skills including but not limited to Scss, reactJs and fireBaseDB. As always, I prefer to go beyond the given MVP and create more interesting site that represents my capabilities. The eCommerce site was built from scratch. Took a lot of time from fixing stubborn bugs to watching tons of tutorials. I enjoyed every single bit of it. The idea on how things go hand in hand to create a harmony between variety of tech stacks is an outstanding experience. It is like solving a puzzle, you might have a general idea how to approach the puzzle but the secret remains in how to utilize the little pieces to solve it.
Features:
- Allow users to navigate different property listings for rent or properties for sale.
- Allow users to login by signing up using an email and password or by using their Google account.
- Allow users to reset thier passowrd by using forgot password feature.
- Allow users to edit/update their personal information on their profile page.
- Allow users to create their own property listing by providing the property details such as name, address, price, upload property images up to 6 imgaes and more options.
- Allow users to delete the property from their listing.
- Allow users to contact the owner to ask for more information about the property.
- Allow users to load more properties if there are any. set to display 4 properties at a time by default.
- Allow users to copy the property listing link by clicking on the clipboard icon.
Technologies:
- Website is fully developed using Reactjs.
- All data are completely saved and retrieved from Firebase DB Version 9.
- Google Authentication is implemented to allow users to login using their google account.
- Users passwords are hidden before sending data to Firbase DB upon signing up for security purposes.
- React-toastify package is used to prompt users.
- Sass is used for styling and improving website responsiveness on different devices.
- Latest react router version 6 is being used.
- SwiperCore is used to create a nice carousel component.
Challenges:
- We learnt an older version of FireBaseDB during class but I was adamant to use/learn the latest version which was version 9 at that time. Although, the concept is similar to older versions but there was few changes that I had to dig the web up and read documentations to learn how the new version works and how to configure it.
- During the bootcamp, we learnt an older version of react routing. I decided to up my game and use the latest react routing which was version 6. I watched multiple youtube tutorials to figure out the new way of doing the react router. I ran into few bugs but that was expected when you deal with new tech stacks so I did not mind it at all.
- I wanted to make the site as realistic as possible. Developing the carousel or the sliding panel was not an easy task either. It was a new concept that I liked to have in my site so I had to have it no matter how long it might've taken me to implement it. I tried many reactJs libraries and styles until I stumbled upon a package called swipeCore. It was fun and easy enough to use and achieved the result I wanted.
- Colour matching, this might be a trivial issue but in my opinion it was crucial to ensure the colours blend in well. I had to approach this issue from the user perspective. There was many times that I disliked a website due to it's design or the colours used. Colour matching is not an easy task as some people might think. It effects the users mindset subconsciously. I spent hours watching videos on colours design and colour matching to make sure I pick the right colour set. I think the chosen site colours could be better.
Fun Fact!
- There's an easter egg somewhere in the website can you find it? ^_^
Possible Improvements:
- Add Geolocation component to show property location on the map.
- Enhance user interface.
- Allow users to edit/change property details.
- Add more sign up options.
- Sort properties based on location, price, etc.
- Enhance colour selections and blend
Available Scripts In the project directory, you can run:
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode. See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.