The EpicBook! project is an online bookstore application that allows users to browse a collection of books, add them to their cart, and proceed to checkout. This documentation provides an overview of the application's features, functionalities, and user flow.
1️⃣ Home Page
2️⃣ Menu Navigation
3️⃣ Gallery Section
4️⃣ Product Details
5️⃣ Add to Cart
6️⃣ Cart & Order Summary
7️⃣ Checkout & Order Confirmation
The Home Page serves as the primary interface where users can explore different books available for purchase. It features a visually appealing layout with a structured book listing.
- Displays a collection of books with their title, author, and price.
- Users can click on a book to view more detailed information.
- "Add to Cart" button for each book.
- A navigation bar for accessing different sections of the site.
The menu provides quick access to different book categories, enhancing user experience by allowing filtering.
- Users can select categories like:
- NYT Bestsellers
- Classics
- Children’s Books
- Top 9
- Social Justice
- Fantasy
- Responsive design with an expandable/collapsible sidebar.
The Gallery provides a different view of books, displaying them in a visually attractive grid format.
- Showcases books in a larger display for better visibility.
- Each book has a "Browse Through" option for more details.
- Seamless user experience with an intuitive interface.
Clicking on a book opens the Product Details Page, where users can learn more before making a purchase.
- Book cover preview
- Detailed description of the book
- Genre, Publication Year, and Availability count
- "Add to Cart" button for easy purchase
- Modal pop-up design to display details without leaving the current page
Users can add books to their shopping cart for purchase.
- Clickable "Add to Cart" button for each book.
- The cart icon updates in real time to reflect the number of items added.
- Items remain in the cart until they are removed or purchased.
The Cart Page allows users to review selected books before proceeding to checkout.
- Displays a list of books added to the cart with title, quantity, and price.
- An Order Summary box shows the total price.
- A "Checkout" button to proceed with the order.
The Checkout Process finalizes the purchase and confirms the order placement.
- Final Order Review before placing the order.
- Checkout Button to confirm the order.
- Confirmation Message: A modal pop-up appears with the message "Your order is placed!"
- Cart is cleared once the order is placed.
- Frontend: HTML, CSS, JavaScript for UI rendering
- Backend: Node.js + Express.js handles API requests
- Database: MySQL for storing books, orders, and user data
- Reverse Proxy: Nginx to handle request forwarding
Cloud Services (Future): AWS EC2, RDS, S3, CloudFront, Lambda
The EpicBook! application provides a seamless user experience for discovering, selecting, and purchasing books online. With its well-structured navigation, visually appealing gallery, detailed product descriptions, and smooth checkout flow, it serves as a great example of an e-commerce bookstore.
If you are developer, you can consider developing below feature and send the pull request.
- Deployment and hosting options.
- Implementing a payment gateway.
- Enhancing user authentication and order history.