Project PC Build

A full-stack web application showcasing PC build configurations with detailed specifications, product store, and contact management. Built with Node.js, Express, and MongoDB.

Preview: https://youtu.be/qWb8wEY0bb0

Features

• Home Showcase - Display featured PC builds with specifications and images
• Product Store - Browse and explore available PC components
• Specs Page - Detailed breakdown of build specifications
• Contact Form - Customer inquiry management
• Responsive Design - Mobile-friendly interface with SASS styling
• Database-Driven - Content management via MongoDB
• Security - Helmet.js for HTTP headers, CORS support
• Code Quality - ESLint configuration with Airbnb standards

Tech Stack

• Backend: Node.js with Express.js
• Frontend: EJS templates, HTML5, CSS3
• Styling: SASS/SCSS
• Database: MongoDB with Mongoose ODM
• Security: Helmet.js, CORS
• Development: Nodemon, Concurrently
• Linting: ESLint with Airbnb config

Project Structure

Project-PC-Build/
├── app.js                 # Express app entry point
├── package.json           # Project dependencies
├── models/
│   ├── basic_paragraph.js # Content schema
│   └── new_adv_model.js   # Additional models
├── routes/
│   └── router.js          # API and page routes
├── views/                 # EJS templates
│   ├── index.ejs          # Home page
│   ├── contact.ejs        # Contact page
│   ├── specs.ejs          # Specifications page
│   ├── store.ejs          # Product store
│   └── not_found.ejs      # 404 error page
├── public/
│   ├── css/               # Compiled CSS stylesheets
│   ├── js/                # Client-side JavaScript
│   └── video/             # Media assets
└── sass/                  # SASS source files

Installation

1. Clone the repository:

   git clone https://github.com/YunruKnowledge/Project-PC-Build.git
   cd Project-PC-Build

2. Install dependencies:

   npm install

3. Configure environment variables: Create a .env file in the root directory:

   MONGODB_URI=your_mongodb_connection_string
   PORT=5000
   NODE_ENV=development
   

Scripts

• npm run dev - Start development server with SASS compiler and auto-reload
• npm run launch - Run the app with Nodemon for hot reloading
• npm run sass - Watch and compile SASS files to CSS
• npm run lint - Run ESLint to check code quality

Getting Started

1. Set up MongoDB:

   • Ensure MongoDB is running locally or use MongoDB Atlas
   • Update MONGODB_URI in .env

2. Start development:

   npm run dev

   This will start the Express server and watch for SASS changes.

3. Access the application: Open your browser and navigate to http://localhost:5000

Available Routes

• /home - Home page with featured builds
• /contact - Contact form page
• /specs - Specifications showcase
• /store - Product store
• /* - 404 error page

Database Schema

The application uses MongoDB collections with Mongoose schemas:

• basic_paragraph - Content data for home page including:
  • Banner text and images
  • Build specifications
  • Product descriptions
  • Sponsor information

Development

SASS Compilation

SASS files are automatically compiled to CSS during development:

npm run sass

Code Linting

Maintain code quality with ESLint:

npm run lint

Dependencies

• Express - Web framework
• Mongoose - MongoDB ODM
• EJS - Template engine
• Helmet - Security middleware
• CORS - Cross-origin resource sharing
• Dotenv - Environment variable management

Security Features

• HTTP headers hardening with Helmet.js
• CORS enabled for cross-origin requests
• CSP (Content Security Policy) configuration
• Cross-origin embedder policy settings

Note

Last update: January 2023

Doc generated by AI: March 2026