Molten java is a fictitious coffee shop and coffee roasters business in cork city. This website serves as en e-commerce platform for the business, as well as being a social point of contact with existing and potential customers.
- Visitors to the website are ideally coming to purchase coffee and coffee accessories from the business, but the interesting blog posts and opportunity to sign up for update emails may also make it a more informational social resource also.
-
As a visitor to this website, I would like the navagation to be instantly understandable.
-
As a visitor I would like an inventory of stock to beowse through.
-
As a visitor I would like the ability to search for products by name.
-
As a visitor I would like the ability to register for an account for secure purchasing.
-
As a visitor I would like an email sign up option, to be kept up to date with site news.
-
As a visitor I would like the option to follow the site on social media platforms.
-
As a menber of the website, I would like to 'Login' to my profile and view past purchases.
-
As a member of the website, I would the ability to manage and update my shipping and payment details.
-
As an Admin of the website, I would like all of the above capabilities, but also the ability to add categories of products and the products themselves to the website, including price ratings and images.
-
Colors - The entire site is rendered in 'earthy' tones of black, brown, orange and white, This was a considered design choice to reflect the tones of coffee beans, brewed coffee and 'creama' which are very similar colors.
-
Font - The font I have used for the site is Roboto, this font covers all text elements, I selected this font because of its versatility, in that it is modern, but also clear and bold in its various weights.
-
Icons - The Icons used in this project are taken from Font Awesome, which hosts a diverse set of options.
- The navagation and footer with sign up extend across all pages.
- The Home page features a full screen 'hero image' which makes it very clear what the focus of the site will be.
- Overlaying the image is a welcome slogan plus a button, which lets the visitor go straight to the products page.
- This tab has several coffee product categories, once selected the user is brought to a gallery type page where products can be viewed and clicked on to view more information about them.
- This tab also has several product categories for brewing products and molten java merchandise. As before once selected the user is brought to gallery pages where the products can be viewed in detail.
- This tab is a way of viewing all the products together, organised by different criteria, price, name etc.
- This clickable link will bring the user , to the login, logout and register options, if the user has admin privileges there will also be a product managment link.
- Gitpod - Developer environment was used to write the code.
- Github - Used to host the project.
- Heroku - Used to deploy the finished project.
- Bootstrap - Used for responsive grid system, utilizing components for navagation, cards and forms etc.
- Django - Used as the backbone of the project with front and backend utilities.
- emailJs - Used to foward email from email sign up in footer.
- Google Fonts - Used for the websites various fonts.
- Font Awsome - The Font Awesome library was used for the icons the website.
- favicon.io - Was used to create the favicon for the browser tab.
- TinyJPG - Used to compress the websites images.
- Balsamiq - Used to create wireframes.
- Details can be found in a separate Testing page.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent