Define

Design

JQuery || Express || MongoDB || Node

Visit Define Design
GitHub

As an architect, I found myself always having a hard time getting all the client’s requests and needs at the beginning of the project, which then led to delays later on during the design process. With Define the Design I seek to solve that issue. The client would have access to the web application at the first design meeting and define what are their wants and needs with ease.

Functionality

The following is a brief description of how the application works! Follow the steps below to Define your Design!

Step #1

First, input all your basic project information.

Step #2

Define the design for either a single-family or an apartment.

Step #3

Upload up to three inspiration images that define your needs.

Step #4

Refer the database that contains all the submitted designs to get inspired.

Further Steps

To improve this application, I'm looking forwards to adding a functionality where users can review the designs that they have submitted and make any necessary changes.

Back to the top

ProjectStructure

The following is a set of diagrams that help explain how Define the Design is being coded. The website is composed of a both of a front-end and a back-end. The front-end is created by using HTML, CSS, Javascript and JQuery, while the back-end uses Node, Express and MongoDB. There is only one database to which all the designs are added to.

Project Diagram

Define the Design has a Front-End and a Back-End connected by an API file. The Main.js file within the Front-End portion contains all the functionalities and screens that are rendered on the browser. This file is compiled thanks to Webpack and contains all the individual JavaScript files that compose the code of the Front-End.

On the other hand, the Back-End is composed of the Server.js file that contains the paths from which the API file gathers and posts the information input by the user.

MongoDB is used as the database service for this application. It is for that reason that Mongoose is installed in our Back-End. Mongoose is incorporated into the application because it helps us create Model files that contain the database Schema.

Front-End

The Front-End contains different types of files: Utils, Local Storage and Screens. The Util is a JavaScript file that provides support to the Screen files by containing code that render items within the Screens. The Screens are JavaScript files that render, like their name says, the screens that each user goes through by using the web application.

The different screens take the user through a series of questions that narrow down the user's design needs. Depending on the type of home project, the user is redirected to a specific screen that corresponds to that project type. Some of the inputs the user needs to provide are required while others are coded in such a way that if a user does not make a decision it would not pose any problems.

Every time the user moves from one screen to another, the information that has been submitted is temporarily saved in the browser's local storage. The information stored in the local storage is then posted into the database by a series of REST requests created in the API file.

Back-End

The Back-End contains both Routers and a Model file. The model defines the Design schema and creates a database in MongoDB. The Design database is created which contains all the different submitted databases from past users. This database is then displayed in the Front-End via an API request.