Wall Covering Calculator and Material Procurement Portal

Overview

Wall-Pro MPP

--Wall Covering Calculator and Material Procurement Portal--

shaw-ppc

Table of Contents:

About This Project:

Links:

Deployed Application: http://www.WallPro.net
Repository: https://github.com/mbussert/shaw-ppc

Description:

The application will assist clients in calculating square footage measurements for wall installation material deliverables on behalf of the design company. The average user will be able to utilize the calculator tool to place product orders, save their account info to view order history, and notify the administration team of their new orders.

User Story:

  • GIVEN I need to submit vinyl installation projects with specific measurements to a designer
  • WHEN I visit the home page
  • THEN I am able to create an account or proceed to the calculator tool and information about how the calculator tool works
  • WHEN I visit the “How it Works” page
  • THEN I am able to view a video detailing how I should use the calculator tool, along with step-by-step instructions that are simple to follow
  • WHEN I view the “Calculator Tool” page
  • THEN I am able to view previous projects I have submitted (if I am logged in), and create a new project
  • WHEN I choose to create a new project
  • THEN a modal appears (if I am not logged in) reminding me to log in if I want my project to be saved, and have the option to continue if I do not want to create an account
  • WHEN I continue to create a new project
  • THEN I am asked to create a name/number for the first wall of the vinyl installation project
  • WHEN I submit my new name/number for the first wall
  • THEN I am asked to choose which material I would like for the wall
  • WHEN I submit my chosen material and choose to continue
  • THEN I am asked to choose a unit of measurement from a dropdown list that will be used for calculations
  • WHEN I enter a unit of measurement and choose to continue
  • THEN I am asked to enter the total length of the wall
  • WHEN I have entered the total length of the wall and continue
  • THEN I am prompted to choose whether to include an additional six inches of vinyl material to my measurements for production purposes
  • WHEN I click the “Calculate” button
  • THEN I am shown my project’s details and calculated measurements
  • WHEN I save the new project
  • THEN the project is added to my existing projects in the sidebar
  • WHEN I click an existing project in the sidebar
  • THEN I am able to add and save additional walls to the project
  • WHEN I view my “Account” page
  • THEN I am able to easily view details about all projects I have submitted
  • WHEN I am offline
  • THEN basic functionality of the site persists

Built With

Frameworks Dependencies
React Sass
MySQL Material-UI
JavaScript NodeMailer
HTML React Player
CSS Express
Node.js Axios
Sequelize Passport

Team:

Getting Started

Installation:

  1. Clone the repo
    git clone https://github.com/mbussert/shaw-ppc.git
  2. Install NPM packages
    npm install
  3. Start the application on localhost:3000
    npm start

Usage:

Demo video coming soon...

License:

This application is covered under GNU AGPL v3.

Contributing:

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Tests:

Tests coming soon...

You might also like...

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

 İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

🟡 instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment 📷 ⚡ LIVE To check out the live demo of this app AB

Apr 20, 2022

Worldwide-covid-statistics - covid-19 tracker developed using Reactjs, Axios , chartjs, material icons

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2022

Material Design Web Components

Material Web IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release. Material Web is Google’s UI toolkit for bui

Dec 31, 2022

Material Design Lite for Ember.js Apps

Material Design Lite for Ember.js Apps

ember-material-lite Google's Material Design Lite for Ember.js apps This addon requires ember = 1.11.0 Installation # ember-cli 0.2.3 ember install

Dec 17, 2021

Ember implementation of Google's Material Design

No longer maintained This project is no longer maintained. For an up-to-date material design project, please use Ember Paper. Ember-material-design Th

Mar 1, 2022

A PhotoShot Plugin to get material you colors easily.

material-you 可以快速获取符合 material-you 配色的 PhotoShop 插件。 参考自 Material Theme Builder 安装 初次安装 从 release 中下载压缩包并解压。打开 Photoshop ,运行 文件-脚本-浏览 ,选择安装包中的 安装脚本.js

Jun 17, 2022

A component library based on Material Design 3 & Web Components

