Team Magic Queries

Our project is updating a local game store's (Merlyn's) card buying system.

We are going to improve Merlyn's store's website for customers purchasing Magic: The Gathering cards for pickup, currently their ordering system is inconvenient and requires a lot of unnecessary steps, it needs to be updated to current, modern-day standards which will improve business and customer interactions.

Project Goals:

• Simplify the process for finding cards in stock. This includes searching for cards by name(with auto-complete), color, type, card number, etc.
• Display the cards with images.
• A submission form for customers to directly email Merlyn's from the web page with the cards already populated in the email in the required Merlyn's format.
• Employees can continue working with the current inventory spreadsheets.

These are the major things that we are looking to do for Mr. Waite. However, during the senior project/capstone process we could add or change some of the goals to improve the user experience and take into account what Mr. Waite would like to change or ask for improvements.

Installation

Prerequisites

• Astro extension
• Tailwind CSS IntelliSense extension

Installation Steps

In the codespace terminal:

• Change working directory to magic-queries by typing: cd project-pitch-magic-queries-clone-main/magic-queries
• Type "npm run dev"

Functionality

Use the search bar to lookup cards by name, this is using the Scryfall API. We are working on linking the game store inventory sheets to the information that comes from Scryfall. Right now this search page will display results from all magic cards, in the near future it will only display cards in stock at Merlyn's

License

See LICENSE.txt

Old Readme file from the inner folders

Astro Starter Kit: Basics

npm create astro@latest -- --template basics

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.