Justin Lassiter's Personal Website - CSPB 3112 Course Page

Home

Project Repository

Project Proposal

Course Blog

Mid Semester Project Update

Final Report and Walkthrough

This page contains my project proposal for CSPB 3112 Professional Development and the related weekly project updates over the course of the semester

Project Proposal Requirements

This Proposal Should Contain:

Vision statement
- How will this project expand your professional skills and knowledge?

Motivation
- Why is this project important to you?

Specific and measurable goals (learning objectives) for the project
- Remember that a total of 45 hours will be dedicated to the course and project over the 16 week (or 12 week summer) semester. You want to limit the scope of your project based on that time limitation.

Risks to project completion, possibly including:
- New language or working environment
- No prior experience working with the subject or technology
- Project requires of some resources that may be difficult to obtain

Mitigation strategy for the risks listed above

Project assessments - provide a list of evaluation criteria for the project
- Describe how you will know that your project is completed and that you have met your goals.

Project portfolio link
- A public web site in which to document your project (usually a GitHub personal web page). The web site will eventually contain all material related to your project, such as:
- of your proposal - Code created - Data collected - Weekly project updates - Final project report

Project Proposal

Project Proposed:
For my project, I would like to create a full stack, e-commerce website. My wife makes and sells custom jewelry using the flowers from funerals of passed-away loved ones. Business for her has grown and she would like to have an online presence. I thought that this would be the perfect opportunity to learn how to build a website. For my project, I will need to learn HTML, CSS, JavaScript and SQL, which will give me experience using these web focused development languages and technologies. I plan to use Node.js / Express to create the server application that will provide the link between the site and the SQLite database. For purposes of this project, my research has shown that a SQLite database would be best for this project, since it will be housed locally and, for the time being, will only include mock data for learning purposes.

Vision statement:
how will this project expand your professional skills and knowledge? One area of Computer Science that I've never had any exposure to is web development. By setting out to build a full-stack, e-commerce web site, I am setting myself up to be exposed to and learn about a whole new sector of the profession. While building this project, I&aposm going to need to learn a whole suite of new languages and concepts. I have never touched HTML, CSS, JavaScript or SQL in my career, nor have I ever worked with Databases such as SQLite or PostgreSQL. Once I gain this experience, I feel it will make me a more well-rounded Computer Scientist as well as a more marketable candidate for internships and jobs.

Motivation: why is this project important to you?
Web development is always something that has interested me, but I never had the time with the work load of other courses, job and family. There is something about creating a website/app than can be then used by anyone with an internet connection that really excites and motivates me to learn the technology behind it. Additionally, in my journey to switch from the accounting and finance world to software engineering, I've been looking at internship job descriptions and a lot of them out there are focused on these web development technologies or would like to see experience with them. As this is one of my goals in the near future, I want to make myself more marketable for these opportunities and be able to speak to the technologies. The specific idea of creating an e-commerce website stem from my experience of being an accountant. I felt this would be a natural fit for a first-time website. Also, with the product being offered on the site being my wife's custom-made jewelry, this is something personal that I could expand on and turn into a live website.

Specific and measurable goals (learning objectives) for the project. Remember that ~45 hours will be dedicated to the course and project over the 16-week (or 12-week summer) semester. You want to limit the scope of your project based on that time limitation.
The overall objective of the project is to create an e-commerce website where a customer could enter the site, browse the offerings, make an order. The website will be able to record / retain the customer and sales information on a locally maintained database (for purposes of the project). The business owner would then be able to log into the site and view and interact with the order details on the database such as approving the order and changing order status. Key elements of this project that I plan to learn and implement are as follows: HTML and CSS – These are necessary to create the structure and design of the website. JavaScript – This will enable the user to interact with the website Node.js / Express – Using JavaScript outside of the browser to interact with the SQL database. SQLite – A serverless and locally maintained RDBMS – This will be a good entry point for me to dive into learning how to interact with databases / learn SQL and not have to worry about having to host on more robust database engines.

My overall goal is to gain experience in these web technologies and build a foundation of knowledge of how a website is built and runs. Ultimately, I will be able to prove to myself that I've learned this foundation once I've completed the website and it performs as expected.

