This website was built for the company, Imprint Genius, for customized package ordering. View of development team:
Jennifer Bernal, @jenber23: Scrum master, developer
Pablo Garces, @pablogarces16: Project manager, developer
Sneha Patel, @SnehaP17: Developer
Paula Martins, @pmartins1ufl: Developer
Evan Bourque, @devanevan/@bourqueeh: Developer
Imprint Genius, @imprintgenius: Visionary, project inheritor and product owner
https://imprint-genius.herokuapp.com
To run the project locally, clone the repository to your local machine.
Use npm install to install package dependencies.
Run #### npm run-script client
Connecting to Heroku Dashboard
- https://id.heroku.com/login a. Log in with same username and password as gmail
- https://dashboard.heroku.com/apps a. Select “imprint-genius” as your app on the Heroku homepage
- https://dashboard.heroku.com/apps/imprint-genius a. Choose Deployment tab on top header
- https://dashboard.heroku.com/apps/imprint-genius/deploy/github a. App connected to GitHub: Ensure app connected to Github is CEN3031-Group8e/ImprintGenius through the imprintgenius git user account b. Automatic deploys: Enable automatic deployments; leave this on so the website can be continuously updated. c. Manual deploy: Force deployment on command
- At the top header, select “Open app” to view deployed site
- Viewable on https://imprint-genius.herokuapp.com/
Homepage
In the home page (package page) see more pop up gives an over view of the package.
Build pack takes customer to the customizer where you can upload logo for apparel.
Quantity allows customer to choose different sizes for apparel.
Colors allows customer to choose different colors.
Once all details are filled, submit button is enabled and takes customer to a form for customer details.
Customer can review order and place order. On placing order, customer is notified that the report is sent.
Client recieves order details in the email.
Separate logos can be uploaded for apparel and promo items.
The quantity indicates missing quantity and excess quantity based on package details given by the client.
Submit button on customizer is enabled only when all package details are filled in by the customer.
Email.js
Bootstrap
Bootsnipp - https://bootsnipp.com/snippets/DOXy4
When trying to access the Customizer or Report page through the url search bar (e.g. .../Customizer), the pages crash because they rely on the data from the previous page to render (i.e. Customizer relies on Homepage and Report relies on Customizer).
No error capture could be done to handle those crashes; it needs to be fixed by handling how pages are routed if the data is empty.
- Add custom logo positioning
- Add descriptions for each individual item
- Change apparel colors when selecting
- Enable customer to go pack to the customizer page once report is filled and keep the original data instead of refreshing
This is the original readme of the project that we built upon. This can be used to add back-end to the web-app.
This project was bootstrapped with Create React App. This project contains an example project board meant to showcase how one can be used. The issues posted to it are not real issues.
This project does not have a mongoDB connection setup. For:
- local development: create a config file (make sure to name it config.js) in the config folder, which exports your db.uri connection. An example is provided, config/config.example.js. This file will be ignored by git so your db credentials will be kept safe when the app is deployed.
- production: Since the config file is not pushed when you deploy your app, you must specifiy your db uri in heorku. Set the uri in heroku as specified in this resource. Make sure you name the environement variable "DB_URI".
This repository aims to assist you in beginning work on a MERN stack application with a solid file structure as a foundation. To get started make a copy of this template repo for your project teams.
Since this project will hold both the client application and the server application there will be node modules in two different places. First run npm install from the root. After this you will run npm run-script install-all from the root. From now on run this command anytime you want to install all modules again. This is a script we have defined in package.json .
This app can be deployed directly to heroku since there is a script defined in package.json which will automatically handle building and deploying the app. For more information on deploying to heroku reference the extra resources at the bottom of this file.
In the project directory, you can run:
Runs both the client app and the server app in development mode.
Open http://localhost:3000 to view the client in the browser.
Runs just the client app in development mode.
Open http://localhost:3000 to view the client in the browser.
Runs just the server in development mode.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
If deploying to heroku this does not need to be run since it is handled by the heroku-postbuild script
See the section about deployment for more information.
You can learn more in the Create React App documentation.
To learn how to setup a local MongoDB instance for testing, check out how to Connect to MongoDB.
To learn how to deploy a full-stack web app to heroku, check out this great guide.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify