This is a Fullstack MERN application that uses TypeScript with MaterialUI componenets. It has been built by utilizing Refine, which is a headless collection of pre-built components and tools for React CRUD apps. The application performs authorization, pagination, filtering, sorting, persistent storage, and themeing. This dashboard application represents data using beautiful charts using the ApexCharts library of React. The application is fully responsive.
- Persistent user authenticatioin using GoogleAuth API
- MaterialUI component kit
- Representation of data using charts by ApexCharts library
- Collapsible sider navigation menu
- Option to choose between dark and light mode with persistent changes
- Efficient file and folder management with reusible and portable components
- Fully functional CRUD cycle
- Searching, sorting, pagination and filtering
- Form validation for creating and editing properties
- Cloud image hosting using Cloudinary API
- Transformation of the initial login page into an attractive landing page for the company
- Option to edit user profile
- Implementation of platform settings like maybe changing main color of the website from green to orange (settings need to be ellaborated)
- Implementation of reviews for each property and the user may edit or delete their reviews
- Star rating on each property based on its ratings
- Role Based Access Control (RBAC) where an admin might be incharge of several agents and may control sales (roles need to be fialized)
- Implementation of messaging system where the property agent gets a message if someone shows interest in a property (by pressing call button on the property details page)
- Implementation of bookmarks for properties a user is interested in and a deal notification system
MongoDB | ExpressJS | ReactJS | NodeJS | REST APIs | Refine v4 | HTML | CSS | JavaScript | GoogleAuth | Cloudinary | API calls | Figma
- Refine v4 (refine is a versatile React framework that enables the rapid development of a wide range of web applications. From internal tools, admin panels, B2B apps and dashboards, it serves as a comprehensive solution for building any type of CRUD applications)
- ApexCharts for React
| Color | Hex |
|---|---|
| primary.main | |
| primary.dark | |
| primary.light | |
| background.default | |
| background.paper | |
| text.primary | |
| text.secondary | |
| info.main | |
| info.light | |
| info.dark |
| Color | Hex |
|---|---|
| primary.main | |
| primary.dark | |
| primary.light | |
| background.default | |
| background.paper | |
| text.primary | |
| text.secondary | |
| info.main | |
| info.light | |
| info.dark |