miniCRM is a portfolio project designed to showcase my abilities in web development using modern technologies like Next.js, TypeScript, and Tailwind CSS. This lightweight application implements key features often found in CRM systems, highlighting my skills in frontend and backend development.

• User Management: Add, update, and view user information.
• Organizational Visualization: Utilize d3-org-chart to display company structure.
• Database Operations: Handle data using PostgreSQL and DrizzleORM.
• Responsive Design: Built with Tailwind CSS for a seamless experience across devices.
• Form Validation: Integrated react-hook-form and Zod for robust form handling and validation.
• Dynamic Data Tables: Present data using TanStack table for efficient sorting and filtering.

• Framework: Next.js
• Styling: Tailwind CSS
• ORM: Drizzle ORM
• UI Components: shadcn/ui
• Database: PostgreSQL
• Data Visualization: d3-org-chart
• Form Handling: react-hook-form, Zod validation
• Data Tables: TanStack table
• Charts: Recharts

To set up this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/yuda777/minicrm.git
   cd minicrm

2. Install the necessary dependencies:

   npm install

3. Configure your environment variables:

   • Copy the .env.example file to create your local .env.local file:

     cp .env.example .env.local

   • Open the .env.local file and update the values to match your local setup.
   • Ensure that you replace placeholders with your actual PostgreSQL credentials and other configuration details.

4. Launch the development server:

   npm run dev

5. Access the application: Open http://localhost:3000 in your browser.

miniCRM is a demonstration of various web development skills, integrating both frontend and backend technologies. Key highlights include:

1. User Management:

   • Efficiently manage user and customer information with intuitive forms and interfaces.

2. Organizational Chart Visualization:

   • Visualize company structure dynamically using d3-org-chart, providing a clear view of the hierarchical organization.

3. Real-Time Performance Metrics:

   • Monitor user activity and system performance in real-time with Recharts and Socket.IO, offering immediate insights into key metrics.

4. Advanced Search Functionality:

   • Powerful search capabilities allowing for complex queries using "and," "or," and "not" conditions.
   • Multi-item search supported, enabling users to refine search results effectively.
   • Built with react-hook-form and Zod validation for robust form handling and validation, ensuring accurate and secure data input.

5. Responsive Design:

   • A seamless user experience across all devices, crafted with Tailwind CSS for responsive layouts and components.

These features demonstrate the project's versatility and the breadth of skills applied, from real-time data handling to advanced user interactions.

Here are some key features and interfaces of the miniCRM project:

Manage user information easily with this intuitive table interface. Perform complex queries with the advanced search feature, including "and," "or," and "not" conditions for detailed results.

Visualize the company hierarchy with an interactive organizational chart.

Upload Excel and mapping field.

Real-time performance dashboard with live updates.

1. Advanced Reporting:

   • Export to PDF and Excel: Generate detailed reports and export data with summaries and charts.

2. Calendar Scheduling:

   • Event Management and Tagging: Schedule events and use tags for better organization.

3. Real-Time Chat:

   • User Messaging: Enable instant communication between users within the application.

Contributions are welcome! If you have ideas or improvements, feel free to fork the repository and create a pull request. For major changes, please open an issue to discuss your ideas.

This project is licensed under the MIT License.

• Next.js Documentation: Next.js Docs
• TypeScript Documentation: TypeScript Docs
• Tailwind CSS Documentation: Tailwind CSS Docs