Dslabguy Interiors - Full Stack Web Application

A premium interior design and home furnishing website built with Node.js, Express, EJS, TailwindCSS, and MongoDB.

Features

Public Website

• Home Page: Hero section, featured projects, services overview, call-to-action
• Services Page: Detailed service listings with descriptions and features
• Projects Page: Filterable gallery with category filtering
• Project Details: Full project showcase with image carousel, before/after, and quote request
• About Page: Brand story, mission, values, and process timeline
• Contact Page: Contact form with email/phone/message fields

Admin Dashboard

• Authentication: Session-based login with secure password hashing
• Project Management: Full CRUD operations with image uploads via Cloudinary
• Service Management: Create, edit, delete services
• Testimonials Management: Manage client testimonials and ratings
• Message Management: View and manage contact form submissions
• Dashboard Stats: Overview of all content

Tech Stack

• Backend: Node.js, Express.js
• Database: MongoDB with Mongoose
• Templating: EJS
• Styling: TailwindCSS with JIT mode
• Image Hosting: Cloudinary
• Authentication: Express Session + bcrypt
• File Upload: Multer

Installation

Prerequisites

• Node.js v14+
• MongoDB (local or cloud)
• Cloudinary account (for image uploads)

Setup Steps

1. Clone/Extract the project

cd Dslabguy

2. Install dependencies

npm install

3. Configure environment variables (create .env file)

MONGODB_URI=mongodb://localhost:27017/dslabguy
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
SESSION_SECRET=your_session_secret
PORT=3000
NODE_ENV=development
ADMIN_USERNAME=admin
ADMIN_PASSWORD=changeMe123

4. Build TailwindCSS

npm run build-css

5. Start the development server

npm run dev

Visit http://localhost:3000 to access the website.

Default Admin Credentials

• Username: admin (from .env ADMIN_USERNAME)
• Password: changeMe123 (from .env ADMIN_PASSWORD)

⚠️ Change these immediately after first login!

Project Structure

/project-root
├── app.js                 # Main application file
├── package.json          # Dependencies
├── tailwind.config.js    # TailwindCSS configuration
├── postcss.config.js     # PostCSS configuration
├── config/               # Configuration files
│   ├── database.js       # MongoDB connection
│   ├── cloudinary.js     # Cloudinary setup
│   └── session.js        # Session configuration
├── models/               # Mongoose schemas
│   ├── Project.js
│   ├── Service.js
│   ├── Testimonial.js
│   ├── Message.js
│   └── AdminUser.js
├── controllers/          # Business logic
│   ├── projectController.js
│   ├── serviceController.js
│   ├── testimonialController.js
│   ├── contactController.js
│   └── authController.js
├── routes/               # Route definitions
│   ├── publicRoutes.js
│   ├── adminRoutes.js
│   └── authRoutes.js
├── views/
│   ├── partials/         # Header, footer, navbar
│   ├── public/           # Public-facing pages
│   └── admin/            # Admin dashboard pages
├── public/
│   ├── css/              # TailwindCSS output
│   ├── js/               # Frontend scripts
│   └── images/           # Static images

Available Scripts

# Start production server
npm start

# Start development server with auto-reload
npm run dev

# Build CSS from TailwindCSS
npm run build-css

# Watch for CSS changes
npm run watch-css

API Endpoints

Public API

• GET /api/projects - Get all projects
• GET /api/projects/featured - Get featured projects
• GET /api/projects/:id - Get single project
• GET /api/services - Get all services
• POST /api/contact - Submit contact form

Admin API (Protected)

• GET /admin/dashboard - Admin dashboard
• GET /admin/projects - View all projects
• POST /admin/projects - Create project
• POST /admin/projects/:id - Update project
• GET /admin/projects/delete/:id - Delete project
• Similar endpoints for services, testimonials, messages

Design Features

Premium Aesthetic

• Dark luxurious theme with gold accents
• Custom typography (Playfair Display, General Sans)
• Smooth animations and transitions
• Fully responsive design
• IntersectionObserver-based reveal animations

Colors

• Background: #0e0e0e (deep black)
• Foreground: #e7e4dd (warm stone)
• Accent: #c8a96a (brass gold)
• Muted: #9c8f7a (muted stone)

Animations

• Fade-up on scroll
• Stagger reveals
• Smooth hover effects
• Image zoom on hover
• Button transitions

Customization

Update Colors

Edit tailwind.config.js and :root CSS variables:

:root {
  --bg: #0e0e0e;
  --fg: #e7e4dd;
  --accent: #c8a96a;
  --muted: #9c8f7a;
}

Add Services

1. Go to Admin Dashboard
2. Click "Services"
3. Fill in title, description, icon, and features
4. Submit

Upload Projects

1. Go to Admin Dashboard
2. Click "Add Project"
3. Upload images (up to 10)
4. Fill in details and submit
5. Mark as featured if desired

Manage Testimonials

1. Go to Admin Dashboard
2. Click "Testimonials"
3. Add client testimonials with ratings

Performance Optimizations

• Lazy loading images
• Debounced scroll events
• Optimized animations with CSS transforms
• Minified TailwindCSS output
• Session store in MongoDB
• Cloudinary image optimization

Security Features

• Password hashing with bcrypt
• Session-based authentication
• Environment variable protection
• CSRF protection (implement in production)
• Input validation

Deployment

For Production

1. Install production dependencies:

npm install --production

2. Set NODE_ENV=production in .env

3. Ensure Cloudinary and MongoDB credentials are set

4. Deploy to:

   • Vercel/Netlify (Node.js support)
   • Heroku
   • AWS (EC2, Lambda)
   • DigitalOcean
   • Custom VPS

Example Vercel deploy:

npm install -g vercel
vercel

Troubleshooting

MongoDB Connection Failed

• Ensure MongoDB is running locally or MongoDB Atlas cluster is configured
• Check MONGODB_URI in .env

Images Not Uploading

• Verify Cloudinary credentials
• Check file size limits (max 10MB)
• Ensure supported formats (JPG, PNG, WebP)

TailwindCSS Not Applied

npm run build-css

Port Already in Use

# Use different port
PORT=3001 npm start

Future Enhancements

• Email notifications for contact forms
• Photo gallery with filters
• Blog section
• Client testimonials carousel
• Newsletter subscription
• Social media integration
• Multi-language support
• Payment integration for quotes
• Analytics dashboard

Support

For issues or questions:

1. Check the console for errors
2. Verify all environment variables are set
3. Ensure all dependencies are installed
4. Check MongoDB connection

License

MIT License

---

Built with ❤️ for Dslabguy Interiors