- Web application used primarily to sell blueprints online. Users are displayed a variety of blueprints and are able to filter through blueprints by style, number of beds, baths, square feet, etc. The plans are identified by their unique plan number.
- On the browsing pages, users will see a card displaying an overview of key features from each plan such as an image, the number of beds, baths, square feet, etc. Users have the ability from here to decide if they want to add an item to their favorites or their shopping cart by clicking on the icons on the plans card. Favorites are accessed from the navigation bar by clicking on the heart outline icon while the shopping cart is accessed from the navigation bar by clicking on the shopping cart icon.
- If a user would like to view all the information for a blueprint plan, they will have to access the plans page by either clicking 'View Floor Plan' on the card displayed on the browsing pages or by searching a specific plan number in the search bar located in the navigation bar.
- On the landing page for a specific blueprint plan, all the information will be displayed for that plan # which includes the plan number, a photo gallery, a description, all the key features and a 3D floor plan model. There is also the ability for users to add the item to their cart and have it set to different specifications, such as wood and foundation type, but the application goes a step further by also processing requests from clients for custom blueprints. Requests can be made to either customize existing blueprints or to request a consultation to create an entire custom blueprint for a desired home from the ground up.
- The client side has been created using Next.JS,Material-UI and framer-motion
- The server side has been created using Node.JS, Express and MySQL
1. Clone the repository and install the dependencies in the client directory AND the server directory using NPM.
git clone https://github.com/melxincognito/bp-design-next.git
cd bp-design-next
cd client
npm i
cd ../
cd server
npm i
touch .env
MY_SQL_HOST
MY_SQL_USER
MY_SQL_PASSWORD
MY_SQL_DATABASE
touch .env.local
EMAIL_JS_SERVICE_ID
EMAIL_JS_TEMPLATE_ID
EMAIL_JS_PUBLIC_KEY
PAYPAL_CLIENT_ID
FIREBASE_API_KEY
FIREBASE_AUTH_DOMAIN
FIREBASE_PROJECT_ID
FIREBASE_STORAGE_BUCKET
FIREBASE_MESSAGING_SENDER_ID
FIREBASE_APP_ID
To run the application locally, you'll need to open two terminals to run your client and server directories simultaneously. In the first terminal, assuming you're in the main folder, change to the client directory and run the following:
cd client
npm run dev
In the second terminal, change to the server directory and run the following:
cd server
npm run devStart
Open your browser to localhost:3000 to view the application locally
Dependencies List:
- @framer-motion
- @mui/material
- @emotion/react
- @emotion/styled
- @mui/system
- @mui/icons-material
- @emailjs/browser
- @paypal/react-paypal-js
- axios
- next 12.1.6
- react 18.1.0
- react-dom 18.1.0
- firebase
App wont load data correctly if you don't have the database running at the same time. Read getting started to see how to run application in the client and server directories.
- Reusable component to be used for displaying the different blueprint options on the browsing pages. It is used in both the pages for browsing through all the plans and for browsing through specific styles.
- The card needs the following props to be passed:
- image
- beds
- baths
- stories
- sqFt
- slug
- style
- planNumber
- description - The description isn't shown on the card but it's needed to be passed to the other databases if a user wants to add the item to their cart or their favorites.
- favorite - Favorite is a state used to display if the card is saved in the users favorites or no. The default value is set to false but should be passed as a prop and set to true when this card is used for the favorites page
- It's important you pass the correct slug, style and plan number to the component in order for the component to link to the correct plan. In this applications example of a slug could be 'browsebpbystyle', a style 'luxury', and planNumber '1007'
- Reusable component to be used to display the items passed to the customers shopping cart. The shopping cart will display the main image for the blueprint, the blueprint number, have an overview of the plan details and buttons giving the user the ability to remove the item from their cart, send the item to their favorites or view the items page.
- The card needs the following props to be passed:
- image
- planNumber
- beds
- baths
- stories
- squareFeet
- garages
- description
- style
- The ShoppingCartItemCard component is imported into the ShoppingCartDialog component in the navigation folder
- Reusable component to be used to display the items passed to the customers favorites. The favorites dialog will display the main image for the blueprint, the blueprint number, have an overview of the plan details and buttons giving the user the ability to remove the item from their favorites, send the item to their cart or view the items page.
- The card needs the following props to be passed:
- image
- planNumber
- beds
- baths
- stories
- squareFeet
- garages
- description
- style
- The FavoriteItemCard component is imported into the FavoritesDialog component in the navigation folder
- Reusable component to be used in the desktop view of the homepage to show the top blueprints the business wants to promote. This card will display an image of the blueprint followed by the plan number, key features and buttons that allow users the ability to share the floor plan or view the floor plans page.
- The card needs the following props to be passed:
- image
- planNumber
- beds
- baths
- stories
- sqFt
- garages
- Reusable component to be used in the mobile view of the homepage to show the top blueprints the business wants to promote. On the initial page load it is a button with the blueprint items featured image set as the buttons background. If the button is clicked, a dialog will open showing the user an image with the blueprints key features, the plan number and two action buttons allowing the user to share the floor plan or view its page.
- The card needs the following props to be passed:
- image
- planNumber
- beds
- baths
- stories
- sqFt
- garages
- Reusable component to be used in the desktop view of the homepage to display the basic steps a customer should take if they are planning to build a new home. The card isn't interactive, it's just used to display information
- The card needs the following props to be passed:
- backgroundColor
- stepNumber
- title
- description
- Reusable component to be used in the mobile view of the homepage to display the basic steps a customer should take if they are planning to build a new home. The card isn't interactive, it's just used to display information
- The card needs the following props to be passed:
- backgroundColor
- stepNumber
- title
- description
- Dialog component used to display the items in a users favorite database. The component is imported into the NavBar to be displayed when the user clicks on the favorites border icon.
- The component needs the following props to be passed:
- open - should be set to a boolean of TRUE or FALSE. This state determines if the component is visible or not. It's default is set to FALSE.
- Dialog component used to display the items in a users shopping cart database. The component is imported into the NavBar to be displayed when the user clicks on the shopping cart icon.
- The component needs the following props to be passed:
- open - should be set to a boolean of TRUE or FALSE. This state determines if the component is visible or not. It's default is set to FALSE.
- FilterBlueprintsAppBar is an app bar component that is imported into the BrowseByStyles layout. It is used to filter blueprints by different categories such as number of beds, baths, stories, sqft, etc.
- This component passes data upwards to two parent components.
- To filter plans while browsing through all blueprint plans, data is passed through two components located in the pages/allBlueprints/index.js file. Theres a component for the BrowseAllStylesLayout and a component that renders the page with this layout under the class index.
- To filter plans while browsing through blueprints by their style name, data is passed through two components, BrowseStylesLayout and the Browse by Style pages in /pages/browsebpbystyle/[style]/index.js
- The component passes the data by passing a childToParent function as a prop. This function is triggered after clicking the 'filter blueprints' button and passes all the user input information upwards.
- The component passes the prop resetFiltersOnClick for the 'Reset Filters' buttons onClick event.
- BrowseStylesLayout is a UI layout used to display blueprint options for a specific style(Spanish, Modern, Etc). To use it you import it into the appropriate file, pass the appropriate StyleName prop and have it wrap around the content you'd like displayed inside the plan selection area.
- This component passes data upwards to one parent component in the Browse by Style pages in /pages/browsebpbystyle/[style]/index.js
- The component passes the data by passing a childToParentFilterValues function as a prop. This function is triggered after clicking the 'filter blueprints' button and passes all the user input information upwards.
- The component also passes the prop resetFiltersOnClick for the 'Reset Filters' buttons onClick event in the FilterBlueprintsAppBar.
- BlueprintItemPageLayout is a reusable component to be used as a landing page to display the details of each individual blueprint item for purchase. It will display the details of the blueprint such as the plan number, a photo gallery of images, a description, key features, and a 3D floor plan. It will also allow the user to add the plan to their cart with their preferred purchase options and have the price displayed in USD for that blueprint plan. If the user likes the plan but would like to make customization requests there is a direct link on the page to the custom plan request contact form.
- The card currently needs the following props to be passed:
- planNumber
- description
- beds
- baths
- stories
- sq_ft
- garages
- The card still needs to be set up so the following props can be passed:
- images - Pass the images that correspond to that blueprint for the image gallery
- price - Add price of blueprint
- 3DFloorPlan - Image of the 3D floorplan that is displayed for the client
- ImageGallery is a reusable component that is to be imported into the BlueprintItemPageLayout to render the images that are uploaded for the specified plan number. This image gallery is to be used for DESKTOP view, it doesn't look good on mobile.
- The CSS file that styles this component is ImageGallery.module.css
- ImageGalleryMobile is a reusable component that is to be imported into the BlueprintItemPageLayout to render the images that are uploaded for the specified plan number. This image gallery is to be used for MOBILE view, it doesn't look good on desktop.
- The CSS file that styles this component is ImageGalleryMobile.module.css
- Users who are signed up for an account can request custom blueprints be made for their home project. Users will have to input their name, phone number, the size of their lot, a square footage estimate, select the type of home style(Ranch, Modern, Spanish, Mediterranean, Cottage, etc.), the type of project(New Home Build, Complete Home Renovation, Partial Remodel, etc.), and a message giving quick details about the type of project they're looking to build.
- This information gets passed into emailjs where it'll be forwarded to the companies email and they can contact the individual to go more in depth about their desired project.
- This form is to be placed on the landing page. There are inputs for a user to select their preferred number of bedrooms, bathrooms, stories, garages and square footage for a home floor plan. Once the user puts their selections and clicks on 'browse blueprints', it should take the user to the allBlueprints page and filter the selections shown based off the users indicated preferences.
- This form is to be imported into the forgotpassword page. It is for users who forgot their password and need to get back into their account by having a reset password link sent to their registered email.
- This form is to be imported into the login page. It is for registered users to log into their account by using their email and password.
- This form is to be imported into the signup page. It is for unregistered users to sign up for an account. In order for users to perform actions like make purchases or submit custom plan requests, they will need to register for an account. To make an account, users are required to by submit their first name, last name, email, password and confirm password. There is an optional field for a company name if the user is registering on behalf of a company.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Dependencies List:
- body-parser
- cors
- dotenv
- express
- mysql
- nodemon
- This API route is grabbing all the blueprint data from the database so we can render every item for users to browse through on the Browse All Blueprints page. The API route is used in the client folder under client/pages/allBlueprints/index.js
- This API route is used to delete a particular blueprint in a users cart. It uses the plan number to dynamically delete the matching plan in the database.
- When a user is browsing through the items in their cart and they click on the trash can icon in the upper right, the api call is triggered and the item is removed the cart items database.
- The API route is used in the client folder under client/components/cards/ShoppingCartItemCard.js
- This API route is used to delete a particular blueprint in a users favorites. It uses the plan number to dynamically delete the matching plan in the database.
- When a user is browsing through their favorites, if the item is in their favorites database the icon will appear as a heart filled icon. When a user clicks on the heart filled icon, the api call is triggered and the item is removed the favorites database.
- The API route is used in the client folder under client/components/cards/BlueprintCard.js AND client/components/cards/ShoppingCartItemCard.js
- This API route is used to to grab the information for a particular blueprint in the all blueprints database. It uses the plan number to dynamically grab all the information it needs by matching the planNumber in the database.
- The API route is used in the client folder under client/pages/browsebpbystyle/[style]/[planNumber].js AND NavBar.js
- In NavBar.js, the API call is used to search the entire database by plan number. If the plan # exists in the database, the planNumber and style are returned. These are used to route to the blueprint page for this item.
- Creates a dynamic app.get call and grabs all the items from the databaseName passed as a parameter when the function is called. The name of the database in MySQL is what you would pass as a parameter to this function.
- Creates a dynamic app.get call. A style needs to be passed in lowercase letters(spanish, modern, etc) as a parameter when the function is called in order to get all the items in the MySQL database that match the style name passed.
- Creates a post call to the specified database. The function needs two parameters to be passed through, a slugName and a databaseName. The slugName is used to generate the api url you'll use to link the info from the client side with Axios. The databaseName is the name of the database you want to insert the item into in MySQL.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent