A professional portfolio website for DJs with an integrated admin panel for managing content and responding to inquiries. This full-stack application showcases music, events, a gallery, and offers contact functionality.
- Responsive Design - Optimized for all device sizes
- Music Showcase - Display tracks with interactive audio player
- Image Gallery - Categorized gallery with modal view
- Contact Form - Integrated with email notifications
- Admin Panel - Secure access to manage inquiries
- Animations - Smooth scroll reveal and transition effects
- Modern UI - Clean, professional interface with Tailwind CSS and shadcn/ui
- React with TypeScript
- Vite - Fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - Unstyled UI components
- Lucide Icons - Beautiful SVG icons
- React Router - Client-side routing
- React Query - Data fetching and caching
- Node.js with Express
- MongoDB with Mongoose
- AdminJS - Admin panel framework
- Nodemailer - Email sending functionality
- Express Session - Session management
| FredonBytes | DJ Portfolio Preview |
|---|---|
 |
 |
 |
 |
/
├── backend/ # Backend Express application
│ ├── components/ # AdminJS UI components
│ ├── config/ # Database configuration
│ ├── models/ # Mongoose schemas
│ ├── utils/ # Backend utilities
│ └── server.js # Main server file
├── src/
│ ├── components/ # React components
│ │ ├── contact/ # Contact-related components
│ │ └── ui/ # Reusable UI components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Frontend utilities
│ ├── pages/ # Route pages
│ └── types/ # TypeScript type definitions
├── public/ # Static assets
└── ...config files
- Node.js 18+ and npm/yarn
- MongoDB database
- Clone the repository
git clone https://github.com/patrik-fredon/dj-portfolio.git
cd dj-portfolio- Install dependencies
# Install frontend dependencies
npm install
# Install backend dependencies
cd backend
npm install
cd ..- Environment Setup
Create .env files based on the examples:
Frontend .env:
VITE_API_URL=http://localhost:5000
VITE_ADMIN_URL=http://localhost:5000/admin
Backend .env:
MONGODB_URI=your_mongodb_connection_string
PORT=5000
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=secure_password
SMTP_HOST=smtp.your-provider.com
SMTP_PORT=587
SMTP_USER=your-email@example.com
SMTP_PASS=your-email-password
SESSION_SECRET=your-session-secret
- Run the application
# Run frontend and backend concurrently in development mode
npm run devThe frontend will be available at http://localhost:8080 and the backend at http://localhost:5000
| Endpoint | Method | Description |
|---|---|---|
/api/contact |
POST | Submit a contact message |
/admin |
GET | Admin panel interface |
/ |
GET | API health check |
The application includes a contact form that:
- Validates user input
- Stores messages in MongoDB
- Sends email notifications to administrators
- Can be managed through the admin panel
Email sending is handled by the mailer.js utility using Nodemailer.
The application features an admin panel powered by AdminJS:
- Message management
- Status tracking (unread/read/replied)
- Filtering and searching messages
- Authentication system
Access the admin panel at /admin with the credentials set in your .env file.
- CSRF protection
- Content Security Policy
- Secure session cookies
- Rate limiting
- Input validation
- Environment variable protection
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Patrik Fredon - FredonBytes
© 2025 FredonBytes | Bringing your vision to life