Risks to project completion:
New Technologies: The biggest risk for me in working on this is that all of these technologies are completely new to me. As I previously noted, I have never been exposed to any of the languages necessary to create a website. While very exciting, diving into web development makes me a little nervous due to me 'breaking out on my own'. By this I mean, in all my classes, we're essentially given what we're supposed to learn for the course, so that, in a sense, makes it easier – at least from a resource perspective. Learning a whole new computer science topic and then making something that works, independently, is a new type of journey for me, but I know this is a critical part of actually working in the field. I'm excited to have this opportunity to do a project like this.

Time Constraints:
Another risk for me is just running out of time. Working a full time job as a CPA can sometimes be a little hectic and can sometimes get in the way of my learning, no matter how much I'd rather be learning these new skill sets instead. Additionally, family life can sometime be a time consuming endeavor, especially having a toddler at home. Managing my time is going to be critical in making sure I can get through this project.

Scope Creep:
While I would actually like to make this a live website, there are a ton of things that I would eventually like to add to the site, but with this being my first time working with the web stack, I want to limit myself and make sure that I can create a site that has basic functionality and performs as expected before trying to expand it.

Mitigation Strategy for the risks listed above
In order to mitigate the risks due to learning the new technologies, I've been looking into resources that will help me learn these languages. I'm a structured kind of person. I'm personally not a huge fan of just watching random Youtube videos to learn a new subject – I like to use these to complement or get targeted guidance. Instead, I like something that has path with clear learning objectives, especially when starting something new. I've found some courses that cover the languages I need to learn on Codecademy so I plan to use these as a basis in learning the languages and then expand to other resources, such as books I've accumulated or websites like W3 School, Geeksforgeeks and Mozilla Developer Network (MDN), which has some really good tutorials, as needed once I have a basic understanding. This will give me some much needed structure and allow me to set targets for myself for the day/week. For mitigating the time issue; by setting up weekly goals for myself, this will help me stay on track and help me structure my week as I progress. Also, I plan to set aside time throughout the week to essentially detach myself from everything and focus on the project. Overall, I plan to spend a little more time than the time required for the course so I can thoroughly learn these new technologies and build my website. To make sure that I stay in scope, I will lay out how I want the site to look and detail what features will be available to the site user before I begin. This will help me stay focused on what will be included on the site and allow me to focus in on what I need to learn to make it all work.

Project Assessments - provide a list of evaluation criteria for the project. Describe how you will know that your project is completed and meets your goals.
Completion of the Codecademy course work for learning the languages – will give me confidence that I'm progressing with the languages and help me gauge where I'm at or If I need to put more time into the language. Assess where my skills are currently at relative to the needs of the website. For example, although I want to learn everything, for the purposes of the project, I don't need to go into far more advanced JavaScript as necessary – it will just slow down completion of the project. For the website project itself, there are a handful of main evaluation criteria.The website needs to look good and provide a good user interface. Everything within the site where a user should be able to interact with the website, should work correctly and agree with the specifications I lay out for the site before beginning. Data should be correctly posted to and pulled from the SQLite database. I initially want to just have 3 main sections / pages of the website: the home page, the product page and an order page. Once I can get these working, I want to then start adding in additional features like allowing the site owner to access and interact with the order details via dashboard, have different types of products, allow users and the site owner to log in to accounts, etc.

I used Generative AI to create a roadmap that I can follow as I begin learning the languages and begin working on my project. Just seeing this laid out gives me confidence that I can accomplish this in the allotted time frame. Of course, this most likely won't be followed exactly, but it gives me a good reference as to where I should be week to week as I progress.

Project Timeline

Week 1:
Setup and Introduction to HTML Learning Objectives: Understand the basics of web development: client-server model, role of HTML/CSS, JavaScript, and backend. Learn HTML basics: tags, attributes, semantic elements (e.g., <header>, <nav>, <main>).

Project Tasks: Install tools: VS Code, Node.js, SQLite, and a browser (e.g., Chrome). Create a project folder with index.html for the home page. Write basic HTML for the home page (e.g., header, footer, placeholder content for jewelry).

