Mio-Spaiz Interior Development - Complete Web

Portal

Complete System Package

Welcome! You now have a complete, professional web portal for your interior design
business.

What’s Included

1. Frontend Website ([Link])

Modern, responsive React website

Your logo integrated

Enquiry form

Portfolio showcase

Services listing

Beautiful UI with teal & yellow theme

2. Backend API ([Link])

[Link] + Express API

MongoDB database

JWT authentication

File upload support

Complete CRUD operations

3. Admin Dashboard ([Link])

React admin panel

Manage enquiries, projects, services

User management
 Statistics dashboard

Secure authentication

QUICK START GUIDE

Prerequisites
Install these first:

1. [Link] (v16+): [Link]

2. MongoDB (local or Atlas): [Link]

Step-by-Step Setup

STEP 1: Extract All Files

unzip [Link]
unzip [Link]
unzip [Link]

You should now have three folders:

mio-spaiz-frontend/
mio-spaiz-backend/
mio-spaiz-admin/

STEP 2: Setup Backend (Do this FIRST!)

# Navigate to backend
cd mio-spaiz-backend

# Install dependencies
npm install

# Create environment file

cp .[Link] .env

# Edit .env file with your settings (use notepad/text editor)

# Set MONGODB_URI to your MongoDB connection string
 # Seed the database with sample data
npm run seed

# Start the server

npm run dev

Backend should now be running at: [Link]

Important: Keep this terminal window open!

STEP 3: Setup Frontend Website

Open a NEW terminal window:

# Navigate to frontend
cd mio-spaiz-frontend

# Install dependencies
npm install

# Create environment file

cp .[Link] .env

# Start the website

npm start

Website should now be running at: [Link]

Important: Keep this terminal window open too!

STEP 4: Setup Admin Dashboard

Open ANOTHER NEW terminal window:

# Navigate to admin
cd mio-spaiz-admin

# Install dependencies
npm install

# Create environment file

cp .[Link] .env

# Start the admin panel

PORT=3001 npm start
 Admin dashboard should now be running at: [Link]

LOGIN CREDENTIALS
After running npm run seed in the backend, use these credentials to login to admin
panel:

Admin Account:

Username: admin

Password: admin123

Editor Account:

Username: editor

Password: editor123

IMPORTANT: Change these passwords immediately in production!

Testing Your System

1. Test the Public Website

Open: [Link]

Browse the site

Fill out the contact form

Submit an enquiry

2. Test the Admin Dashboard

Open: [Link]

Login with: admin / admin123

Check the dashboard

View the enquiry you just submitted!

Add a new project

 Manage services

3. Test the Backend API

Open: [Link]

You should see: {"status":"OK"}

System Architecture

┌─────────────────┐
│ Public Website │ (Port 3000)
│ (Frontend) │ React + Tailwind
└────────┬────────┘
│
│ HTTP Requests
▼
┌─────────────────┐
│ Backend API │ (Port 5000)
│ ([Link] + Express) │
└────────┬────────┘
│
│ Database Queries
▼
┌─────────────────┐
│ MongoDB │
│ (Database) │
└─────────────────┘
▲
│
┌─────────────────┐
│ Admin Dashboard │ (Port 3001)
│ (React App) │
└─────────────────┘

Project Structure

mio-spaiz-portal/
│
├── mio-spaiz-frontend/ # Public website
│ ├── src/
 │ │ ├── components/ # React components
│ │ ├── [Link] # Main app
│ │ └── [Link] # Styles
│ ├── public/
│ │ └── [Link] # Your logo
│ └── [Link]
│
├── mio-spaiz-backend/ # API Server
│ ├── models/ # Database models
│ ├── routes/ # API routes
│ ├── middleware/ # Auth middleware
│ ├── [Link] # Entry point
│ └── [Link]
│
└── mio-spaiz-admin/ # Admin panel
├── src/
│ └── [Link] # Admin app
└── [Link]

Configuration Files

Backend (.env)

