Hello and welcome to the overview of my capstone project! Before I started this class, I had anticipated that I would be able to choose the topic of my project, but we're all given the task of creating an E-Commerce website. I currently work for a bakery, I have been here for 7 years now and I thought it would have been a cool idea to make them a website for some of the products they make. I had to write several 1-page papers/paragraphs on what I was doing each week. This project is no longer in development, the company said they didn't want me to finish making it, which is perfectly fine by me. I did get permission to do what was needed for the project though. Overall I had a really fun time making this website and I learned a good amount from it.

Wireframing

The e-commerce application I will be building will be for the food industry, and more specifically for the company Just Off Melrose. It will focus on selling crisps and croutons, it will use a simple grocery store model to build an MVP. The primary goal is to create a user-friendly platform where customers can browse available products, add items to their cart, and complete purchases. In terms of integrating advanced technology, I could take the approach of using AI for a shopping buddy while the customer is on the page, it could act as a chatbot to help navigate the app. The application’s scope will include essential features like a product listing system, shopping cart functionality, and a secure checkout process, I’ll also look into setting up a subscription-based model for those who want to keep a continuous source of the product coming in. On top of this, I can integrate some automated service that will print invoices for each purchase, allowing the bakery to be immediately notified of the order and start packing it.

The functional requirements of the application include a product display system to showcase available crisps and croutons. I don’t think I’ll need a filter or search bar feature for users since the bakery makes a very limited variety of products. I’ll also need to include a shopping cart that allows users to manage their selections, a user authentication system for login and signup, and a secure payment gateway for completing transactions. Non-functional requirements will focus on ensuring the application is fast, scalable, secure, and reliable, with responsive design, minimal downtime, and protection of user data. I want to include an account system for people who want to manage past orders. Please send us their email so we can, with their permission, send out times when there are deals on the products. I think I’ll also try to include a rating system for each of the products, which will require an account to put one in.

A user story focuses on browsing and searching for products. Users will be able to browse the home page, with a clear view of what the company offers. The second story involves adding items to the shopping cart. Users can easily add products to their cart from the product page, adjust quantities, or remove items on the cart page. The third story covers the checkout process, allowing users to securely complete their purchases through an integrated payment gateway, with an order summary and email confirmation upon success. A fourth user story is setting up a recurring subscription for a product. Users will be able to select a product and tick a checkbox indicating that they’d like to receive the item on a set interval, being charged each time the order comes through. A fifth user story sees users signing up for an account. Users will be able to visit the sign-up page to create an account and the login page to sign in. These accounts will allow the company to send out emails to those who opt-in for promotions, as well as allow the user to rate products and send reviews.

The wireframe for the application will follow a simple and intuitive flow. The homepage will display featured products and navigation options. From the homepage, users can view product details on the product page or right on the home page, where they can add items to their cart. The shopping cart page will show the selected items and allow for quantity updates. The sign-up and sign-in pages will allow users to create and sign into their accounts. Finally, the checkout page will gather billing and shipping information and process payments securely. In terms of data, the products will be stored in the app since there are only 4. I’ll be using .NET Identity which will help me to create users and store them in a database. User passwords will be stored securely as hashes, and each account will have references to their ratings for each product and an email field. I will store purchases, with their full order details in a database as well, so the company can use this data for whatever purposes they want to make of it.

In terms of additional features beyond the MVP, the application could include AI-powered personalization to suggest products based on user behavior, and a big data analytics dashboard for business owners to track sales and customer trends. I could integrate AI in a way that acts as a shopping buddy, helping users to make purchases. I can set up the bot to respond to messages like “I’d like to buy crisps”, where the bot will respond to the request by moving the user to the home page where they can see the products. On top of all that, besides user-facing features, I can include an admin dashboard that will be accessible to those who have the correct credentials, allowing them to look at purchases with more detailed information including graphs. These features would enhance the user experience and provide valuable insights for business operations but are beyond the initial scope of the MVP. The focus for the MVP will remain on delivering a solid foundation of core features, ensuring a functional and smooth experience for customers.

Application Development Part I

This week, my tasks included building the first 3 user stories I presented in last week's assessment. I began by deciding that I would make the project in 2 halves, the back end, and the front end being completely different projects. In the past, I’ve kept these 2 sides within the same project directory, making it feel more like a monolithic piece of software than separate backend and frontend applications.

I’m very comfortable with Blazor and C#/.NET. Still, I wanted to challenge myself, so I wanted to use some unknown languages that I could use this opportunity to learn from, so I decided on React for the front end and Go for the back end. After tinkering around with React, I then concluded that it was a little too complicated for my taste, so I went back to Blazor. I had already built the backend HTTP server through Go so all I had to do was recreate what I already had in React. I made the home page of the website pretty easily, I’m using Mudblazor which comes with a lot of pre-built components, like a Card, which I can use for each product.

The Blazor front makes a GET request to my backend to retrieve the products, which makes a card for each one that it receives, displaying the information that came along with it. The cart gave me just a little bit of trouble but I got it working as I wanted it to. The main problem I had was that the number of cart items wasn’t updating dynamically, so I had to create a helper class that would service the cart functions. All I had to do was have the badge number subscribe to a C# Action, which would be invoked when it was changed when an item was added to the cart. I’m a really big fan of the pub/sub-architecture and I’m always happy when I get to use it in my projects.