Week 2:
CSS Basics Learning Objectives: Learn CSS basics: selectors, properties, box model, and basic layouts (e.g., Flexbox). Understand responsive design concepts (e.g., relative units like %, vw, rem).

Project Tasks: Style index.html with CSS: add colors, fonts, and a simple layout for the home page. Create a navigation bar linking to a placeholder product page.

Week 3:
Intermediate HTML/CSS and Project Structure Learning Objectives: Learn advanced HTML: forms, input types, and accessibility basics. Deepen CSS knowledge: positioning, pseudo-classes, and media queries.

Project Tasks: Create a product page (product.html) with a sample jewelry item (image, description, price). Style the product page to match the home page’s design. Plan the database schema: tables for products (e.g., ID, name, price, description) and orders (e.g., ID, product ID, customization options, customer info).

Week 4:
JavaScript Basics Learning Objectives: Learn JavaScript basics: variables, functions, DOM manipulation, and event listeners. Understand how JavaScript interacts with HTML/CSS.

Project Tasks: Add a simple JavaScript feature to the product page (e.g., a button to show/hide product details). Create a basic order form in HTML (order.html) with fields for customization options (e.g., material, size, engraving).

Week 5:
Node.js and Express Setup Learning Objectives: Understand Node.js and Express: setting up a server, handling routes, and serving static files. Learn basic HTTP methods (GET, POST).

Project Tasks: Set up a Node.js/Express server in your project folder. Serve index.html, product.html, and order.html using Express routes. Test the server locally to ensure pages load correctly.

Week 6:
SQLite Basics and Database Integration Learning Objectives: Learn SQLite basics: creating tables, inserting data, and querying with SQL. Understand how to connect SQLite with Node.js using the sqlite3 package.

Project Tasks: Create a SQLite database with tables for products and orders (based on Week 3 schema). Populate the products table with sample jewelry data (e.g., 3–5 items). Write a simple Express route to fetch and display product data on the product page.

Week 7:
JavaScript for Form Handling Learning Objectives: Learn JavaScript for form validation and submission. Understand asynchronous JavaScript: fetch API for sending data to the server.

Project Tasks: Add client-side form validation to order.html (e.g., ensure required fields are filled). Use JavaScript to send form data to an Express route via a POST request.

Week 8:
Backend Order Processing Learning Objectives: Learn how to handle POST requests in Express. Understand how to insert data into SQLite from Express.

Project Tasks: Create an Express route to handle order form submissions. Save order data (e.g., product ID, customization options) to the SQLite orders table. Return a confirmation message to the client upon successful order submission.

Week 9:
Enhancing Frontend Functionality Learning Objectives: Learn advanced JavaScript: dynamic content rendering and error handling. Deepen CSS knowledge for polish (e.g., hover effects, transitions).

Project Tasks: Dynamically populate the product page with data from the SQLite database using JavaScript. Add CSS animations or hover effects to improve user experience (e.g., on buttons or images).

Week 10:
Testing and Debugging Learning Objectives: Learn basic debugging techniques: browser DevTools, Node.js console logs. Understand testing a full-stack application (frontend and backend).

Project Tasks: Test the website: navigate between pages, submit orders, and verify data in SQLite. Fix any bugs (e.g., broken links, form submission errors, or database issues). Ensure responsiveness across devices (desktop and mobile).

Week 11:
Final Polish and Documentation Learning Objectives: Learn how to document a project: code comments, user guide. Understand basic deployment concepts (optional for learning, not required for project).

Project Tasks: Add comments to your HTML, CSS, JavaScript, and Node.js code. Create a simple README.md file explaining how to run the project and its features. Polish the UI: ensure consistent fonts, colors, and spacing across pages.

Week 12:
Presentation and Submission Learning Objectives: Prepare a project presentation: explain what you built, what you learned, and challenges faced. Review all project requirements for submission.

Project Tasks: Record a demo video or prepare a live demo of the website (home page, product page, order form). Submit the project files (code, database, README) as required by your instructor. Practice explaining the tech stack and your implementation process.

Weekly Project Update Blog Posts

