Rad Spidey Production - Game Development Website

Overview

This project is a game developmsst production website called "Rad Spidey Production." It showcases games, services, team members, and includes a contact form connected to a backend API.

---

How It Works

• The frontend is built with HTML, CSS, and JavaScript.
• The homepage features a hero section with a background image and call-to-action button.
• The "Our Games" section displays game cards with images, descriptions, and "View More" buttons that open the respective game pages in new tabs.
• The "Services" section highlights the game development services offered.
• The "About Us" section introduces the team members.
• The contact form sends messages to the backend API.
• The navigation bar includes smooth scrolling and a responsive hamburger menu for mobile devices.
• The site includes a scroll-to-top button and a preloader animation for better user experience.

---

Prerequisites

• Node.js installed on your system. You can download it from https://nodejs.org/.
• npm (comes with Node.js).
• A static server tool for serving the frontend, such as live-server or http-server.

---

Setup and Running the Project

1. Serve the Frontend

You need to serve the frontend directory using a static server.

• Install live-server globally if you don't have it:

npm install -g live-server

• Navigate to the frontend directory:

cd "c:/Bells University IT/ICT 235 Project (Mr.Muhammed)/2ND Semester/Game Development Production (FINAL)/Frontend"

• Start the server:

live-server

This will open the frontend in your default browser with live reload enabled.

2. Setup and Run the Backend

• Open a new terminal window.
• Navigate to the backend directory:

cd "c:/Bells University IT/ICT 235 Project (Mr.Muhammed)/2ND Semester/Game Development Production (FINAL)/Backend"

• Install backend dependencies:

npm install

• Start the backend server:

node server.js

The backend server will start on http://localhost:5000.

---

Usage

• Open the frontend served by live-server in your browser.
• Navigate through the site using the navigation bar.
• Use the "View More" buttons in the "Our Games" section to open game pages in new tabs.
• Use the contact form to send messages. The form submits data to the backend API at http://localhost:5000/api/contact.
• The site includes smooth scrolling, a responsive hamburger menu for mobile, a scroll-to-top button, and a preloader animation.

---

Project Structure

/Frontend
  - index.html
  - styles.css
  - scripts.js
  - assets/ (images and other static assets)

/Backend
  - server.js (main backend server)
  - controllers/ (API controllers)
  - models/ (database models)
  - routes/ (API routes)
  - middleware/ (middleware functions)
  - package.json (backend dependencies)
  - README.md (this file)

---

Notes

• Ensure the backend server is running before submitting the contact form to avoid errors.
• The frontend expects the backend API to be available at http://localhost:5000.
• You can customize the port or other settings in server.js if needed.

---

Contact

For any questions or support, please contact the development team.

---

Thank you for using Rad Spidey Production!