LocalLeap | A CRM Dashboard | React, Next, Node, MySQL, Prisma

Fullstack Engineer

Software Engineer

Web Developer

JavaScript

Node.js

React

This project involved designing and developing a feature-rich Dashboard Application tailored to meet the operational needs of an internal team of 10 users. The application provides a unified platform for managing customers, projects, users, and sales opportunities while maintaining scalability and efficiency.

Project Overview

The dashboard serves as the central hub for managing core business activities, offering a responsive user interface built with JavaScript, React, Next, Node, Express, Prisma, Bootstrap and backed by a MySQL database. It focuses on:

Streamlining team collaboration.

Providing actionable insights through organized data views.

Ensuring user-friendly navigation with responsive design principles.

Key Features and Functionalities

1. Login and User Management

Secure Login: Users can log in securely with credentials stored in a users' table. Password reset functionality is included.

User Profiles: Each user can update their profile, including details such as name, email, job title, and role.

Avatar and Dropdown Options: The user's profile picture is shown in the top-right corner, providing quick access to "My Account," "Settings," and "Logout."

User Roles and Permissions:

Admins can:

Add, edit, and delete users.

Modify site-wide settings and customer data.

Managers can:

Edit tasks and manage customers.

2. Dashboard Framework

Sidebar Menu: Customizable with admin privileges to include internal links or external URLs with icons.

Search Bar: Allows for real-time search of customer data, displaying suggestions and recent searches.

Light/Dark Theme Toggle: A display icon enables users to switch between themes.

3. Customer Management

Customer Table: Stores detailed customer information, including:

Business details (e.g., address, contacts, website).

Operational specifics (e.g., founded date, services, payment types).

Administrative fields (e.g., customer status, internal document links).

Dynamic Fields: Admins can add new fields to adapt to evolving business requirements.

Detail View: Accordion-style widgets for notes, keywords, and service areas enhance data visibility.

4. Project Management

Project Listings: Displays projects grouped by type (e.g., Web Design, SEO). Users can sort columns or filter by type.

Project Fields:

Key details such as project name, type, status, start and end dates.

Task templates for efficient task creation.

Task Features:

Add and manage tasks with completion indicators (checkboxes with strikethrough).

Sidebar menus for comments and renaming tasks.

5. Sales Pipeline

Filtered view of customers with "Opportunity" status.

Displays key details such as business name, primary contact, and email.

Development Highlights

Responsive Design: Built with React, Next & Bootstrap to ensure a seamless experience across devices.

Scalable Database: Powered by MySQL with support for daily/hourly backups to ensure data integrity.

Dynamic Features:

Customizable menus and fields to adapt to business needs.

Real-time search and filtering for efficiency.

Technical Stack

Frontend: React, Next, Bootstrap

Backend: NodeJs, ExpressJs, MySQL, Prisma

Language: JavaScript

Deployment: Hosted on a AWS server with backup mechanisms for high availability and data security.

Impact

This dashboard application significantly enhanced team efficiency by:

Centralizing customer and project data for easy access.

Reducing manual efforts through dynamic task templates and automated processes.

Offering a secure and customizable platform adaptable to evolving business needs.

By blending thoughtful design with robust functionality, this dashboard became an indispensable tool for the internal team, driving productivity and operational excellence.