Week 2 Post

What did you do last week
With last week being the first week of the course, I spent most of my time familiarizing myself with the overall course and going through the materials provided. I took some time to review the provided Github Pages resources and went ahead and created the repository to hold my personal website. I also began thinking about What my project for this class will be. I had an idea of what I wanted to learn coming in and ultimately decided what I will do.

What are you planning on doing this week
This week, I plan to start doing additional research on what skills will be needed to complete my project and put together my proposal. As I will lay out in my project proposal, I plan to create a full stack e-commerce website and this will require me to learn a lot of new skills. From my initial research, I know that HTML, CSS, Javascript and SQL are key ingredients in creating a fully functioning website. However, at this point, I'm still unclear as to what other technologies / libraries such as React or Angular I would need to learn to make this work. At this point early on in the week, I've talked to someone that has some limited experience with web development and began doing some research into these libraries. As I've never used any of these languages, and I'm not entirely sure yet how Javascript interacts with an HTML doc but I feel I'll start to get a better idea of what is truly needed as I start learning them. Additionally for this week, as HTML and CSS are 100% going to be needed for this project, I've started learning these languages and as an update, I found I was able to learn HTML very quickly and, while CSS syntatically is quite simple, it can be tricky at times, especially trying to position things! I'm getting some practice in using these new skills in building out my personal website. In terms of resources, I've found some really great courses on Codecademy as well as various websites such as Mozilla (MDN), books and youtube videos to help me in the learning process. Going into the next week, I plan to keep learning some additional HTML/CSS before I move onto Javascript. I want to make sure I have a decent foundation in those before I move on. Once I have a solid understanding in HTML/CSS, I feel I'll have a much better idea as to how to structure my project's website, at least from design perspective.

Are there any impediments in your way?
Impediments for me would be trying to learn the new languages and managing my time with work, family, etc. Sometimes I get too optimistic on what I want to get done for the week and things just get in the way. As I'm making use of the codecademy courses as my basis on getting start in the new languages, these courses are structured well, which gives me targets to aim for in my learning for the session / day as I'm learning.

Reflection on progress and improvements
Last week was somewhat light and sporadic. Going forward, I need to make sure I set aside dedicated time to learn these languages and work on the project.

Week 3 Post

What did you do last week
Last week I spent a good amount of time researching what all what be needed to make my website work. I watched some youtube videos and read some sites about what the different components of web development are. I now have a better understanding of what things like Node.js and React are as before this week, I had absolutely no idea. It also makes me feel much better going into my project and makes me eager to get started. Additionally, I worked on building out my personal website (Still working on it!) from scratch with html and css (after I did some more tutorials on it) and I can say I've gotten a much better feel on how to lay out those flex box and grids! Also, this past week I worked on putting together my proposal for the course project.

What are you planning on doing this week
This week, once I have all of the course housekeeping items like doing the peer review of proposals completed and piazza posts in, I plan to do some review of HTML and CSS topics and put it to use by continuing to work on my personal site. My overall plan is to dive into JavaScript,. so I want to put myself in a good spot on these languages before I move on. Also, I have spent a little time on CSS so I can get myself familiar with it, but I do want to explore one of the CSS frameworks like Bootstrap or Bulma that was recommended to look into. This is something I would like to utilize for my project. Additionally, time permitting, I'm going to begin sketching out the website for my final project - Depending on where I am, this may roll into next week.

Are there any impediments in your way?
Really the only impediment for me at this point is just time. Working full time just gets in the way of everything :D but I'm confident I'll be able to get through most of what I want. My family is very supportive and they try to give me time to focus.

Reflection on progress and improvements
I'm happy with where I'm at right now - Since I knew what I was wanting to learn even before the proposal, I've already got a head start on the HTML and CSS front, so i'm actually a little ahead of my AI generated roadmap. I love being ahead of schedule, so I will continue pushing forward so I can continue to give myself that little extra wiggle room!

Week 4 Post

