Motivation

I wanted to create this online shop for two reasons: first, to develop my full-stack skills with a big challenge, and second, to practice for a future business idea that merges my background in music with an e-commerce platform.

While the result is a fully functioning online shop, the 'books' aren't real - they're highly disappointing single-page PDF files with just the book's title.

madame-bovary.pdf

I've left Stripe in test mode, so you can purchase a book for free using the card number 4242 4242 4242 4242 and any old email, CVC, address, etc.

Planning

My principal goal was for the site to have a smooth user experience, as this is what irritates me most on other sites. Users shouldn't be confused, have to wait, remember anything, or repeat anything, so an intuitive layout, excellent user feedback, and a friction-free mobile experience would be needed.

However, persistent storage, allowing users to add items to the cart regardless of sign-in status, was at the top of my feature list.

Though this added quite a lot of complexity - merging local storage with the database and all the things that can go wrong - it's an essential feature and was fun to figure out.

I used Next.js, the full-stack React framework, because it combines snappy page transitions with the SEO benefits of statically pre-rendered pages - perfect for a shop.

/dracula

It also makes strict same-site cookies simple to implement, as there's no need for a reverse proxy, plus the monorepo structure keeps everything beautifully organised.

I opted for a stateless authentication system; I've made these with Express before, and it worked nicely.

Thinking about the data

As there was already a lot for me to learn with this project, I used hardcoded data for the books to keep things simple - though I'm aware that hackers could help themselves to huge discounts by fiddling with the prices.

Thinking carefully about the shape of essential data structures before starting is always helpful. Here are the main ones for this project:

AppState

1/* additional interfaces etc. */
2
3export interface AppState {
4	message: string | null;
5	status: AppMessageStatus;
6	signedIn: boolean;
7	user: UserType | null;
8}
9
10export type AppMessageStatus = 'success' | 'info' | 'warning' | 'error';
11
12export interface UserType {
13	id: string;
14	name: string;
15	email: string;
16	cart: CartItem[];
17	purchased: PurchasedItem[];
18}

Simple yet comprehensive.

StaticBook

1/* image imports etc. */
2
3export interface StaticBook {
4	title: string;
5	slug: string;
6	author: string;
7	priceInPounds: number;
8	description: string[];
9	image: StaticImageData;
10}
11
12export function getBookBySlug(slug: string): StaticBook | undefined {
13	return books.find((book) => book.slug === slug);
14}
15
16export const books: StaticBook[] = [
17  /* books data ... */
18];

As the books are hardcoded, I store only the slug in the user's database document and use getBookBySlug() to match it to the image and other details.

I know conventions are important, but the revolting word 'lib' makes me feel violently ill, so I use the full word instead.

Cookies

1//* ... imports and interfaces ... */
2
3export function createCookieOptions(tokenValue: string): CookieOptions {
4	return {
5		name: 'token',
6		value: tokenValue,
7		httpOnly: true,
8		secure: isProduction,
9		sameSite: 'strict',
10		maxAge: 60 * 60,
11		path: '/',
12	};
13}
14
15export function generateTokenPayload(userId: string): Token {
16	return {
17		sub: userId,
18		exp: Math.floor(Date.now() / 1000) + 60 * 60,
19	};
20}

These two functions saved me so much drama! When I first made full-stack apps with Express, I had many problems with cookies not working as intended because the properties were mismatched. These few lines of code prevent all of that.

Design

I did as little design as possible - pretty much just restricting the width of the page - and I love the results. It's a shame a minimalist site like this probably wouldn't convert well because I vibe hard with this style.

/cart

I tried making some book covers using ChatGPT and Google Gemini, which turned out rather gorgeous - the Crime and Punishment design is better (in my opinion) than most professional editions! However, I had to photoshop out a lot of weird, incoherent text.

Book cover generated with ChatGPT

...and cleaned up in Photoshop

I carefully studied Amazon's interface and drew inspiration from their user flows, layouts, button designs, and microcopy while keeping my version as simple as possible.

I thought my finished shop would look suspiciously simple, and you'd never want to buy anything from it. However, the 'Checkout' button redirects to a Stripe-hosted page, and the minimal design looks quite smart and sleek, so it feels trustworthy to me.

Challenges

React hooks

My UI works nicely, but it was a challenge to get there. I created two provider components: AppProvider, which manages authorisation, and CartProvider, which manages the local storage cart.

The resulting interface is pleasantly speedy, and users' carts persist even if they close the browser.

While my site functions nicely, I'm sure the code could be more elegant and concise - I want it to be beautiful, not just functional.

I've started reading a book, 'React 18 Design Patterns and Best Practices,' and have found many ways to improve my code. One is splitting large, complex components into container and presentational components.

This makes so much sense that I can't believe I haven't heard of it until now. And I'm a bit annoyed it wasn't mentioned in the Codecademy React course I completed!

digital-book-shop.fly.dev

Stripe API

I expected this to be challenging to implement - it's fintech! However, Stripe has fantastic documentation and a big developer community, so it was reasonably straightforward.

While there was a lot to configure - setting keys and secrets on their website and creating numerous pages and routes in my application - it was easier than expected.

However, transferring items from the cart to the user's 'purchased' array after successful payment was a sticking point.

checkout.stripe.com

End-to-end testing

To investigate the problem, I wrote a test sequence with Puppeteer and Vitest. I started by creating and deleting a test account so I wouldn't have to delete the document from the database manually if something went wrong. Then, I added more steps until it automated the entire shopping journey.

A cool trick I learned recently is to put data-testid="" on all the important stuff, making it easy for the test framework to find. This helped a lot in making the suite comprehensive.

It took me a while to learn that, to test my app locally, I needed three terminals running concurrently: one for the Next development server, another for Vitest, and another for the Stripe CLI to trigger the /api/webhook route, which finally moves the purchased items to their rightful place.

1{
2  "scripts": {
3    "dev": "next dev",
4    "test": "vitest",
5    "stripe": "stripe listen --forward-to localhost:3000/api/webhook"
6  }
7}

What I learned

The joy of reusable components

Time spent crafting quality components in React/Next.js is worthwhile. You can use them across your application and different projects to get a considerable return on investment.

Although it took a long time to style these accessible and functional form components - especially <PasswordInput />, with the cute visibility toggle - they're endlessly reusable. The styles might need to adapt to other designs, but practically every website has a form to fill in somewhere.

/create-account

The standard for an online shop is very high

This is the most challenging and definitely the most satisfying project I've worked on to date, but it's still pretty basic for an eCommerce site.

Creating a great user experience requires significant effort and attention to detail, but investing this time is worthwhile.