PixelVault V2

A full-stack digital asset marketplace for discovering, filtering, and purchasing creative digital assets.

📌 Overview

PixelVault V2 is a full-stack web application designed as a digital marketplace for creative assets. The platform allows users to explore and discover different categories of digital content, including:

• Photography
• Graphics
• Illustrations
• Templates
• Videos
• Audio assets

The application provides an interactive frontend for browsing and filtering assets, along with a backend API for handling application logic and database operations.

PixelVault V2 is deployed using AWS EC2 with a Node.js and Express.js backend, a React and Vite frontend, and a MySQL database.

---

🏗️ Architecture

The application follows a client-server architecture:

┌─────────────────────┐
│                     │
│   React + Vite      │
│      Frontend       │
│                     │
└──────────┬──────────┘
           │
           │ HTTP Requests
           │
           ▼
┌─────────────────────┐
│                     │
│  Node.js + Express  │
│      Backend        │
│                     │
└──────────┬──────────┘
           │
           │ Database Queries
           │
           ▼
┌─────────────────────┐
│                     │
│       MySQL         │
│      Database       │
│                     │
└─────────────────────┘

Deployment Architecture

User
  │
  ▼
AWS EC2 Instance
  │
  ├── React Frontend
  │      Port: 5173
  │
  ├── Express Backend
  │      Port: 3000
  │
  └── MySQL Database
         Port: 3306

PM2 is used to manage and keep the frontend and backend processes running.

---

🛠️ Tech Stack

Frontend

• React — User interface development
• Vite — Frontend build tool and development environment
• React Router — Client-side routing and navigation
• CSS — Application styling

Backend

• Node.js — JavaScript runtime environment
• Express.js — Backend web framework
• PM2 — Production process management

Database

• MySQL — Relational database management system

Cloud & Infrastructure

• AWS EC2 — Cloud virtual machine hosting
• Ubuntu Linux — Server operating system
• AWS Security Groups — Network access control
• SCP — Secure file transfer
• mysqldump — Database export and migration

---

✨ Key Features

• Browse a marketplace of digital creative assets
• Explore multiple asset categories
• Filter and search available content
• View asset information
• Purchase digital assets
• Persistent database storage using MySQL
• REST API-based communication between frontend and backend
• Cloud deployment on AWS EC2
• Process management using PM2

---

🚀 Deployment & Setup Guide

Prerequisites

Before deploying PixelVault V2, ensure that the following software and services are available:

• Node.js
• npm
• MySQL Server
• PM2
• AWS EC2 instance running Ubuntu
• SSH access to the EC2 instance
• AWS Security Group configured for the required ports

---

1. Connect to the EC2 Instance

Connect to your AWS EC2 instance using SSH:

ssh -i your-key.pem ubuntu@your-ec2-public-ip

Replace:

• your-key.pem with your EC2 private key file
• your-ec2-public-ip with the public IP address or DNS of your EC2 instance

---

🗄️ Database Initialization

2. Create Swap Memory

Free-tier or memory-constrained EC2 instances can experience memory limitations while running services such as MySQL, Node.js, and the operating system simultaneously.

To provide additional virtual memory, create a persistent 2 GB swap file.

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

To ensure that the swap file remains active after the server restarts:

echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

Verify the available memory and swap:

free -h

---

3. Create the Database

Log in to MySQL as the root user:

sudo mysql -u root -p

Create the PixelVault database:

CREATE DATABASE pixelvault;

---

4. Create a Dedicated Database User

Create a dedicated MySQL user for the application:

CREATE USER 'pixeluser'@'localhost'
IDENTIFIED WITH caching_sha2_password
BY 'your_password';

Grant the required privileges:

GRANT ALL PRIVILEGES ON pixelvault.* TO 'pixeluser'@'localhost';

Apply the privilege changes:

FLUSH PRIVILEGES;

Exit MySQL:

EXIT;

Important: Replace your_password with a strong and secure password. Do not commit real credentials to version control.

---

📦 Database Migration

5. Export the Local Database

On the local development machine, export the database schema and records using mysqldump:

mysqldump -u root -p pixelvault > pixelvault_dump.sql

This creates a SQL dump file named:

pixelvault_dump.sql

---

6. Transfer the Database Dump to EC2

Securely copy the database dump to the EC2 instance using scp:

scp -i your-key.pem pixelvault_dump.sql ubuntu@your-ec2-public-ip:/home/ubuntu/

---

7. Import the Database on EC2

After connecting to the EC2 instance, import the SQL dump:

mysql -u root -p pixelvault < pixelvault_dump.sql

Alternatively, if the dump was uploaded to another location:

mysql -u root -p pixelvault < /path/to/pixelvault_dump.sql

Verify that the tables were successfully restored:

mysql -u root -p

Then:

USE pixelvault;
SHOW TABLES;

---

⚙️ Environment Configuration

