surreal-dashboard

Live code here: surreal-dashboard

Surreal Dashboard is a feature-rich web application built using Node.js that provides a seamless experience for managing data and analytics for businesses. The dashboard offers a comprehensive suite of tools for visualizing data, analyzing trends, and making data-driven decisions.

• Axios: Promise-based HTTP client for the browser and Node.js
• React.semantic-ui: UI component library for React
• Formik: Form library for React
• Node.js: JavaScript runtime built on Chrome's V8 JavaScript engine
• NPX: Command-line tool for executing Node packages
• VSCode: Lightweight, cross-platform code editor
• Nodemon: Utility that monitors changes in a Node.js application and restarts the server automatically
• Nivo: Reusable charting library for React
• Material UI: Component library for React based on Google's Material Design
• Material UI Data Grid: Powerful and customizable data grid component for React
• React Router: Declarative routing library for React
• React Date Picker: Flexible and customizable date picker component for React
• Redux Toolkit: Officially recommended toolset for Redux development
• Redux Toolkit Query: Powerful data fetching and caching library for Redux Toolkit
• Dotenv: Zero-dependency module that loads environment variables from a .env file into process.env
• Google Fonts: Library of free and open-source fonts provided by Google
• Render: Cloud platform for deploying and scaling web apps and APIs
• MongoDB: NoSQL document-oriented database
• Mongoose: Object modeling tool for MongoDB
• MongoDB Aggregate: Framework for data aggregation and analysis operations on MongoDB

Running the Project

Prerequisites

• Node.js
• MongoDB

Backend Setup

1. Navigate to the backend directory of the project: cd server.
2. Install dependencies: npm install.
3. Create a .env file in the backend directory and set the following environment variables:
   • PORT: The port number to run the server on (default is 5001).
   • MONGO_URI: The URI for connecting to your MongoDB instance (e.g. mongodb://localhost:27017/surreal-dashboard).
4. Start the server: npm run start.

Frontend Setup

1. Navigate to the frontend directory of the project: cd client.
2. Install dependencies: npm install.
3. Create a .env file in the frontend directory and set the following environment variable:
   • REACT_APP_API_URL: The base URL for the backend API (e.g. http://localhost:5001).
4. Start the development server: npm start.

To populate the database, it will be automatically done once the backend is run for the first time and MongoDB is properly configured (you need).

Once the backend and frontend are running, you can access the app by visiting http://localhost:3000 in your web browser.

To populate the database, you need to uncomment lines 59 to 64 in the index file located in the server folder (backend). These lines contain the code to insert initial data into the database. After running the server for the first time with these lines uncommented and ensuring that MongoDB is properly configured, the data will be automatically inserted into the database. Once the data has been populated, remember to comment out these lines again to avoid inserting the same data multiple times.