E-commerce
Expat Shop
An online shop for products from around the world, sold in Peru: catalogue, cart in soles and dollars, checkout and orders, built from Figma designs.
Context / scope
Overview and scope
ExpatShop sells products from around the world to customers in Peru, with prices in dollars and soles.
Pages (14): home, products, product details, recommendations, cart, checkout choice, sign-in, sign-up, guest details, checkout, order status, orders, saved addresses and referral program.
Front-end developer: built the pages from the client's desktop and mobile Figma files. File dates run from October to November 2023; the folder had no git history.
Results
- No results were recorded, so none are claimed.
- Products, prices, names and addresses in the captures are sample data; product images are unbranded drawings, and the office address in the footer is replaced with a sample.
Interface / screens
Walkthrough
Screen 1 of 9: Home page. Real interface, sample data.
Responsive and states
Screen 1 of 1: Products on a phone. Real interface, sample data.
Behaviour / flows
Features and flows
Finding products
- Categories in the menu, a category strip on the home page and a products-from-the-world grid open a filtered list with a count, sorting by price or name and an empty state.
- Header search looks through names, descriptions, categories and countries; new products and offers have their own lists.
- Each product has a details page with quantity and related products from the same category.
Cart and prices
- Add to cart from any card with a quantity; the header badge, the mini cart and a short confirmation update straight away.
- The cart page changes quantities and removes lines, with totals in soles and dollars.
- A currency switch (USD or PEN) is remembered and applied to every product price.
Checkout
- Before checkout a visitor signs in, creates an account or continues as a guest, with names, Peruvian mobile numbers, email and passwords checked field by field.
- Addresses are saved with a type, a street of up to 85 characters and a Lima district, and open in Google Maps from a link.
- The order can be paid in soles or dollars, by card, Yape or mobile banking, with RUC details for a receipt; anything missing is listed before the order is placed.
After the order
- Order status shows the total, payment state and the products, and the orders page lists every order with a link to it.
- Saved addresses can be removed after a confirmation, and the referral page copies the customer's link.
Engineering / decisions
Architecture and decisions
Static HTML and CSS on Bootstrap 3, with jQuery, Slick carousels and Font Awesome icons, and separate phone layouts from the mobile Figma file.
Shop behaviour lives in one script over a sample catalogue, with fonts served from the site.
One script over the designed pages
The HTML and CSS stay as built from the Figma files. One script reads which page it is on and fills the existing markup from a single sample catalogue, before the original script starts the carousels.
State kept in the browser
The cart, currency, saved addresses and orders are kept in local storage, with an in-memory fallback when storage is blocked, so every page agrees without a server.
Dollars first, soles from one rate
Prices are stored in dollars and converted to soles with one rate, so cart, checkout and order totals always match in both currencies.
No requests to other sites
The fonts are served with the site and the embedded map became a link, so a page loads nothing from third parties until the visitor follows a link.
Limits / notes
Known limitations
- There is no server: the cart, addresses and orders live in one browser, sign-in accepts any well-formed details, and Pay now only marks the order as paid. No payment provider is connected.
- The language switch is shown, but the pages are in English only, and customer testimonials are hidden until real ones exist.
Stack / tools
Technologies
- HTML
- CSS
- JavaScript
- jQuery
- Bootstrap
- Slick
- Font Awesome