The task that took me a lot longer to figure out was the checkout process. I knew right away that I’d be using Stripe. I’ve never added a checkout to a website, but I decided on this one since I see it everywhere, and seems to be easy to integrate. I had to add an endpoint to my backend which would create a checkout session. Stripe offers a code snippet that you can drop into your project for this specific endpoint, but I needed to create a request and response structs that I’d need to read and send based on what happens when the client makes the response. At first, I didn’t realize that the parameter for items took a list of items, which included a quantity and price, I thought I’d only be able to sell one item at a time which would not have been ideal. I was able to come up with solutions to all my problems so far, I think I might have a little more trouble with next week's tasks since I gave myself some work to create an account system. I’m accustomed to the process using .NET as the backend, but not for Go. I think that I might pursue using .NET though, and keep the account sign-in backend separate from the Go backend, which is just an API for my products and checkout at this point.

Application Development Part II

From the video submitted in the lab, I’ll review the user flow and application experience. Firstly, the user will go to the app's home page, which is served to them from React. The react front-end makes a GET request to the /API/products API endpoint of my Go backend which returns a JSON list of the products for which I’ve configured. The user will see each of the products with an ‘Add to Cart’ button on it which they’d be able to use to add to their cart, even without an account. This is done through the browser’s local storage. I chose to do it this way for a better user experience, if I put myself in the shoes of the user, it can be annoying to have to create an account for something I just want to buy.

I also still have the option to create an account for those who want to, which will enable the ability to opt-in to receive email promotions. Users can click on the Cart button on the App Bar, which will take them to another route and present them with their cart. For each cart item, there will be a remove button and a +/- button which will allow the user to either remove the item completely or adjust the quantity they want for each item. There is also a per-item total, and a total so they can see what they are buying before they head into the checkout session via Stripe. For features that don’t meet requirements, it would include creating a checkbox to turn an item into a subscription. I had some trouble with this on the backend, and truthfully, this is probably the result of having to put this back to React instead of Blazor for my front end. Little did I know that Blazor WASM has a problem with cookies, with the newfound knowledge, and for the sake of wanting to keep my promise to myself of wanting somewhat of a challenge, I went back to tackle react. I’m still coming up with the solution to this problem, it’s very easy to add a checkbox to each of the items on the Cart page, but figuring out the logic to call the Stripe API in a way that will allow me to specify whether or not each item is a subscription or not. I’m still reviewing the docs and I think I can figure it out with a little more time, I’ll have to create a separate product on my Stripe account which is essentially the same product, but just a subscription, and point to that PriceID instead of the normal one when I create my checkout session.

I am still using a component library, MUI, which is doing a lot of the heavy lifting, but it’s mainly figuring out React’s front-end logic which has taken me some time. The only other feature that wasn’t present in last week’s update was to add emails to receive email subscriptions or promotions. This feature also isn’t fully complete, this is due to my lack of seeking out a solution or service that would allow me to send out emails through my backend. There are several services out there that I have thought about, like MailChimp, and the GoMail package for Go, which does allow me to send out emails, at this point it's just a matter of me implementing the logic for the actual sending of the emails.

I have already created functioning sign-in and sign-up routes for both the front end and back end. This was a lot of the work that would be needed for the email feature so I think I’m almost there. I am using JWT tokens which are generated from my backend and stored in cookies from there too (which is what Blazor WASM has trouble with, and why I went back to react). I hash passwords and store them in a PostgreSQL database, which I have hosted from my DigitalOcean account. I plan on using the emails from the entire database and performing the logic that would send the emails to those who want them. I’ve also already set up and changed the model for my user in my back-end to contain an “EmailPromotions” boolean which is the flag that I’ll be using in said logic. That’s it for this week’s update, I unfortunately did not get either of the features fully complete, but I’m on track to getting them done very soon, I had to re-do the front end again which is my fault, but it took some extra time.

Application Testing

When developing an e-commerce website, thorough testing of user stories is essential to ensure a smooth and secure user experience. One of the user stories involves allowing users to browse the homepage and view the products offered. In this case, the acceptance criteria require that products are displayed in a clean and organized manner, such as in a 2x2 grid, with images, names, and prices visible. Testing should involve checking for broken images, and missing text, and ensuring that clicking a product navigates the user to the correct page. In the event of issues, such as broken product images due to incorrect image URLs, the recommendation would be to verify the database and API calls for image path accuracy.

Another user story is the shopping cart functionality, where users can add products, adjust quantities, and remove items. This is very important to the e-commerce experience, and issues like failure to update cart quantities or incorrect total calculations could end up frustrating users. Manual tests should validate that the cart updates correctly in real-time, with any discrepancies, such as failure to sync frontend changes with backend totals, requiring a review of the cart’s logic and how data flows between client and server.

Another aspect of an e-commerce platform is the payment gateway, where users complete purchases securely. Testing this involves entering payment details, completing transactions, and verifying that the user is presented with an order summary and email confirmation. Issues with payment, such as failed transactions despite valid details, can be traced to integration problems with the payment gateway. Ensuring the backend processes payments correctly and that the email service is configured properly for sending confirmation emails is vital for maintaining user trust.

Some users may want to set up recurring orders for products, requiring a subscription model. Testing this feature ensures that users can select an interval-based subscription option and that recurring charges are processed accurately. If issues arise, such as the subscription failing to be stored correctly, the solution lies in verifying the backend logic for handling recurring orders and ensuring integration with the payment system.

The user sign-up and login functionality must be tested to ensure new users can create accounts and log in seamlessly. Errors such as a login failure with valid credentials might stem from backend authentication issues or token generation problems. Fixing these requires a thorough review of the authentication flow, ensuring that tokens are correctly generated and validated. By manually testing these user stories and resolving potential issues, the e-commerce platform can deliver a reliable and user-friendly experience.

Thanks for reading! I hope you have a great rest of your day!