Creating an eShop website with Microsoft Copilot

I recently went through Microsoft Copilot training and we had a challenge at the end to use Copilot to build something. I chose the eShop challenge as it sounded like something I would actually build in a professional setting.

Instead of using ReactJS or any other JavaScript framework I decided to just go with a vanilla Python Flask website as I only had an hour or so to build AND present it. Being that I'm fairly versed in Flask and the Python ways of working, I figured that would get me pretty far.

I was pretty shocked at how easy it was to work with the AI on a back and forth chat to build out the project. It was almost like working with another dev on Slack, except faster.

I was able to complete and show off a bit during the presentation. Ask yourself then next time you are on a Zoom call, can I say "Pan Galactic Gargle Blaster" multiple times without messing up?

The README.md is presented below, you can look at the code in my repo with the following link:

By using Microsoft Copilot I feel like I could build almost anything, what do you need built?

If you have any questions or coments, feel free to reach out on Warpcast, or Twitter.

Have fun.

The Horse and Groom - Shop Cart Challenge

made 🛠️ with love 💖 on earth 🌍 by robots 🤖 supervised by humans 👥

Name and theme origination

https://hitchhikers.fandom.com/wiki/The_Horse_and_Groom

The Horse and Groom was the name of the pub close to Arthur Dent's house, in the village of Cottington. It was probably his local pub, as in the video game it was just down the lane from Arthur's house. The pub name was changed to The Red Lion in the 1981 television series.

Ford Prefect and Arthur use it for stocking up on necessary protein restoratives and muscle relaxants (alcohol and peanuts) before their journey through Hyperspace to the Vogon ship, which they hitch-hike onto using the Electronic Thumb.

This was made by Microsoft Copilot with directions from me.

NOT FOR PRODUCTION [seriously don't]

See link for challenge:

https://github.com/microsoft/CopilotHackathon/blob/main/challenges/eshop/eshop.md

The goal of this challenge is to develop a shop cart. The shop cart should allow users to add and remove products.

The topic selected is beer. You can use the beers.json file in the root of the eshop project to get the list of beers for building the Rest API.

Features

Create a Rest API with methods to:
- Get the beers list with page offset and limit.
- Get beer details by id.
- Search beers by name, description, tagline, food_pairing, price.
Create a list of products in the main page.
Create a search bar to filter the products.
Navigate to the description page when the user clicks on a product.
(Optional) Slicer to filter the products by price.
Create a shop cart.
- Add a product to the shop cart.
- Remove a product from the shop cart.
- Calculate the total price of the products in the shop cart.

We are using Python and Flask to build the Rest API. The front end is built using HTML, CSS, and JavaScript.

Screenshots

The main site

The cart loaded

Project Structure

eshop
- app.py
- beers.json
- static
  - style.css
- templates
  - base.html
  - beer.html
  - index.html
  - search.html
  - shopcart.html
- utils
  - shopcart.py
- venv
- requirements.txt
- Procfile
- runtime.txt
- README.md
- .gitignore

The app.py file contains the Rest API methods and the routes for the front end. The beers.json file contains the list of beers. The static folder contains the CSS file for styling. The templates folder contains the HTML files for the front end. The utils folder contains the shopcart.py file for managing the shop cart. The venv folder contains the virtual environment. The requirements.txt file contains the required packages. The Procfile and runtime.txt files are for deployment on Heroku. The README.md file contains the project description. The .gitignore file contains the files to be ignored by Git.