/NJ-Wines-Website

This is a website for a wine farm in my local community. I started this project to test my web development skills.

Primary LanguageHTMLGNU General Public License v3.0GPL-3.0

NJ-Wines-Website

This is a website for a wine farm in my local community. I built this project to test my web development skills.

About

This is a simple website for wine farm near me, Niel Joubert Wines, I drew inspiration from their actual site and then built my own. This was a lovely little project to get acquainted with multiple web technologies.

Tech Stack

  • HTML
  • CSS (TailWindCSS)
  • JS
  • PHP
  • SQL

Setup

I used XAMPP to run an Apache and MySQL server for this website. You can download it too and then setup the local database using the SQL file I included in this repo.

There's not much more to setup, other than putting these files in the htdocs directory and watching the website come to life when you navigate to the localhost/website URL.

Pages

This project includes the following pages, each with animations and functions

  • Home page
    • Here you can find more information about Niel Joubert, the actual farm.
  • About Us
    • Here you can find more information about the people working at Niel Joubert and which positions they occupy. You can also find thier contact details on this page.
  • Wines
    • On this page you can view their 4 wine ranges and the wines included in each of these ranges. You can then view more information about a specific wine by clicking on the wine. A separate page will load with more information about the wine. This new page will include the taste profile, a description and then the price. From here you can add the wine to your cart as well.
  • Cart
    • On this page you will be able to see the wines you have added to your cart, if you have signed in. You can increase, decrease or remove the items from your cart. The price, transportation and tax will be calculated in real time and upon clicking checkout you will see a message explaining that this site was for a project and is not the real Niel Joubert Website.
  • Login
    • This page allows the users to sign in or sign up. Their credentials will be stored in the local database for when they want to log back in. Their cart will be associated with their account as well.