What did you do last week
Last week I worked primarily on my proposal and making sure that I had a good plan in place to get started. I also continued some of the course work on CSS on Codecademy and put it into practice my working on my personal website. I've gotten it to a good point now, where it's presentable (My Website), but it's going to be one of those things I continuously update as I go. Honestly, I've been using it as a playground for trying out the new things I'm learning, so it will only get better!

What are you planning on doing this week
This week I started learning JavaScript, I'm not very far yet into the language - I really only covered basic syntax like your variables, functions, loops and conditionals. I was actually pleasantly surprised how quickly I was able to pick up the language. In part is because I'm already familiar with the major coding concepts like the aforementioned topics, but also the syntax (well at least pre ES6 syntax) is eerily close to C++ syntax. Some of the newer ES6 syntax like the arrow functions was new to me, but wasn't much of a problem once I worked through a couple examples. Another thing I'm in the process of doing right now is watching a beginner tutorial over Bootstrap on Freecodecamp. I'm glad I learned the basics of CSS, but it can be super tedious; however, you need know it if you want to alter the bootstrap classes. My personal site was all made from scratch and took a lot of tinkering, so in my project I'm hoping to utilize bootstrap to help with the front end design. In raw CSS, it was super delicate on making things work out how I want it to look, especially with the responsiveness, but Bootstrap uses a grid system based on flex boxes and so far it seems pretty easy to lay out it. I want to make sure I have good understanding on how to build out the page needed to use Boostrap's grid system - you have to structure your HTML file in a specific way using containers / rows / columns, which is different than in raw html/css flex/grid system. Once I have a good understanding and work out the examples with the tutorial, I'm going to start laying out my project site. I'm almost to the section of my course where you stat using JS to interact with the DOM, so I'm super excited to actually make JS do something.

Are there any impediments in your way?
This week I was hit was some kind of feverish, sickness that took me out of commission for a few days, but I'm on the mend. So trying to pace myself, but also keep up with everything.

Reflection on progress and improvements
Despite me being down a few days, I still feel like I was able to get back up and keep pushing forward. I think one of my problems is that I keep getting sidetracked as I'm working on stuff. For example, as I'm learning some basic JS concepts I want to dig deeper into how it works and then spend time looking at that. At this point I just need to keep myself on tasks and keep the objective in mind first.

Week 5 Post

What did you do last week
Last week I worked primarily on my proposal and making sure that I had a good plan in place to get started. I also continued some of the course Last week I spent some time learning more JavaScript and also learned the basics of Bootstrap. I got through Codecademy's Intro to JavaScript course. I feel like I've got the basics of the language down pretty well, functions, loops, etc. One achievement I had in the last week was learning how JavaScript interacts with the DOM (how to select elements in JS and update their properties and all of that) I even added some basic JS interactivity to my personal site for the course blog posts so they can collapse / expand - was a super cool feeling getting that to work.

What are you planning on doing this week
This week I'm working to expand my JavaScript skills and start building building out my website. I'm starting with the home page and then going to work through building the others. One thing I've started to learn about this week and will continue are HTML forms and how input data is assigned. Time permitting this week, I want to start learning about some backend topics - I feel like this may be the most difficult component so I'm going to try to get a head start on learning about it.

Are there any impediments in your way?
Like always, Just time!

Reflection on progress and improvements
I feel like I've spent a lot of time on the front end area and I'm wanting to shift more into backend components - I spend too much time trying to tweak designs, even using bootstrap, I'm just coming to terms with myself that I need to focus more on the functionality vs appearance for now. I'll come back to the design tweaking once I get things up and running I think.

Week 6 Post

What did you do last week
Last week was really all about learning more JavaScript - I was able to get through some more advanced topics of the language like classes, importing / exporting modules, error handling. I continued to actually put together the front end part of the website - I've come to the conclusion that my website is going to be pretty basic at this point so I can focus more on the backend area now and I will come back to the design components later. My goal at this point is getting it to work at the most basic level. (I have a website, it has a home page, has a page for the product, takes you to the order form, submits data to backend for storage in the database, and then i'll have a page where I can get the data from the database so we can view the order data. Once I can get this working, I can keep improving.