8. Configure the Backend Environment Variables

Create a .env file inside the /backend directory:

PORT=3000
DB_HOST=localhost
DB_USER=pixeluser
DB_PASSWORD=your_password
DB_NAME=pixelvault

The environment variables are used to configure the backend server and database connection.

Variable Description

Variable	Description
PORT	Port on which the Express backend runs
DB_HOST	MySQL database host
DB_USER	MySQL application username
DB_PASSWORD	Password for the MySQL user
DB_NAME	Name of the PixelVault database

Security Note: The .env file should be added to .gitignore to prevent sensitive credentials from being pushed to GitHub.

Example:

.env
node_modules/
dist/

---

🖥️ Backend Setup

9. Install Backend Dependencies

Navigate to the backend directory:

cd backend

Install all required dependencies:

npm install

---

10. Start the Backend Using PM2

Start the Express server:

pm2 start server.js --name "pixelvault-backend"

Check the process status:

pm2 status

View backend logs:

pm2 logs pixelvault-backend

Restart the backend when necessary:

pm2 restart pixelvault-backend

---

🎨 Frontend Setup

11. Install Frontend Dependencies

Navigate to the frontend directory:

cd ../frontend

Install the dependencies:

npm install

---

12. Build the React Application

Create a production build:

npm run build

This generates the production-ready static files inside the:

dist/

directory.

---

13. Start the Frontend Using PM2

Serve the production build on port 5173:

pm2 start npx --name "pixelvault-frontend" -- serve -s dist -l 5173

Check the PM2 processes:

pm2 status

The expected result should include:

pixelvault-backend
pixelvault-frontend

---

🔄 PM2 Persistence

To ensure that the application processes restart automatically after the EC2 instance reboots:

pm2 startup

PM2 will provide a command. Run the command displayed in the terminal.

Then save the current process list:

pm2 save

This ensures that both the frontend and backend can be restored automatically after a system restart.

---

🌐 Networking Configuration

14. Configure Express to Accept External Requests

The backend server should listen on all available network interfaces.

Example:

app.listen(process.env.PORT || 3000, '0.0.0.0', () => {
  console.log(`Server running on port ${process.env.PORT || 3000}`);
});

Binding to 0.0.0.0 allows the Express application to accept external requests.

---

15. Configure CORS

If the frontend and backend run on different origins or ports, configure CORS in the Express backend.

Example:

const cors = require('cors');

app.use(cors());

For production, it is recommended to restrict requests to the frontend origin:

app.use(
  cors({
    origin: 'http://your-ec2-public-ip:5173'
  })
);

Replace the example URL with the actual frontend URL.

---

🔐 AWS Security Group Configuration

The AWS EC2 Security Group must allow inbound traffic to the ports required by the application.

Port	Protocol	Purpose
22	TCP	SSH access
3000	TCP	Express Backend API
5173	TCP	React Frontend
3306	TCP	MySQL — only if external database access is required

Security Recommendation: Port 3306 should generally not be publicly exposed. Keep MySQL accessible only from the EC2 instance whenever possible.

For the application to work externally, ensure that the Security Group allows inbound access to:

Port 3000 → Backend API
Port 5173 → Frontend

---

📂 Recommended Project Structure

PixelVault-V2/
│
├── backend/
│   ├── node_modules/
│   ├── routes/
│   ├── controllers/
│   ├── models/
│   ├── server.js
│   ├── package.json
│   └── .env
│
├── frontend/
│   ├── src/
│   ├── public/
│   ├── dist/
│   ├── package.json
│   └── vite.config.js
│
├── pixelvault_dump.sql
├── README.md
└── .gitignore

The exact folder structure may vary depending on the implementation of PixelVault V2.

---

🧩 Key Challenges Encountered & Resolutions

1. EC2 Memory Constraints and OOM Crashes

Problem

Free-tier or memory-constrained EC2 instances may provide only 1 GB of RAM. Running the Ubuntu operating system, MySQL, Node.js processes, and other services simultaneously can exhaust the available memory.

This can result in:

• MySQL failing to start
• Out-of-Memory (OOM) errors
• Processes being unexpectedly terminated
• Slow application performance

Solution

A persistent 2 GB swap file was created to provide additional virtual memory.

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

The swap file was also configured in /etc/fstab so that it remains active after system reboots.

Key Learning

Swap memory is not a replacement for physical RAM, but it can provide important memory headroom for small cloud instances and prevent services from immediately failing when RAM usage temporarily increases.

---

2. MySQL Authentication and Modern Defaults

Problem

MySQL installations on Ubuntu can use authentication configurations that prevent the application from connecting in the expected way.

The Node.js backend requires a dedicated database account with credentials that can be used by the MySQL client library.

Solution

A dedicated application user was created:

CREATE USER 'pixeluser'@'localhost'
IDENTIFIED WITH caching_sha2_password
BY 'your_password';

