A Next.js application providing data-driven business intelligence for product portfolio and market research analysis, featuring BCG Matrix analysis, market research tools, product prototyping, and niche marketing strategies.
- A modern, responsive dashboard to help businesses track metrics, customer behavior, and insights — all in one place.
- Dark and Light Modes for a personalized experience with automatic theme memory.
- Interactive charts and reports that make data understandable at a glance.
- Stay on top of everything with recent activity tracking for uploads and analyses.
- BCG Matrix Visualization to assess product performance by market share and growth.
- Tools to support both primary and secondary market research workflows.
- Upload, organize, and analyze business data easily — no technical skills required.
- Generate beautiful HTML reports with key metrics and auto-generated insights.
- Product prototyping tools help test ideas before investing fully.
- Identify profitable audiences through niche marketing insights.
- Build customer-driven campaigns based on real behavioral patterns.
- Run competitive analysis to understand where your business stands in the market.
- Clean and modern UI with subtle animations and intuitive layout.
- Fully responsive design across mobile, tablet, and desktop.
- Built-in accessibility features: proper contrast, font scaling, focus states.
- Optimized for performance with fast load times and seamless interaction.
- Framework: Next.js 14
- UI Components: Shadcn UI (based on Radix UI)
- Styling: Tailwind CSS with custom theme
- Charts: Chart.js with react-chartjs-2
- Animations: CSS animations and transitions
- Theme Management: next-themes
- API Framework: Express.js
- Database: PostgreSQL
- Authentication: JWT
- Data Processing: Python scripts for data analysis
- Visualization: Matplotlib for chart generation
- Template Engine: Jinja2 for report generation
- Node.js 18.x or higher
- PostgreSQL 12.x or higher
- Python 3.8+ (for data analysis scripts)
- pnpm (recommended) or npm
- Clone the repository and install dependencies
git clone https://github.com/yourusername/bizco-np.git
cd bizco-np
# Using pnpm (recommended)
pnpm install
# Or using npm
npm install- Create environment configuration
Create a
.env.localfile in the project root:
NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXT_PUBLIC_BASE_URL=http://localhost:3000
- Start the development server
pnpm dev
# or
npm run dev- Access the application Open http://localhost:3000 in your browser
- Install Node.js dependencies
cd backend
npm install- Install Python dependencies for data analysis scripts
pip install -r requirements.txt- Configure database
Create a
.envfile in the/backenddirectory:
# Server Configuration
PORT=5000
NODE_ENV=development
# PostgreSQL Configuration
PGUSER=postgres
PGHOST=localhost
PGDATABASE=bizco_np
PGPASSWORD=your_postgres_password_here
PGPORT=5432
# JWT Configuration
JWT_SECRET=bizco_np_secret_key_change_in_production
JWT_EXPIRATION=1d
# Logging
LOG_LEVEL=info
- Initialize the database
node src/utils/initDb.js- Start the backend server
npm run devThe API will be available at http://localhost:5000.
Start the secondary API for data analysis:
cd backend
python secondary_api.pyThis will run on http://localhost:8001.
-
Install PostgreSQL
- Download from https://www.postgresql.org/download/
- Set a password for the 'postgres' user during installation
-
Create Database
- Using pgAdmin: Right-click on Databases > Create > Database... > Enter 'bizco_np'
- Using command line:
psql -U postgres CREATE DATABASE bizco_np; \q
bizco-np/
├── app/ # Next.js app directory
│ ├── dashboard/ # Dashboard pages and features
│ ├── login/ # Authentication pages
│ ├── register/ # User registration
│ └── globals.css # Global styles
├── components/ # React components
│ ├── ui/ # UI components (buttons, cards, etc.)
│ └── theme-provider.tsx # Theme provider component
├── public/ # Static assets
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── backend/ # Backend API
│ ├── src/ # Node.js backend source
│ │ ├── controllers/ # API controllers
│ │ ├── models/ # Database models
│ │ ├── routes/ # API routes
│ │ └── middleware/ # Express middleware
│ ├── secondary_api.py # Python data analysis API
│ └── requirements.txt # Python dependencies
└── temp/ # Temporary files
├── output/ # Generated charts and reports
└── uploads/ # Uploaded data files
Once the backend is running, you can test the API endpoints using tools like Postman or curl:
POST http://localhost:5000/api/users/register
Content-Type: application/json
{
"name": "Test User",
"email": "test@example.com",
"password": "password123"
}
POST http://localhost:5000/api/users/login
Content-Type: application/json
{
"email": "test@example.com",
"password": "password123"
}
POST http://localhost:5000/api/business-data
Authorization: Bearer YOUR_JWT_TOKEN
Content-Type: multipart/form-data
file: [your_data_file.csv]
type: "company_profile"
pnpm dev: Start development serverpnpm build: Build for productionpnpm start: Start production serverpnpm lint: Run linter
npm start: Run the server in production modenpm run dev: Run the server in development mode with nodemon
- Verify PostgreSQL is running using pgAdmin or system services
- Check that credentials in the
.envfile match your PostgreSQL setup - Ensure there are no firewall restrictions blocking access to port 5432
- Ensure both frontend and backend are running simultaneously
- Check that the backend is running on port 5000 and frontend on port 3000
- Verify there are no CORS issues by checking the browser's developer console
- Ensure all required Python packages are installed
- Check if matplotlib is properly configured
- Verify file permissions for temp directories are set correctly
- Modern Design: Clean, professional interface with consistent styling
- Responsive Layout: Adapts seamlessly to different screen sizes
- Interactive Elements: Hover effects, transitions, and animations for better UX
- Accessible Components: Proper contrast ratios and keyboard navigation
- Theme Options: Light and dark mode with system preference detection
- Data Visualizations: Clear charts and graphs with consistent styling
- Intuitive Navigation: Logical structure with breadcrumbs and clear paths
This project is licensed under the MIT License.