Tennis Balls Company

  • By
  • Posted on

Summary: A demo business-to-consumer website that sells tennis balls using a database.

Description: This project is an Express-based e-commerce web application that provides a simple storefront and administrative pages. It uses Express routes to handle product catalog browsing, product management, promotions, customer records, sales orders, and order details. Views are rendered with EJS templates. The app includes typical pages like home, catalog, cart/checkout, contact, help, privacy, and reporting screens for product, customer, and sales lists. There are four versions of this project: one using embedded JavaScript (EJS) with a MariaDB database, one using EJS with a SQLite3 database, one using React with a SQLite3 database, and one using TypeScript and React with a SQLite3 database. The MariaDB version is a school project, and the other versions are personal projects.

Dates:

  • School Project (1st version): 4/1/2024 – 6/14/2024
  • Personal Projects:
    • SQLite3 (2nd version): 11/11/2025 – 11/15/2025
    • Added automated tests and utility module (2nd version): 12/5/2025 – 12/9/2025
    • React (3rd version): 1/6/2026 – 1/25/2025
    • TypeScript (4th version): 2/1/2026 – 3/27/2026

Languages: HTML, JavaScript, EJS, TypeScript, CSS, and SQL

Skills:

  • Node.JS
  • Express
  • Routes
  • Views
  • Images
  • Layout
  • Dynamic content
  • Model-View-Controller framework
  • Databases
  • Error handling
  • Search capability
  • Input controls
  • Global and session variables
  • Shopping cart
  • Authentication
  • Checkout
  • Restrict non-admins from editing data
  • MariaDB
  • SQLite
  • Jest/Supertest
  • React

Files (Personal Projects):

How to Run (Personal Projects):

  • 2nd version
    1. Enter npm install in the terminal.
    2. Enter npm test in the terminal to run the tests
    3. Enter npm start in the terminal
    4. Open http://localhost:3039/ in a browser
    5. Edit database.db to adjust the data (see tlc.sql for tables)
  • 3rd version
    1. Open two terminals.
    2. In the backend directory, enter npm install in one terminal
    3. In the frontend directory, enter npm install in the other terminal
    4. Enter npm start in both terminals
    5. If React does not open another tab to the application, open http://localhost:3000/ in a browser
    6. Edit database.db to adjust the data (see tables.sql for tables)
  • 4th version
    • Open three terminals: one for the root, one for the backend, and one for the frontend
    • Enter npm install in each of the terminals
    • Enter npm run dev in the backend and frontend terminals
    • If React does not open another tab to the application, open http://localhost:3000/ in a browser
    • Edit database.db to adjust the data (see tables.sql for tables)

Repositories: