code-institute-submissions / kybos_app Goto Github PK

KYBOS

Kybos is a real e-commerce project for a real artisan who is specialised in created geometric terrariums made by glass. These beauty pieces need a web space to be showed and where costumer could buy them. I invite you to have a look the products and imagine how good could them do into your home. Kybos means cube which is the polyedrin associated with the earth. For us, is the energy of the earth and its elements which can get the geometry beauty to the next level. If you like what you see, do not doubt in get of these pieces and fill it with energy and create a lively terrarium.

http://kybos-23.herokuapp.com/

How it works?

This is a project focused on the Front End area so all the efforts were made in order to created a own style from scratch, totally personalised according the brand I was working with. But in the other hand, as it is a real project, It was important to create a functional e-commerce in which user can register as costumers, add products to a cart and make the payment.

So when users visit the website for the first time, they can access to the main content without registering. In the Home page is all the main information (brand concept, description of the project, all products and contact area). If a user want to get a product, registering and login is needed and then, the user can add product to the cart by clicking on the “añadir a la cesta” button. Selected products will be added to the cart and then, a total payment will be automatically calculated. When finishing the selecting process, user can make payments.

Front End

The first part of the project was to created a complete design of the layout of the website. As the artisan products are focused on geometric shapes, the look and feel had to talk about that. This was important in the moment when select the typography and designing the elements as buttons, underlines and boxes. As we are creating a brand for a premium product, a minimal design was chosen so that white-space have a big importance in the layout.

After designing tasks, website was developed by Html, Css, Jquery languages but the structure was given by Bootstrap. It was developed by the atomic method in which first was set the little elements as buttons, text or title styles and creating after bigger elements as divs or sections. Develop process was complete with making the project responsive.

Back End

The backend structure is build with python through Pycharm. Django was the selected framework for this project. All the authenticating and buying logic was created by the MVC model and Postgres SQL is used in order to create and maintain our database.

Development process

The very beginning of the project was wirefriming our design in a paper. After that, I move that ideas to a functional design using Photoshop. In this case, the project was first launched just with the Front End area and later, the Back End structured was added.

Technologies used:

Languages : HTML , CSS , JavaScript

Frameworks : Bootstrap , Python, Django.

Library and Plugins : Jquery, Postgress SQL.

Hosting : Heroku