This project is deployed at https://facerlock.herokuapp.com.
The newsletter sign-up form uses the form creation function in Zoho Campaigns. The autogenerated iframe codes from Zoho was used and put into the website.
We used the Bootswatch theme "Lux" as a Bootstrap CSS theme. Tutorial for timeline component: https://veysiyildiz.github.io/vertical-timeline-component-for-react/#/demo Component stylization: Bootstrap-react API and react strap
- About Product *
- Cart
- Displays the items when corresponding "Add to Cart" button is clicked on Buy page. Retrieves lock information from database and checks whether incart field of json is true or false.
- Complete Timeline
- Combine the backend data to the front end component of the timeline. Each entry into the timeline database represents a timeline item.
- Contact *
- Contact Form *
- Features
- This is the cards and table component that are on the feature page. To change the table headers you can see the live example and just change values or create new rows or columns if needed.
- Footer *
- Future Locks
- Contains the future of locks component, any change here will effect that box.
- Header *
- Learn More
- Contains the Zoho newsletter/mailing list sign-up form, as well as a link to a Kickstarter page.
- Pay Entry
- Contains lock information that is displayed on Buy page. Information about the locks is retrieved from the database.
- Testimonial Modal
- Modal that appears when secret button below Testimonials Carousel is clicked. Allows the user to add/update/delete testimonials in the database through the frontend. Communicates to the backend and makes these changes to the database.
- Testimonial Carousel
- Grabs testimonials data from the backend and presents it as a carousel component.
- Timeline
- Contains the information that builds the timeline and unites its children (TimelineItem) into one timeline.
- Timeline Item
- Incorporates TimelineItem.css to create a timeline item that holds a title, subtitle, date, and body.
- User Info
- Contains a form where user is allowed to input their name/address/email/gender and the locks they intend to buy as a pre-order. Information input here is used to create a schema and stored in a database in the ConfirmPayment.js.
Five main pages were created: home, features, about, buy, and confirm payment. The confirm payment page is available when checking out the items in your cart, not in the header.
This is the landing page that a user will find when navigating to the website.
Always at the top of the page is the header component, which becomes transparent at the top, and opaque as you move down. At the top is iframe code that displays the August Smart Lock Youtube video. Below this is code that gives a brief description of the product, and a "Learn More" button that leads to the August Smart Lock website. At the bottom of the page is the contact component.
This page will provide information about the features of the product nd allows user to sign up for the company newsletter and check out the company's Kickstarter.
Always at the top of the page is the header component. Then the features component is included. At the bottom of the page is the contact component.
This page contains information about the history of locks, what the future of locks looks like, customer testimonials, and allows user to sign up for the company newsletter and check out the company's Kickstarter.
Always at the top of the page is the header component. Then the timeline component is included. Below that is the future locks component, then the testimonial carousel component, and a hidden testimonial modal button below the testimonial carousel. Below that is the learn more component. At the bottom of the page is the contact component.
This page contains information about the type of locks you can buy, and allows you to add them to the cart to check out.
Always at the top of the page is the header component. The pay entry component makes up the most of this page. At the bottom of the page is the contact component.
This page allows the user to enter payment information and finalize their purchase of locks. NOTE: Payment functionality has not been implemented as the client does not currently have products, instead, a 'pre-order' option was deemed most appropriate.
Always at the top of the page is the header component. The user info component makes up the most of this page. At the bottom of the page is the contact component, but with the contact us form stripped out.
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.
MongoDB Atlas was used to host our database (sign-in found here: https://www.mongodb.com/cloud/atlas).
The MongoDB Atlas database (named 'FaceR') holds the following collections:
- timelines: date, title, subtitle, and description
- testimonials: name, testimonial
- locks: description, image (path), name, price, incart (boolean), bought (boolean)
- userpaymentinfos: name, address, email, total (price), lockid
Data for the timelines, locks, and userpaymentinfos collections must be updated within MongoDB to add, delete, or adjust any information.
Data for the userpaymentinfos collection will be automatically added when a user confirms their purchase of locks.
Data for the testimonials collection can be updated within browser, by clicking a hidden transparent button in the center of the page directly below the testimonials carousel. The option to add/update/delete information will only become available when the correct fields are entered in. A password is needed to make any of these changes, and the testimonial id (found in the MongoDB collection) is needed to update or delete a testimonial.
When referencing any config variables that are on Heroku, use process.env.NAME_OF_CONFIG_VARIABLE in code.
Any config variables used for local development are stored in server/config/config.js. In code, access these variables using relative pathing.
NOTE: Make sure when accessing config variables try and access the Heroku variable first, then have an OR operand that will access config.js. If you try and access config.js first, the Heroku app will crash (since it does not have that file).
In general, commit messages should adhere to the following format:
(“Page: <Components/Features> : <change type(s): “styling”, “functionality”, “addition”, “deletion”>:your general description of commit“)
E.g.
About Page: Testimonial Carousel: Styling: Slimmed down background image of each carousel item
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