A comprehensive web application for digital services with an interactive cost estimator, admin dashboard, and client management system.
- Interactive multi-step calculator for project cost estimation
- Dynamic pricing based on project type, features, and timeline
- Real-time cost breakdown with visual charts
- Email submission and PDF export capabilities
- Complete calculator submission management
- View detailed submission reports in formatted HTML
- User management and authentication
- Analytics and reporting tools
- Content management for calculator configurations
- Modern responsive design with smooth animations
- Interactive chat widget for customer support
- Portfolio showcase and service pages
- Contact forms and newsletter subscription
Frontend:
- React 18 with TypeScript
- Vite for development and building
- Tailwind CSS for styling
- Framer Motion for animations
- Lucide React for icons
- React Router for navigation
Backend:
- Node.js with Express
- MongoDB with Mongoose
- JWT authentication
- Swagger API documentation
- Winston logging
- Nodemailer for email services
Pixeloria/
├── src/ # Frontend React application
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components
│ ├── admin/ # Admin dashboard components
│ ├── hooks/ # Custom React hooks
│ ├── layouts/ # Layout components
│ └── utils/ # Utility functions and API
├── backend/ # Backend Node.js application
│ ├── src/
│ │ ├── controllers/ # Route controllers
│ │ ├── middleware/ # Authentication & validation
│ │ ├── database/ # Database models and config
│ │ ├── routes/ # API routes
│ │ └── utils/ # Backend utilities
│ └── uploads/ # File upload storage
└── docs/ # Documentation files
- Node.js 18+
- MongoDB Atlas account or local MongoDB
- Gmail account for email services
- Clone the repository
git clone <repository-url>
cd Pixeloria- Install frontend dependencies
npm install- Install backend dependencies
cd backend
npm install- Environment Setup
# Copy backend environment file
cp backend/.env.example backend/.env
# Configure your MongoDB URI, JWT secret, and email credentials- Start Development Servers
Backend (runs on port 5000 or 50001 if port conflict):
cd backend
npm run devFrontend (runs on port 5173):
npm run devPORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
JWT_EXPIRES_IN=7d
EMAIL_HOST=smtp.gmail.com
EMAIL_USER=your_email@gmail.com
EMAIL_PASSWORD=your_app_password
ADMIN_EMAIL=admin@pixeloria.com
ADMIN_PASSWORD=admin123
FRONTEND_URL=http://localhost:5173VITE_API_URL=http://localhost:5000/apiOnce the backend is running, visit:
- Swagger Docs:
http://localhost:5000/api-docs - API Base URL:
http://localhost:5000/api
Default Admin Credentials:
- Email:
chetanagarwal1302@gmail.com - Password:
admin123
Admin Features:
- Calculator submission management
- User management
- Content management
- Analytics dashboard
- System configuration
- Visit
/cost-estimator - Click "Start Calculator"
- Select project type
- Configure pages and features
- Choose design complexity and timeline
- Enter contact information
- Submit and receive estimate
- Login at
/admin/login - View calculator submissions
- Click "View Details" to see formatted reports
- Manage users and system settings
The application is configured for deployment on:
- Frontend: Netlify, Vercel
- Backend: Railway, Heroku, DigitalOcean
- Database: MongoDB Atlas
See netlify.toml and vercel.json for deployment configurations.
- Backend automatically finds available port (5000 or 50001+)
- Frontend API calls adapt to backend port
- Check console logs for actual running ports
- JWT tokens stored in localStorage/sessionStorage
- Admin routes protected with middleware
- Token expiration handled gracefully
- MongoDB with Mongoose ODM
- Automatic sample data creation
- User roles: admin, editor, viewer
- Fork the repository
- Create feature branch (
git checkout -b feature/AmazingFeature) - Commit changes (
git commit -m 'Add AmazingFeature') - Push to branch (
git push origin feature/AmazingFeature) - Open Pull Request
This project is licensed under the MIT License.
For support and questions:
- Email: hello@pixeloria.com
- Phone: (415) 555-0123
Built with ❤️ by the Pixeloria Team
- ✅ Complete calculator admin portal with submission management
- ✅ PDF export functionality for client quotes
- ✅ Dynamic calculator configuration (project types, features, design options)
- ✅ Real-time cost calculation with admin-defined pricing
- ✅ Analytics dashboard for calculator usage tracking
- ✅ Dual-mode chat widget (AI + Live Admin support)
- ✅ 4 AI model integrations: Groq, OpenAI, DeepSeek, Gemini
- ✅ Admin-configured AI models with secure API key management
- ✅ User data collection (name, email, country) within chat flow
- ✅ Real-time message synchronization (2-second polling)
- ✅ Admin-to-user and user-to-admin message delivery
- ✅ Message persistence and chat history
- ✅ PDF export for chat conversations
- ✅ Admin LiveChat interface with real-time updates
- ✅ WebSocket-ready architecture for future enhancements
- ✅ Home page content management (Pixeloria Edge numbers, featured case studies)
- ✅ About page content management (team members, journey milestones)
- ✅ Dynamic content loading from admin portal to main website
- Advanced chat features (file sharing, emoji reactions)
- Chat analytics and reporting
- Mobile app integration
- Advanced AI model configurations and fine-tuning
- WebSocket upgrade from polling for enhanced performance