- Project Overview
- Code Installation
- Technologies Used
- Featured Code
- Bugs
- Wins and Challenges
The Foxtons Dashboard is a full MERN stack web application that serves as a tool for estate agents to manage their property portfolio. The dashboard provides agents with an overview of key metrics of their property portfolio, allows them to view all their properties in one place, and access detailed information about each one. The dashboard also features a chatbot helper powered by AI powered by OpenAI, which can assist agents in answering common questions and completing routine tasks.
The application is built using TypeScript, a popular programming language that adds optional static typing to JavaScript. This allows for increased code clarity and reduces the likelihood of errors, making the application more stable and reliable.
The dashboard uses React, a popular JavaScript library for building user interfaces, and ApexCharts, a lightweight charting library that allows for the easy creation of interactive, responsive charts and graphs. The combination of React and ApexCharts provides a visually appealing and intuitive user experience, making it easy for estate agents to view and analyze their property data.
The application also features CRUD functionality, allowing estate agents to easily add, edit, and delete properties from their portfolio. This functionality is made possible through the use of a backend API built using Node.js and Express, which provides a secure and reliable way to store and retrieve property data. The database is powered by MongoDB, a NoSQL database that is known for its scalability, flexibility, and ease of use.
Overall, the Foxtons Dashboard is a powerful and intuitive tool for estate agents, providing a comprehensive view of their property portfolio and making it easy to manage and analyze data. Its use of TypeScript, React, ApexCharts, Node.js, Express, and MongoDB makes it a showcase of modern web development techniques and a testament to my knowledge and skill.
To install and run the Foxtons Landlord Dashboard on your local machine, follow these steps:
Clone the repository to your local machine using the command: git clone https://github.com/thejamesgore/Foxtons-Dashboard
To obtain the necessary values for these variables, follow these steps starting with the server folder:
-
Sign up for a MongoDB account on the MongoDB website.
-
Once you have signed up and logged in, create a new project and follow the steps to create a new MongoDB database.
-
Once your database has been created, click the "Connect" button and follow the steps to create a new database user and obtain your MongoDB connection string.
-
Copy your MongoDB connection string and paste it into the
.envfile in the server folder as the value forMONGODB_URLusing the.env.sapleas an exaple. -
Sign up for a Cloudinary account on the Cloudinary website.
-
Once you have signed up and logged in, navigate to your dashboard and click the "API Credentials" button.
-
Under the "Account Details" section, you will find your Cloudinary URL. Copy this URL and paste it into the .env file in the server folder as the value for CLOUDINARY.
-
Under the "Security" section, you will find your Cloudinary API key and API secret. Copy these values and paste them into the
.envfile in the server folder as the values forCLOUDINARY_API_KEYandCLOUDINARY_API_SECRET, respectively. -
Once you have obtained these values and updated your .env file, you should be able to run your server and access your MongoDB and Cloudinary resources.
-
To enable Google Authentication for your dashboard, you will need to set up a Google Cloud Console project and create a client ID. Follow these steps to get started:
-
Go to the Google Cloud Console and sign in with your Google account.
-
Click the project drop-down menu at the top of the screen and select "New Project". Give your project a name and click "Create".
-
Once your project has been created, click the "APIs & Services" tab on the left-hand side of the screen, then click "Credentials".
-
On the "Credentials" screen, click "Create credentials", then select "OAuth client ID".
-
Select "Web application" as the application type, then give your client ID a name.
-
In the "Authorized JavaScript origins" section, add http://localhost:3000 and http://localhost as an authorized origin.
-
In the "Authorized redirect URIs" section, add http://localhost:3000 and http://localhost as an authorized redirect URI.
-
Click "Create" to generate your client ID.
-
Once your client ID has been generated, copy the "Client ID" and "Client Secret" values and paste them into the appropriate fields in your .env file.
-
Save your changes to the .env file and restart the server by running the command npm run start in the server folder.
-
Navigate to the dashboard folder and create a new file called
.envby copying the contents of.env.sampleand updating the variables with the relevant values. -
Install the required dependencies for both the dashboard and server folders by running the command:
npm install -
Start the server by navigating to the server folder and running the command:
npm run start -
Start the dashboard by navigating to the dashboard folder and running the command:
npm run start -
Open your browser and go to http://localhost:3000 to view the dashboard.
Congratulations, you have successfully installed and run the Foxtons Landlord Dashboard on your local machine! Please note that the above instructions assume that you have already installed Node.js on your local machine. If you have not, please refer to the documentation for those tools for installation instructions.
- Node.js: A JavaScript runtime that allows developers to build scalable and performant server-side applications.
- Express.js: A lightweight and flexible web framework for Node.js that provides a powerful set of features for building web applications and APIs.
- MongoDB: A NoSQL database that provides high scalability and flexible data modeling capabilities.
- Mongoose: An Object Data Modeling (ODM) library for MongoDB that provides a high-level API for interacting with MongoDB databases and collections.
- Cloudinary: A cloud-based image and video management service that provides powerful media manipulation capabilities.
- Cors: A middleware for Express.js that allows for Cross-Origin Resource Sharing (CORS) in web applications.
- Dotenv: A zero-dependency module that loads environment variables from a .env file.
- React: A popular JavaScript library for building user interfaces.
- TypeScript: A superset of JavaScript that adds optional static typing and other features to the language.
- Refine: A highly customizable React-based framework for building admin panels and dashboards.
- ApexCharts: A lightweight and versatile charting library that provides a wide range of charts and graphs for data visualization.
- Axios: A popular JavaScript library for making HTTP requests from the browser.
- React-ApexCharts: A React wrapper for ApexCharts that provides an easy way to use ApexCharts in React applications.
- Jest: A JavaScript testing framework that provides a simple and powerful way to write and run unit tests for JavaScript code.
- React Testing Library: A testing utility for React that provides a simple and intuitive API for testing React components.
- TypeScript: A superset of JavaScript that adds optional static typing and other features to the language.
- Visual Studio Code: A popular and powerful code editor that provides a wide range of features for developing and debugging code.
- ESLint: A popular linter for JavaScript and TypeScript that helps ensure code quality and consistency.
- Prettier: A code formatter that helps enforce consistent code formatting across the project.
- Git: A version control system that helps manage changes to the codebase and enables collaboration with other developers.
- GitHub: A popular online platform for hosting and sharing code repositories and collaborating with other developers.
During deployment there has only been one noticable bug, the host for the backend server would spin up and down to preserve resources. When a user initially clicked "login via Google" and went through the authentication steps, the backend server would not be running, so the authentication process couldn't complete.
Solution: To fix this issue, I added the following code to the login.tsx page:
useEffect(() => {
fetch(`https://orange-viper-gear.cyclic.app`)
.then((res) => res.json())
.then((data) => {
console.log(data)
})
},[])
This code makes a simple GET request to the backend server at a predetermined URL. By doing this, we ensure that the backend server is running before the user tries to authenticate with Google. With this solution in place, users are now able to successfully authenticate with Google even if the backend server is initially down.
-
Strong use of modern technologies: The dashboard utilizes a number of modern technologies, including React, Material-UI, and Refine, demonstrating a strong understanding of current web development practices.
-
Responsive design: The dashboard is designed to be responsive across a range of devices, ensuring that users can access and use the dashboard regardless of their device type or screen size with a global light/dark mode.
-
Robust testing suite: The dashboard includes a comprehensive testing suite utilizing Jest and React Testing Library, ensuring that the application is thoroughly tested and bugs are caught early in the development process.
-
Cloud-based hosting: The dashboard is hosted on a cloud-based platform, providing reliable and scalable hosting capabilities to ensure that the application is always available and responsive to users.
-
Clear and concise code: The code for the dashboard is clean, concise, and easy to read, making it easier for other developers to understand and work with the codebase.