Skip to main content
SimilarExport ZIP
100%

Lucia's Bookstore

✓ Published0🌍 Public
FFrankieFabuloso
Last edited Apr 28, 2017
Created on Apr 28, 2017

Lucia's Bookstore is a full-stack bookstore application that demonstrates a dynamic shop page and admin interface. The shop page lists books from a PostgreSQL database, loading 50 at a time with pagination, and features hover-triggered previews and a shopping cart modal. The admin page, protected by a session, provides a form to add new books and a search bar to query the store's inventory. The code uses Express for routing, PostgreSQL for data persistence, and EJS templates to render the book listings and interactive elements.

AI-generated description

Lucia's Bookstore

Set up instructions

  1. Clone or Fork repo

  2. Run npm i

  3. Run npn run create:db

    • ensure that DB has been created

  4. Make a .env file : echo DATABASE_URL=postgres://whoami@localhost:5432/lucia-bookstore > .env

  5. Run the migrations: npm run migrate

Taken Issues:

Add Admin page #6: As an admin I want to be able to log in and be redirected to an admin page.

Admin contains:

a form that allows admin to enter new books into the DB. sets a session that allows you to now edit books on the home page. has a search bar to search the store for books by their info.

Add shop page #9: As a user, I should be able to navigate to a shop page that will list all books in the store.

I should be able to click on a book and navigate to a detail page. I should be able to add a book to my current shopping cart instance. only 50 books should load at a time. If there are more than 50, I can browse the next page my clicking the next button. hovering over the shopping cart should display a modal with current shopping cart items. hovering over a book should prompt a preview button. When clicked, displays a preview page for the book.

Add user home page #5: As a user ( regardless of being logged in or now) I should be able to:

see a header with navigation to various parts of the application( justified center, below image ) a search bar to search store ( justified right ) a logo( justified left ) a jumbotron like an image to separate the navbar from logo and search bar a list of the 20 newest book arranged into 5 columns a footer with contact link, FAQ's, Terms of Use

Similar vizzes

Loading thumbnail…

Gist dfebda550a6847a46725afb2cfdb1253

This example shows an order-service application built with React, managing order data through a PostgreSQL database via Sequelize and Express. The code defines REST API endpoints for creating, retrieving, and updating orders, using JSON validation with Ajv and TypeBox schemas. It integrates RabbitMQ through amqplib for message queuing, JWT token verification for authentication, and includes comprehensive Jest testing with nock for HTTP mocking and Sinon for spies. The visualization demonstrates a server-side Node.js architecture with async/await patterns, error handling middleware, and logging.

TThomasG77
58% match
Loading thumbnail…

Gist 43d5f0151f0331137a2d258ba06dfa0c

This interactive visualization renders the free-programming-books.md index as a three-dimensional WebGL scene using React and Three.js. The list of programming languages and topics is displayed as floating text nodes in a 3D space, allowing users to explore the hierarchical structure of the book collection. The code utilizes the react-three-fiber library to manage the WebGL canvas, with camera controls for navigation and a starfield background to enhance depth perception. The visualization provides an immersive way to browse the extensive index of free programming resources.

JJastor11
55% match
Loading thumbnail…

Music Store Project

This music store mockup displays a catalog of four fictional songs as interactive product cards. Each card shows an album image, song title, artist, genre, duration, and price. React renders the song data from an in-file array via the `App.jsx` component and custom `Header` and `Items` components. The interface includes responsive hover effects, an active click state, and a gopher mascot illustration, all styled with CSS using flexbox, Google Fonts, and the `index.css` file.

CCasualWanderer20XX
54% match
Loading thumbnail…

Shopping App Prototype

This interactive shopping app prototype animates a dynamic dataset of products and prices, displaying each item as a horizontal steelblue bar with a text label showing its name and price. Using D3 v4 with SVG rendering, the visualization updates over time via `setTimeout` calls, adding and removing items like Milk, Eggs, and Cupcakes while adjusting the scale and bandwidth. The code leverages `d3.scaleLinear` for price encoding on the x-axis and `d3.scaleBand` for categorical positioning on the y-axis, with enter, update, and exit selections to handle data changes smoothly. The fixed vertical spacing maintains consistent row height as the dataset grows and shrinks.

CCurran Kelleher
54% match
Loading thumbnail…

Gist 75fe6f98cacb874f8d9ebce7248b1b66

This example presents a web-based client-server application that serves static files and handles socket connections. The server is built with Express and Socket.IO, listening on a configurable port, and delegates all routes to a single `index.html` file. It uses the `body-parser` middleware for JSON parsing and the `path` module to resolve file locations. The rendering approach is not specified, but the code clearly establishes the infrastructure for delivering a front-end visualization, with the server acting as the backbone for real-time communication and static asset delivery.

RRonolibert
54% match
Loading thumbnail…

Gist 466252

This example is a data-art composition built from a personal list of recommended web design and programming books, rendered as an interactive force-directed graph. It visualizes the relationships between books, their authors, and their associated topics (like usability, web standards, JavaScript, Ruby, and Rails) using `d3.forceSimulation` for physics-based layout and dynamic node positioning. Each book title, URL, and annotation from the original text is embedded as textual nodes and links, with the graph’s structure and labels derived directly from the source gist’s content. The rendering approach uses SVG elements updated via D3’s data join, and while no explicit additional libraries are mentioned, the code relies on standard D3 v4+ APIs for simulation, drag behavior, and tick updates to show the clustered, interlinked reading list.

DDylanFM
53% match
Loading thumbnail…

Shopping App Prototype

This example animates a shopping list as items are progressively added to a cart, showing a bar chart where each bar represents an item and its length corresponds to its price. The data, loaded from a local JSON file, updates every second, causing new rows to slide in and existing bars to resize smoothly via D3’s data join and enter/update/exit pattern with `d3.scaleLinear` and `d3.scaleBand`. Text labels for item names and prices are rendered in SVG with both a stroked background and foreground layer for readability.

CCurran Kelleher
52% match
Loading thumbnail…

Shopping App Prototype

This example demonstrates a simple shopping list interface where items and their prices appear, update, and disappear over time using animated data joins. The prototype renders text elements in an SVG canvas, with each item positioned vertically and displaying its name and price. D3 v4’s data join pattern (`selectAll`, `enter`, `exit`, `merge`) handles the dynamic updates, while timed `setTimeout` calls trigger sequential changes to the dataset. The code uses `d3.select` to target the SVG and `text` elements, with styles applied directly via `.style()` and attributes set through `.attr()`.

CCurran Kelleher
52% match