Student repository for exercises and testing for ITWEB300.

Patrick Frank, Instructor

Project Details

MoonShineExpress is a jewelry e-commerce web application built with a focus on modern web development practices. The application demonstrates a complete shopping experience with product browsing, cart management, checkout, and order tracking functionality.

How It Works

• Backend: Node.js with Express.js provides RESTful API endpoints for products and orders
• Frontend: Vanilla JavaScript for DOM manipulation and client-side rendering
• Data Storage: JSON file-based persistence for products and orders
• State Management: Client-side state management using sessionStorage for cart data
• Responsive Design: Mobile-friendly interface with dark/light mode toggle

Key Features

• Product catalog with images and descriptions
• Shopping cart with quantity controls
• Tax calculation and order summary
• Checkout process with customer information collection
• Order confirmation and tracking system
• Dark mode toggle with localStorage persistence

Technology Stack

• Server: Node.js, Express.js
• Frontend: HTML5, CSS3, Vanilla JavaScript (no frameworks)
• Data Storage: JSON files for product and order data
• Deployment: Hosted on Render.com
• Development Environment: Visual Studio Code

The application demonstrates RESTful API design principles and full-stack JavaScript development practices in a project focused on e-commerce functionality.

Steps to Complete

1. Setup Environment

   • Install Node.js and npm if not already installed
   • Clone this repository to your local machine
   • Run npm install to install required dependencies

2. Understand the Codebase

   • Review the server.js file to understand the existing API endpoints
   • Examine the main.js file to understand frontend functionality
   • Explore the data structure in the products.json and orders.json files

3. Run the Application

   • Start the server with npm start or node server.js
   • Open the application in your browser at http://localhost:3000

4. Opportunities for Improvement

   • Implement product search functionality with real-time filtering
   • Add search categories with buttons
   • Create an admin dashboard for order management
   • Add user authentication functionality
   • Upgrade dark mode functionality to be user-specific

5. Testing

   • Test all user workflows (browsing, adding to cart, checkout)
   • Ensure proper error handling and validation
   • Verify responsive design works on different screen sizes
   • Test dark mode functionality

6. Documentation and Submission

   • Document any changes or additions you've made
   • Create a detailed explanation of your implementation
   • Deploy your completed application to Render.com
   • Submit your work through the specified channels for grading