Sundae Worship

Contributors: Trevor Rapp

Project published at:

Sundae Worship

Version 3.0 demonstrates

After successfully completing this project, I set it aside for a while. But eventually the itch came back. This time I decided I would do a complete rehaul of everything. This would include:

Project Management

🆕 Utilize GitHub Issues feature to create, assign, and organize issues

🆕 Incorporate GitHub projects to track multiple projects simultaneously across simulated sprints and development stages

• [ ] Documentation, Documentation, Documentation

Technologies

🆕 integrate content versioning software (Git and Github)

🆕 integrate NodeJs for runtime build and to decrease build time

🆕 utilize NPM for build packages, tracking dependencies, and future proofing

🆕 utilize Express for routing

🆕 utilize HTML5, Sass, CSS and JavaScript for Front End

• [ ] utilize SQL to build back end
• [ ] utilize Stripe for ecommerce
• [ ] utilze GTM and GA for analytics

Marketing

🆕 rebrand name of company

• [ ] use Adobe Color to create unified color palette to use for theme throughout site
• [ ] create mobile presence
• [ ] incorporate SEO strategy
• [ ] define target market
• [ ] create call to action

🆕 use Google Browser feature to create QR code for business card and hyperlink to social media acconnts

UX/UI

• [ ] improve speed of website from v2.0 and v3.0
• [ ] get assessment for ADA accessibility and fix issues
• [ ] JavaScript to support touch and swipe capabilities

🆕 create 404 error message

• [ ] simply by hiding necessary, but unfrequently used settings, features, or information

🆕 visually indicate if content exists beyond the fold

🆕 create effects to indicate interactive capabilities

Front-End

🆕 move from static page to dynamic MVC architecture

• [ ] create templating

🆕 build multiple pages

• [ ] convert CSS to grid

🆕 alphabetize CSS for better maintenance

• [ ] contact form that handles form submission

🆕 GET and POST requests

Back-End

• [ ] SQL database
• [ ] CRUD functionality for both products and orders
• [ ] One-to-Many and Many-To-One relationships
• [ ] Authentication
• [ ] Validation

Eccomerce

• [ ] create usable stripe integration

Data Analytics

• [ ] incorporate Google Tag Manager and Google Analytics
• [ ] track button clicks
• [ ] track page views
• [ ] track sessions across multiple pages
• [ ] track time on page
• [ ] create banner to accept cookies and cookies which will save to local computer a userID, last date visited, time on site, and cookie expiration date
• [ ] create custom filter to filter out internal traffic
• [ ] create reports for sales
  
  

Version 2.0 demonstrates:

But that wasn't enough for me. I wanted to make it better. Even though it was my first project, I wanted to show that I could improve on it, so I refactored the code to:

• [x] create a JavaScript object
• [x] place that JavaScript object in a file that had to be imported to practice connecting html to JavaScript files.
• [x] create a JavaScript object that included with the name and the individual data for each type of ice cream.
• [x] create a JavaScript function that imported the information, iterated through an object with multiple levels, sorted it alphabetically, and then use JavaScript to dynamically built a full table complete with <table>, <tr>, <th>, and <td> elements which each contain the correct information and styling.

Version 1.0 demonstrates:

• [x] Initiative.

  • This project has gone through three distinctive versions. The first version was the most basic, day-one introductory assignment from Iron Yard coding camp. All it required were:

• [x] Build a homepage for your local ice cream shop.

• [x] Initialize and push/pull to a GitHub repository.

• [x] Regular commits and use proper semantic HTML tags.

• [x] Include

  • the shop's name
  • a brief history (use lorem ipsum)
  • a logo (any image you can find online)
  • the store's hours and contact information
  • flavors available (list at least 5 and no more than 42) with:
  • name, calorie count, and whether it is sugar free or not
  • a link to Wikipedia for that flavor

• [x] See every other flavor on the menu alternate its background color (commonly called "zebra striping")

• [x] Restrictions:

  • don't use any libraries, extension, modules, or frameworks other than normalize.css and font-awesome flexbox
  • don't use animations such as CSS3 or canvas. You may use animated gifs, but keep them portfolio professional if you do.
  • don't use tables for layout of anything other than actual tabular data (depending on your design the ice cream flavors, whether they’re sugar free or not, and their calories may qualify as tabular data)

• [x] Use <aside> and CSS to create a left side-column with margins.

• [x] Create Mobile Responsive design

• [x] Create Social Media links

Color Palette

Screen shots were taken from an excellent on-line tool from Adobe called Adobe Color. You can find it at color.adobe.com.

Project published at:

Sundae Worship

More Information:

*For more information see LinkedIn, or return to my Github