The user was granted privileges only for the PixelVault database:

GRANT ALL PRIVILEGES ON pixelvault.* TO 'pixeluser'@'localhost';

Key Learning

Using a dedicated database account is preferable to connecting an application directly as the MySQL root user. It improves separation between administrative and application-level access.

---

3. Database Migration

Problem

The cloud-hosted EC2 instance initially did not contain the database records available in the local development environment.

The application required both the database structure and existing records to function correctly after deployment.

Solution

The local database was exported using:

mysqldump -u root -p pixelvault > pixelvault_dump.sql

The resulting SQL dump was securely transferred to the EC2 instance using scp:

scp -i your-key.pem pixelvault_dump.sql ubuntu@your-ec2-public-ip:/home/ubuntu/

The database was then restored using:

mysql -u root -p pixelvault < pixelvault_dump.sql

Key Learning

Database migration is a critical deployment step. The application code alone is often insufficient because relational applications also depend on database schemas, relationships, and existing data.

---

4. Networking and External Connectivity

Problem

The application initially failed to respond to requests from outside the EC2 server.

Possible causes included:

• Express binding only to localhost
• Missing AWS Security Group rules
• Frontend-backend communication issues
• Cross-Origin Resource Sharing restrictions

Solution

The Express server was configured to bind to:

0.0.0.0

The AWS Security Group was configured to allow the required inbound ports:

3000 → Backend API
5173 → Frontend

CORS middleware was also configured to allow the frontend to communicate with the backend.

Key Learning

Successful cloud deployment requires correct configuration across multiple layers:

1. Application server binding
2. Operating system networking
3. Cloud firewall or Security Group rules
4. Browser security and CORS policies

A problem at any one of these layers can prevent the application from functioning correctly.

---

🔍 Troubleshooting

Check PM2 Processes

pm2 status

---

View All Application Logs

pm2 logs

---

View Backend Logs

pm2 logs pixelvault-backend

---

View Frontend Logs

pm2 logs pixelvault-frontend

---

Restart All PM2 Processes

pm2 restart all

---

Check Available Memory

free -h

---

Check Active Swap

swapon --show

---

Check Whether MySQL Is Running

sudo systemctl status mysql

Restart MySQL if required:

sudo systemctl restart mysql

---

Check Whether Port 3000 Is Listening

sudo ss -tulpn | grep :3000

---

Check Whether Port 5173 Is Listening

sudo ss -tulpn | grep :5173

---

🔄 Updating the Application

After making changes to the application, the deployment can generally be updated using the following process.

Backend Update

cd backend
npm install
pm2 restart pixelvault-backend

Frontend Update

cd frontend
npm install
npm run build
pm2 restart pixelvault-frontend

Check the updated processes:

pm2 status

---

🔒 Security Recommendations

Before using the application in a production environment, consider the following improvements:

• Use strong database passwords
• Never commit .env files to GitHub
• Restrict MySQL access to trusted hosts
• Do not publicly expose MySQL port 3306 unless absolutely necessary
• Configure CORS to allow only trusted frontend origins
• Use HTTPS for encrypted communication
• Place the application behind a reverse proxy such as Nginx
• Use a domain name instead of relying directly on an EC2 IP address
• Regularly update Ubuntu packages and application dependencies
• Follow the principle of least privilege for database users
• Enable proper logging and monitoring

---

🛣️ Future Improvements

Potential improvements for future versions of PixelVault include:

• User authentication and authorization
• Secure payment gateway integration
• Shopping cart functionality
• Wishlist and favorites
• Advanced search functionality
• Improved category-based filtering
• User profiles
• Asset upload functionality for creators
• Order history
• Admin dashboard
• Image optimization and CDN integration
• Object storage using Amazon S3
• Nginx reverse proxy
• HTTPS using SSL/TLS certificates
• CI/CD deployment pipeline
• Docker containerization
• Automated database backups
• Monitoring and alerting

---

📝 Deployment Summary

The PixelVault V2 deployment process involved:

1. Creating and configuring an AWS EC2 instance.
2. Installing and configuring MySQL.
3. Creating a persistent 2 GB swap file to address memory limitations.
4. Creating the pixelvault database.
5. Creating a dedicated pixeluser MySQL account.
6. Migrating the local database using mysqldump.
7. Securely transferring the database dump using scp.
8. Restoring the database on the EC2 instance.
9. Configuring backend environment variables.
10. Installing backend dependencies.
11. Running the Express backend using PM2.
12. Building the React frontend for production.
13. Serving the frontend using PM2.
14. Configuring Express networking and CORS.
15. Opening the required ports through the AWS Security Group.
16. Configuring PM2 persistence for automatic process recovery.

---

📄 License

This project is currently intended for educational and development purposes.

---

👨‍💻 Project

PixelVault V2 Full-Stack Digital Asset Marketplace