DEV Community

Cover image for I built a cute e-shop entirely in Python
Brooke Myers
Brooke Myers

Posted on • Originally published at

I built a cute e-shop entirely in Python

I'm pretty new to web development and am still learning HTML, CSS and JS. I work for Anvil, a platform that allows you to build and deploy full-stack web apps with only Python. It's great for someone like me with an ML background and no web dev experience.

I'm learning HTML and CSS by styling Anvil apps, so I built a fake online shop using Anvil and tried to make it as pretty as possible with my limited CSS knowledge. Check it out and let me know what you think!

GIF of shop app

Styling Python Components

Anvil is a drag-and-drop web app builder where every UI component is a Python object. I styled some of these components with CSS by applying a role to them.

For example, the header images in the app are ColumnPanels styled with a CSS role.

.anvil-role-header-photo {
  background: url(_/theme/header.jpg);
  min-height: 700px;
  background-attachment: fixed;
  background-size: cover;
Enter fullscreen mode Exit fullscreen mode

TextBoxes and TextAreas have a solid blue border and items in the Cart have a top and bottom border added.

But for someone who has little experience with CSS, it wasn't too difficult to make an Anvil app look unique!

Built-in Integrations

Purchases in my app are made through Stripe which is already integrated in Anvil, so I didn't have to do much work there. I just added this to my client-side Python:

charge = stripe.checkout.charge(amount=self.subtotal*100,
                                      title="Cupcakes & Co.",
Enter fullscreen mode Exit fullscreen mode

Google services are also already built-in to Anvil, so I added a Google map to the Contact page with a marker to match the theme.

Image = GoogleMap.LatLng(40.7128, -74.0060)
    self.map_1.zoom = 15
    icon = GoogleMap.Icon(url="_/theme/maps-icon.png")
    self.marker = GoogleMap.Marker(animation=GoogleMap.Animation.DROP, 
                              position=GoogleMap.LatLng(40.7128, -74.0060),
                              icon = icon)
Enter fullscreen mode Exit fullscreen mode

You can check out the source code here!

Top comments (1)

chocolatybrown profile image

It looks better on desktop than on mobile