CardVault
A full-stack web app for Pokémon card collectors: track the
cards you own, keep a wishlist of the ones you want, and read and
write reviews — built with Django and PostgreSQL, and deployed
to Heroku. The project exists to demonstrate full CRUD (Create, Read,
Update, Delete) behind a real login system, as the Code Institute
capstone checklist requires.
Live site: cardvault-0a18b8d773ca.herokuapp.com
Found a bug? Open an issue with the Bug report template. Found a
security problem? Please report it privately, as described in the
security policy.
Educational project. Not affiliated with, endorsed by or
sponsored by Nintendo, Game Freak or The Pokémon Company.
"Pokémon" and all card names are trademarks of their
respective owners, used here for identification only.
UX design
Purpose and audience
CardVault is for Pokémon TCG collectors who currently track
their collection in a spreadsheet, a notes app, or memory. The site
has one job on arrival: make it obvious that you can create an
account and start tracking cards in under a minute. Every page
answers three questions the checklist asks for directly: what is this
for, can I tell if I'm logged in, and can I get back to where I need
to be.
User stories
The full set of 34 user stories, written as As a / I want / so that
with acceptance criteria, development tasks and a manual test for
each, lives in docs/USER_STORIES.md.
They're prioritised with MoSCoW:
| Priority | Count |
|---|
| Must have | 24 |
| Should have | 8 |
| Could have | 2 |
Ideas that came up but were deliberately left out of this submission
are in docs/POTENTIAL_UPSCALE.md
("Should if / Could if / Won't if"), answering the "what ifs" a tutor
is likely to ask.
Wireframes
Low-fidelity wireframes for the core screens, covering desktop and
mobile layouts, logged-in and logged-out states, and the success/error
messages from each user story:
1. Home (logged out)
2. Register and log in
3. Browse cards (catalogue, search, filters)
4. Card detail (add to My Cards, reviews)
5. My Cards (Owned/Wanted tabs, summary, table, CRUD)
6. Edit/delete forms and message banners
7. Mobile layouts (nav menu, stacked My Cards)
Blue tags on every wireframe (e.g. US11) link that part of the
screen back to its user story in docs/USER_STORIES.md.
Wireframes 4 and 5 still show a card price and a collection value.
Prices were dropped on 15 October 2026
(issue #48),
so the built pages differ there; the wireframes are kept as the
record of the original plan.
Brand and design
Agreed with Jamie in a design session on 15 October 2026 (issues
#59 to #63). The aim: a premium collector's vault, calm enough
that the card artwork is always the star, with small Game Boy-style
red, yellow and blue accents.
-
Emblem and logo: an original card back (navy, a soft swirl and a
gold oval) with an old-school ship-wheel vault lock in the centre,
beside the wordmark CardVault. Inspired by the back of a
Pokémon card, not a copy of it.
-
Favicon: an original Poké Ball-style icon (SVG, 32px PNG, an
Apple touch icon and favicon.ico).
-
Colours, each with one job:
| Colour | Light mode | Dark mode | Used for |
|---|
| Navy | #0f1f3d | #060c18 | Header, emblem, cosmic hero |
| Red | #c8102e | #e0283d | Buttons, active tab, Poké Ball ratings, "Vault" |
| Blue | #1d4ed8 | #8ab4ff | Links and the keyboard focus outline |
| Yellow | #f5c518 | #ffd23f | Small highlights only: the line under the header, Rare Holo badges |
| Ink | #162034 | #e8edf6 | Text |
| Page | #f5f7fb | #0b1220 | Background |
Every text colour pair passes WCAG AA in both modes (see
TESTING.md). Yellow is
never used for text on white.
-
Light and dark mode: follows the device setting, with a
sun/moon toggle in the header that the browser remembers. A
high-contrast style switches on when the device asks for more
contrast, in both modes.
-
Typography: Poppins (bold, rounded and geometric) for headings
and the logo, served from this site; the device's own system font
for body text, so pages stay fast.
-
Ratings: Poké Balls instead of stars, full or empty, and five
clickable balls on the review form.
-
Rarity badges: the 1999 Base Set symbols with the word: ●
Common, ◆ Uncommon, ★ Rare, ★ Rare Holo (gold).
-
Movement, kept small: card tiles lift on hover or keyboard
focus, Rare Holo cards shimmer once, and the home page plays a
short Poké Ball intro on a visitor's first visit (skippable). The
faint rarity symbols behind the home page banner float slowly, each
on its own path, with a "Pause animation" button in the corner
(WCAG 2.2.2). All of it switches off when the device asks for
reduced motion.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