What are you planning on doing this week
Quite honestly, the weeks run together, but at this point i've really started learning about how websites communicate and how my site will ultimately be able to communicate with the backend. I started off the week with learning about asynchronous JavaScript and about how the 'event loop' is used to run this code. The topics I've been hitting this week so far are: promises and the related Async-Await syntax and then I've just completed some lessons on the fetch API to make requests. Along the way in learning these, I've learned about the heavily used JSON format to transfer data, REST Architecture and the main HTTP 'verbs' (GET, POST, PUT, DELETE). Now am I an expert in any of this? Absolutely not, but it's my first time seeing a lot of this so I already feel much more capable in getting this website to work. I've gotten everything I need to installed on my machine to get this to work, Node.js and Express and SQLite so NOW, I just need to get it all talking to each other. I just finished this lesson over Fetch, so I'm going to start looking some of the backend area - try to learn about express / learn some SQL. Like a fish out of water, but it's great.

Are there any impediments in your way?
Nothing in particular, I've been hammering away at learning all of these new concepts and it's a lot to retain, but I keep my resources close by. Since I'm learning a lot of these areas right now, all I have to show for my project is really front end components at this point, but I'm confident that will start changing soon!

Reflection on progress and improvements
Last week went pretty well, honestly, I think I need to take more breaks away from the screen - working all day and then I want to jump right away into working on this afterwards can sometimes warrant a break. So just need to budget some more of those in there!

Week 7 Post

What did you do last week
Last week I started to get into the backend part of the web development world. I started off with in an introduction into node.js and some of the differences between it and the browser version of JavaScript. I spent some time learning about the built in modules in the Node.js environment such as 'event', 'fs', 'http' among others. I also learned about the node package manager and how to bring in external modules, with the big one being Express. Most of last week was really beginning to learn about Express. The lessons took me a little to get through, but I now how a good idea of how an express server works. I've spent time learning about routes, which basically directs the incoming request to the appropriate middleware to handle it. One of my accomplishments in the last week was getting my website and my express server to communicate. After figuring out I needed to use the 'FormData' interface to submit my impromptu order form data (on the browser side) and the multer package on the server side, I was able to see the see my data and send a response back. This was a moment of complete excitement for myself getting this to work.

What are you planning on doing this week
I'm still learning about express middleware this week, but after I finish these few lessons. I'm going to tackle SQL and SQLite. The last big piece I need to get it all working. I feel like once I get this under my belt, I'll be able to spend some more time actually building my site. So this is going to be my focus in the next week.

Are there any impediments in your way?
Nothing major - the holiday over the weekend might cause some disruption to my flow, but nothing that will ultimately slow me down

Reflection on progress and improvements
My process for the past week has been consistent with how I've been moving along throughout the semester. I try to squeeze in what I can, when I can, but I've been making good progress. I definitely feel like I have learned a lot working on this, so I'm just excited to keep moving forward on it.

Week 8 Post

What did you do last week
This last week I spent a majority of my time learning more about express.js and learning SQL. (Another cert for the win!). In the first part of the week, I was finishing up a module over express where I learned about components of express such as Routers and Middleware stacks and then moved on to the final piece of SQL that I need to get my project to work as intended. The course I did made SQL seem pretty straight forward - I learned things like how to create tables, SELECT records, but then also how to perform operations on results with the aggregate functions like AVG, COUNT, GROUP BY, etc. The thing that gets me though is remembering the ordering of the statements. Again, these were the basics, I'd imagine it can get a lot more complicated...

What are you planning on doing this week
This week, I'm working on connecting it all. I've been spending this week learning about the node package sqlite3 and using my new SQL skills within my JavaScript code to interact with my database. I'm still working on this module, but I got excited and went ahead and attempted submit some form data from my premature website to my express server and ultimately to my database. (See some screenshots below!) I was beyond excited to see that record in the database... For the rest of the week, I plan on finishing the lesson over the sqlite3 package and then, I want to explore how I can create a session for the user - as in the user doesn't need to sign in or anything, but can build out a cart and have the data retained as they navigate the site and then everything is submitted and added to the database once the order is complete. I've only done some light research so far on it, but there is an 'express-session' package for node.js. I'm not entirely sure though if this concept is something managed by the browser or the server (or both?). If anyone can shed some light on how one would do this, let me know! So this is something I'm going to look into more. But beside these items, I'm going to continue to build things out now that I have an basic understanding of how it all works.