MONGODB_URI=mongodb://localhost:27017/mio-spaiz
PORT=5000
JWT_SECRET=change-this-to-a-random-string

Frontend (.env)

REACT_APP_API_URL=[Link]

Admin (.env)

REACT_APP_API_URL=[Link]

Common Issues & Solutions

Issue: “Port already in use”

Solution:

Backend: Change PORT in backend/.env

Frontend: Run with PORT=3002 npm start

Admin: Run with PORT=3003 npm start

Issue: “Cannot connect to MongoDB”

Solution:

Make sure MongoDB is running: mongod

Or use MongoDB Atlas (cloud) - update MONGODB_URI

Issue: “Network Error” in frontend

Solution:

Make sure backend is running on port 5000

Check REACT_APP_API_URL in .env files

Check browser console for errors

Issue: “Module not found”

Solution:

Delete node_modules folder

Run npm install again

DEPLOYMENT TO PRODUCTION

Backend Deployment (Heroku/DigitalOcean)

# Set environment variables

MONGODB_URI=your-mongodb-atlas-uri
JWT_SECRET=very-long-random-secret
NODE_ENV=production

# Deploy
git push heroku main
Frontend Deployment (Vercel/Netlify)

# Build
npm run build

# Deploy build folder

# Update REACT_APP_API_URL to production API

Database (MongoDB Atlas)

1. Create free account: [Link]

2. Create cluster

3. Get connection string

4. Update MONGODB_URI in backend .env

Features Checklist

Public Website
Hero section

About page

Services listing (dynamic)

Portfolio showcase (dynamic)

Contact form (working)

Responsive design

Logo integrated

Admin Dashboard
Secure login

Dashboard with stats

Manage enquiries

Manage projects (CRUD)

 Manage services (CRUD)

Manage users

File upload

Backend API
User authentication (JWT)

Enquiry endpoints

Project endpoints

Service endpoints

File upload

Role-based access

Database models

Learning Resources

React
Official Docs: [Link]

Tutorial: [Link]

[Link] & Express

[Link]: [Link]

Express: [Link]

MongoDB
Docs: [Link]

University: [Link]

Tailwind CSS
Docs: [Link]
 Support & Help
If you need help:

1. Check the logs: Look at terminal output for errors

2. Read README files: Each package has its own README

3. Check .env files: Make sure all environment variables are set

4. MongoDB: Ensure it’s running and accessible

Security Checklist for Production

Change all default passwords

Use strong JWT_SECRET (50+ random characters)

Use MongoDB Atlas (not local MongoDB)

Enable HTTPS

Set NODE_ENV=production

Disable CORS for specific domains only

Regular backups of database

Keep dependencies updated

Next Steps
1. Customize: Update colors, text, images

2. Add Content: Add your real projects and services

3. Test: Test all features thoroughly

4. Deploy: Deploy to production

5. Monitor: Set up monitoring and analytics

6. Backup: Regular database backups

 Customization Guide

Change Colors
Edit [Link] in frontend and admin:

colors: {
'mio-teal': { /* your colors */ },
'mio-yellow': { /* your colors */ }
}

Update Logo
Replace public/[Link] in:

mio-spaiz-frontend/public/[Link]

mio-spaiz-admin/public/[Link]

Add/Edit Services
1. Login to admin panel

2. Go to Services

3. Add/Edit services

Add Projects
1. Login to admin panel

2. Go to Projects

3. Add new project

4. Upload images

You’re All Set!

You now have a complete, professional interior design web portal!

What You Can Do:

Accept enquiries from customers Showcase your portfolio Manage content
via admin panel Add/remove projects and services Handle multiple admin users
Happy Building!

Version: 1.0.0
Created: 2026
Built For: Mio-Spaiz Interior Development

Technical Support
For technical questions about setup:

Backend: Check mio-spaiz-backend/[Link]

Frontend: Check mio-spaiz-frontend/[Link]

Admin: Check mio-spaiz-admin/[Link]

Email: support@[Link]

Enjoy your new web portal!