Following the MVC software structure, this e-commerce store allows users to interact with a fully functional Vue.js front-end which uses JDBC to connect API requests via Java backend.
Java, Vue3, Javascript, SpringBoot, PostgreSQL VS Code, IntelliJ, Postman, PgAdmin
- Responsive Web Design: Users can easily navigate and engage with the website on all devices. Item cards are highlighted when users hover.
- Login/Logout: The landing page displays a welcome message asking viewers to log in or register to use the cart feature. The login/logout link toggles depending on the status. New users can register for a new account. Returning users will find their cart just the way they left it.
- Table, Card, or Detail View: Viewers can use an icon to toggle between a card or table list view of the product, SKU, and price. The table view does not show item images. Clicking on the product will open a detailed item view.
- Message Alerts: Users will receive a pop-up confirmation message when an item is added or removed from the cart or the entire cart is emptied with the "Clear Cart" button.
Not only was this my first Vue project, it was my first full-stack project. I am very proud of what I learned and how far it has come. Seeing how the backend, database, and front end all come together with a usable interface. All components were built in isolation across months of learning. I learned how important it is to plan the whole project from the beginning with milestones including an MVP and a hierarchy of nice-to-have features. My big lightbulb moment was when I drew a parallel between the Vue components and object-oriented programming (mainly encapsulation and inheritance). This allowed me to reframe how I was approaching the project. If I were to restart, I would have a much better launching point and a more comprehensive plan, and a cleaner execution.
- While this project is fully functional, I would like to continue refactoring and iterating to improve the user experience. Future features include a wishlist and a timed-out alert window.