Are there any impediments in your way?
Nothing major this week! Just continuing to push forward!

Reflection on progress and improvements
Last week was a little more challenging with the holiday weekend, but I still managed to get through things, albeit not as fluidly as normal.

Week 9 Post

What did you do last week
This past week was a good week for my project - I spent the earlier part of the week finishing up learning about the SQLite3 package for node.js and learning how to use SQL and JavaScript together to add to and query my database. From there, I really wanted to make it so my site can retain customer data as they shop. So, if the customer adds something to the cart and then navigates to another page, but then navigates to their cart and will have all their previously added products populate the cart. A pretty simple idea, but I ultimately had to spend some time learning about sessions in express, where each user that goes to the site will be given a session id and is sent back and forth between the client and the server. I ended up having to use the 'express-session' package to initiate the session. I can say, however, that I successfully got this working and now the cart page is always up to date. This was one of my proudest moments this week!

What are you planning on doing this week
Now that I've got my session feature working, this next week I'm really going to be focused on continuing to build out the rest of the site and continuing to add Routes to my express server where needed. I've gotten to the point where the cart is updated with current items and now I'm going to add the step where the customer provides personal details/ like contact and shipping information and ultimately I want to then get the actual orders submitted to the server/database. I'll need to figure out how I'm going to organize the tables in the database and then route the submissions as needed. So this is my main focus this next week. Once I have that working, I'm going to go back and add a few different product pages (I've been working with just 1 product type right now (bracelets) as a template for purchasing a product for (like below) but the others will be very, very similar with a few different inputs. Once I've got this, I'm going to then focus on making everything looking a little nicer in the extra time I have left in the semester. One other thing I need to learn more about / add into my site is security. This quickly turned into a wish list of things I want to get done, but this week's focus is getting a complete order submitted.

One other thing I plan to do in this next week is to put together an updated resume for my CS career. Right now it's all accounting focused so I'm going to see if I can find some guidance on how to build out a resume for career switchers to help stress those transferrable skills and the projects I've already completed.

Are there any impediments in your way?
Not really an impediment, but more just that I'm learning so many things in a short amount of time - trying to recall everything I went over while learning one of the languages. There's a lot of me referencing back to the documentation even sometimes for more basic things in JavaScript, but when I see it, i'm like, Ah yes! Now I remember! Luckily there are so many things to reference out there!

Reflection on progress and improvements
My process really has just been jump into working on the project whenever I can, I think for me personally, I need to pace myself and maybe take some designated breaks from it. It's hard to do that because I just want to keep going on it, but I feel myself slowing down and I think this is a factor there.

Week 10 Post

What did you do last week
This week I stuck with my goal of getting an order fully submitted on my website. I spend a little time at the beginning of the week laying out my database tables and then establishing the tables within my SQLite database. One struggle I had as I was working on this part was that I had tables that built off of data form another, so my order table has records that are linked via a foreign key to the customer table's primary id and then the order detail table that contains the records for each product sold attached to the order is tied to the order table. Ensuring that my database write requests were performed sequentially so the newly created ID could be used in the subsequent write, I initially had the database writes nested within the callback functions of each write. It was disgusting, it worked, but disgusting. It was late when I did that and then came back to it the next day and thought, why not just make these separate middleware functions and call next when done - so I did that and now it actually looks nice. So mission accomplished there! Here are some pictures of some data submitted:

This was a major milestone for me - now that I understand how it all works, it's much easier to make changes like adding new fields/ tables. For now, i'm skipping the payment portion of the order submission - this is going to involved api calls to a service like stripe, but I'm very confident I can get that implemented once this site is actually ready to live on the web.

