DEV Community

loading...
Cover image for I built a cute e-shop entirely in Python

I built a cute e-shop entirely in Python

bcm628 profile image Brooke Myers Originally published at anvil.works ・2 min read

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,
                                      currency="USD",
                                      shipping_address=True,
                                      title="Cupcakes & Co.",
                                      icon_url="_/theme/cupcake_logo.png")
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

    self.map_1.center = 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)
    self.map_1.add_component(self.marker)
Enter fullscreen mode Exit fullscreen mode

You can check out the source code here!

Discussion (1)

pic
Editor guide
Collapse
chocolate profile image
Alor

It looks better on desktop than on mobile