material-web-entity Material Web Entity A component library based on Material Design & Web Components Go to link to see what components this library s

Jun 3, 2022

Quick study on NextJs + Material UI

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jun 29, 2022

Course material for Mobile Application Development, Integrated Digital Media, Tandon School of Engineering, NYU

Mobile-Application-Development Course material for Mobile Application Development, Integrated Digital Media, Tandon School of Engineering, NYU Classs

May 1, 2022
Comments
  • Modal Overlay

    Modal Overlay

    Created modal overlay

    Created mobile view for Dev team page (Still need to add in more responsive styling)

    Adjusted desktop NAV bar so when the user is logged in everything displays evenly on one line

    Added meta-tags to HTML

    opened by Yeatman51 0
  • Validation/user feedback updates

    Validation/user feedback updates

    • Snackbar resets on timeout (if a user fails a second time, the alert will pop up again)
    • Defensive coding in all forms prevents certain keys in particular input fields (i.e. only alphabetical, only numbers/decimals, etc)
    • A new render will take the user to the top of the page
    • Failing to create an account does not redirect the user to the login page; they stay on the same page and get an alert
    • Sequelize validation isEmail is now used for the database
    • Users can optionally add the six inch border, and that is now taken into consideration in the arithmetic function
    • Changed the Wall model to include decimals for width and height instead of strings
    • The clear function on the calculator now works as expected; clears the formObject and clears what the user sees on the page
    • A user is redirected from the create account page if they are logged in (since they shouldn't need to create subsequent accounts)
    • Logged in users redirected from log in page if already logged in
    • Updated footer by removing a couple links that can be easily accessed in the navbar
    • Created snackbars for the log in page and calculator page (the calculator has a success message and a warning message depending on if the order was successfully posted to the database)
    • Rewrote the arithmetic test (now that you also need to pass it a boolean about the border) and all tests are passing
    • Removed the extra copy of material-ui/styles that was causing a warning in the console
    • Commented out the registerServiceWorker stuff in the index.js file that was causing an error in the console (since we don't currently have a service worker file)
    opened by vruss14 0
  • Mobile menu styling

    Mobile menu styling

    Mobile logo and hamburger bun styled also created NAV menu styling.

    Still need to work on the on click event so when the hamburger is pressed it displays the mobile menu

    opened by Yeatman51 0
Owner
Mike Bussert
Former litigation attorney turned full-stack web developer
Mike Bussert
This is a single page application that includes three pages; Home, Calculator and Quotes. You can do Math Calculations and read quotes.

Math magicians app This is a single page application that includes three pages; Home, Calculator and Quotes. You can do Math Calculations and read quo

Lynette Acholah 12 Jun 7, 2022
React Calculator-App

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Anton Dektyarev 1 Jan 15, 2022
This is a calculator application. The user can do some calculations on this application.

Math Magicians This is a calculator application. The user can do some calculations on this application. Built with: Reactjs Redux Live Live demo deplo

Firdavs Allamurotov 4 May 15, 2022
GitHub action to get notification whenever vaccine slot is availble in cowin portal :tada:

Covid Vaccine availability notifier Setup Fork this repo Update the config at src/config.js Delete the db file src/db.json module.exports = { // opt

Ameer Jhan 32 Jul 27, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React Start your Development with an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest

Creative Tim 182 Dec 28, 2022
👉 Built my first React JS project "ToDo" webapp using some Features and Icons from Material UI.

# Getting Started with Create React App This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). ## Avai

Vansh Chitlangia 2 Dec 15, 2021
Bdc-walkthrough - An Angular Material library for displaying walk-through pop-ups and dialogs using a declarative way.

Material walk-through library An Angular Material library for displaying walk-through pop-ups and dialogs using a declarative way. Show Demo Prerequis

Broadcom Inc 65 Dec 14, 2022
A beautiful and easy in hand blog made by Next.js Material-ui

Material-blog A beautiful and easy in hand blog made by Next.js Material-ui! Deploy your own Deploy the example using Vercel: Usage Install node_modul

Willie Xu 1 Mar 3, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022