What are you planning on doing this week
For this coming week, now that I've got it performing the critical function of submitting order data, I'm really going to spend some time on "cleaning things up". As I've had to keep picking up this project and putting down when I have time, I quite honestly haven't been as organized as I ideally should have. Also, since I've been learning so much trying to just get things to work, the cleanliness got away from me. So first thing im targeting this week is going through deleting useless comments or code I don't need, going to organize my code base a little more to actually make it look, well, good like placing my middleware functions for my database operations in their own file and import in as needed, things like this. After this, I'm going to work on building out the other two product types i'm going to include - this shouldn't be too bad as the design is quite similar to the bracelet page I've got and the server routes I have should be able to be reused. Depending on how much I can get to this week, I REALLY want to start learning more about the security considerations I need to take on my site.

Are there any impediments in your way?
Nothing major this week - just a few family events that will take some time during the weekend, but no issue there.

Reflection on progress and improvements
I keep getting distracted with little things I want to add in as I go - for example, I have an api call that pulls the sales tax amount from api ninjas - but my submit button was able to submit the data before the api call returned which was causing an issue server side. I soon as I realized this, I got distracted and started on working on this instead of the bigger issue I was having with my database write sequence. I fixed it, but I think I need to start taking inventory of the smaller problems I encounter and come to them. Sometimes the little things are frustrating and I want to fix on the spot and it takes me away from my train of thought on the other things.

Week 11 Post

What did you do last week
This week I kept to my plan of performing cleanup on my code. In the process, some things broke, but I worked through each thing as it happened and definitely added to my learning in the process. An example of something that caused issues was moving all of my database middleware functions to their own file so I can then import them into my server Router file. I really just had to make some small tweaks and export/import them correctly, but I got it all to work. Another example was moving my index file to the root directory, like it should be, this was throwing my links off and I had to play with my express.static paths.I also spent some time adding/adjusting styling on some of my pages - this always takes more time than I want.... but it definitely looks better! But I really wanted to make it a lighter week for myself, so I focused mostly on cleanup.

What are you planning on doing this week
For this coming week, in addition to continuing to clean things up and make the site look more presentable, I'm going to work on adding a site owner dashboard, a place where the owner can essentially view, interact with and update orders. I know I keep saying it, but I want and need to look into the security aspects of a website. With the class coming to an end, I might not be able to get fully into this, but I'm going to at least start learning about this so I can implement later need be. If anyone has any good resources on learning about web security, please share!

Are there any impediments in your way?
My own ambition (and work :D) - I have so many things I want to learn about, I sometimes get sidetracked, like looking at DSA sections on leetcode or something, and I only have a few hours a day if i'm lucky to work on things. I need to stay focused and wrap up this project before I try to get into something else.

Reflection on progress and improvements
My process has been pretty consistent throughout the semester and it seems to work for me!

Week 12 Post

What did you do last week
This past week I implemented (mostly) a site owner dashboard that allows the user to view and interact with all orders. Essentially it will pull order data form the database (all orders, open orders, by customer ID or Order Number for now). the user can also expand the customer ID and/or the order details by clicking on the +/- and it will further query and display the additional detail. Also, the user can interact with and update information on the orders, like i show below the order status can be changed and this will then be posted to the database when they make the change - so a little interactivity! I've just got this and like the order notes/ship date fields able to do this so far - but got it to work and was a cool feeling! See a screenshot below. Right now, I just placed a link to the dashboard page at the bottom of the home page (I know I know this isn't realistic :D), but once I get the user authentication / authorization steps figured out, this would of course require login. I started looking at some security related content that uses passport.js for this process, but I can almost guarantee I won't get to it before the end of next week. So this is something I'll keep working on implementing after the course among other things!

What are you planning on doing this week
I'm going to Germany with the family next week for a few weeks the day after class ends, so trying to get myself packed and ready for that will take some time - Saturday's going to be my big push to get my paper finished and I'm also going to create a short video walkthrough of my website.

Are there any impediments in your way?
My own ambition (and work :D) - I have so many things I want to learn about, I sometimes get sidetracked, like looking at DSA sections on leetcode or something, and I only have a few hours a day if i'm lucky to work on things. I need to stay focused and wrap up this project before I try to get into something else.

Reflection on progress and improvements
Nothing different in this last week for my process - I just keep trying to grind through things whenever I can!

Week 13 Post

See the final report on my semester project: Download



Download Video