In this project i have built a full-stack site based around business and logic used to control a centrally-owned dataset. This is an ecommerce site that allows users to purchase antiques from the site. I decided not to use the project ideas and to create a website which sells antiques instead. I thought this kind of site would be a good way of showing the skills i have gained throughout the course. I have used HTML and CSS for the front end design off the project as well as Bootstrap and Font Awsome to contribute to the design of each page. I have used stripe payments for the purchasing part of the site and Python, Django and JavaScript for the back end of the website. When creating the design off the website i decided to research colour schemes on the internet and i ended up going for a grey/beige/cream with hints of dark blue for the colour scheme. I thought these colours worked well together and made the site gender-neutrual. I also thought with the decision i made on the colour scheme would attract a wider range of audience. I have used pages such as support, terms of use and about us to give the user a lot of information about the business and also give the user the option to get in touch through forms, email and telephone. I also have researched pages such as terms and conditions so i understood what was needed for my website. I have tried to make the website easy to navigate and clear to read as i thought accessbility of the site was very important. I also have used responsiveness throughout the website so the site is easy to access and navigate regardless on the screen size. I have used the same button and font styles throughout the site to keep the design of the website the same throughout each page. I have done a lot of research on antique websites to see what the main products that are sold, the design off an antique website such as colour schemes, fonts and layouts. When doing the research for this project i realised there was a wide range of products i could choose. I decided to narrow it down to products i thought were most likely to sell such as antique funiture and toys. I have also created a logo for the site with the same colour scheme so all components of the site work well together. I have create a page with all products and then seperate pages for each category of products. I have 6 different categories, Art, Clocks, Classic Cars, Furniture, Jewellery and Toys. Each product is labeled with a title, a cover image, a description of the product and a price. If you click on the title of the product it will divert you to the single product page where there is more images and a more in-depth description of the product. I decided to dedicate the website to only old products. I did some research on what is most likely to sell from a website rather than a store. I realised there was a few categories that all around the world people are interested in such as antique furniture and toys. I also found that one of the biggest viewing categories is classic cars. I know selling a car to a piece of a furniture is very different but I choose to add cars to the website to attract a wider audience.

I decided to create this website with the intended audience of adults aged 18+. This website is aimed at both men and women and available to everyone who can access the web. This website will be used for browsing old antiques, purchasing them and having them delivered straight to your home. Most users will aready know what they want, so i created category pages, a search bar and buttons to pages on the home page for easy navigation. Some users wont know straight away want they want to purchase so i have created a 'Shop' dropdown on the navbar which has the category options and also an option 'All Antiques' which would allow the user to view all products at once. I wanted to make the website as easy to navigate as possible for all types of audience so i decided to use a navbar and footer on each page so the user could easily navigate from page to page. As this project was user-focused, i spent alot of time researching ecommerce sites to see what features was the best to use to make the navigation easy. I wanted to make sure the user never had to click the back button, i wanted the user to be able to do everything the wanted using just the website. I made sure there was a nice colour scheme throughout the website that complemented the products and made them stand out from the background. I also wanted to make the features on each page accessable and clear to what each did.

• If a user wanted to contact us regarding a damaged product - the user can go to the bottom of any page, find the footer and click on the link 'Support'. This will then redirect the user to the support page where they can fill out a form. They will need to type their email in, choose the category 'damages' from the dropdown and then write a description of the damaged product in the text field. Then the user will need to press the submit button and wait for a response from one of the customer service team.

• If a user wanted to contact us regarding a late delivery - the user can go to the bottom of any page, find the footer and click on the link 'Support'. This will then redirect the user to the support page where they can fill out a form. They will need to type their email in, choose the category 'delivery' from the dropdown and then write a description of the late delivery in the text field. Then the user will need to press the submit button and wait for a response from one of the customer service team.

• If a user wanted to contact us regarding returning a product - the user can go to the bottom of any page, find the footer and click on the link 'Support'. This will then redirect the user to the support page where they can fill out a form. They will need to type their email in, choose the category 'returns' from the dropdown and then write a description of the returning product in the text field. Then the user will need to press the submit button and wait for a response from one of the customer service team.

• If a user wanted to contact us regarding an order - the user can go to the bottom of any page, find the footer and click on the link 'Support'. This will then redirect the user to the support page where they can fill out a form. They will need to type their email in, choose the category 'orders' from the dropdown and then write a description of the order in the text field. Then the user will need to press the submit button and wait for a response from one of the customer service team.

• If a user wanted to add a product to their cart - the user must navigate to the specific product and then press the 'Add to Cart' button under the description of the product. This would then add the product to their cart.

• If a user wanted to sign up to the website - the user can press the 'log in' button on the nav bar on any page. This will redirect the user to the log in page. At the top of the page it says 'No account? Sign up now.' and the user needs to press the 'sign up' button and then complete the form to create an account.

• If a user wanted to log in - the user can log in by clicking the 'log in' button on the right side of the nav bar. This will then redirect the user to the login page where the user can enter their credentials to log in.

• If a user wanted to log out - the user can log out by clicking the 'log out'button on the right side of the nav bar. Once pressed, the user will be logged out.

• If a user wanted to write a review for the site - the user does not need access to the website to send a review. They can send their review to [email protected].

• If a user wanted to buy a product - Once the user has found the product they want to buy, they need to click on the 'buy' button which will direct the user to the checkout page where the user will be asked to fill in shipping address and bank details etc.

• If a user wanted to speak with someone over the phone - the user can view all contact details from the footer of each page and the about us page which is linked on the nav bar and footer.

• If a user wanted to search for a specific product - the user can go to the homepage and search for the specific product in the search bar and then press the search button.

• If a user wanted to view their car - the user can access their cart via the nav bar (right side of navbar.)

• If a user wanted to see the total of all their products - the user can access their cart via the nav bar (right side of navbar.) When on the cart page there is a heading stating the total for a products in the cart.

• If a user wanted to see what other users thought of the website - the user can access the reviews page via the footer at the bottom of the page.

• If a user wanted to check the terms and conditions of the website - the user can access the terms and conditions page via the footer at the bottom of the page.

• If a user wanted to read about the website - the user can access the about page via the nav bar (left side of the nav bar.)

• If a user wanted view all products - the user can click on the shop tab in the dropdown and then choose the option 'All Antiques' from the dropdown.

• If a user wanted to see just jewellery - the user can click on the shop tab in the dropdown and then choose the option 'Jewellery' from the dropdown.

• If a user wanted to see just cars - the user can click on the shop tab in the dropdown and then choose the option 'Cars' from the dropdown.

• If a user wanted to see just art - the user can click on the shop tab in the dropdown and then choose the option 'Art' from the dropdown.

• If a user wanted to see just furniture - the user can click on the shop tab in the dropdown and then choose the option 'Furniture' from the dropdown.

• If a user wanted to see just toys - the user can click on the shop tab in the dropdown and then choose the option 'Toys' from the dropdown.

• If a user wanted to see just clocks - the user can click on the shop tab in the dropdown and then choose the option 'Clocks' from the dropdown.

• Help form on the support page
• User account
• Links to products on home page
• An easy-to-use checkout
• User-friendly navigation
• Shopping cart
• Link to about pages
• Reviews page
• Terms and Conditions, Privacy Policy
• Consumer reviews on products
• Shipping method (offer low shipping cost)

The home page allows the user to be able to access products in three different ways. (The navbar, footer and the buttons above the footer.) The user can also search for a specific product using the search bar on the home page. I have added four images on the home page underneath the search bar to give the user an idea of the products i sell. I have also used a big cover photo at the top of the home page, i thought the image would complement the antique products i am selling. I have used a navbar to make it easy to navigate around the website. I have used a dropdown called 'Shop' to categories some of the products. I have also created tabs on the navbar such as 'home' and 'about' which is on the left side of the nav bar. I have also added icons on the right side of the navbar for the user to be able to view their profile and cart. This is where the user would also log in, log out and sign up. These are all icons with tooltips added so the user can easily understand what each icon does. The about page is quite a standard HTML/CSS page. I have used divs, headings and paragrpahs to create the content. I have also used media queires here to make it more visable on smaller screen sizes. On each of the products pages. I decided to categories them so it was easier to navigate too. I also created a tab with 'All Antiques' so the user could view all products at the same time. I have used django to pull out information on each product from the admin panel such as product name, description and price. I have created the product pages like normal eccommerce sites. (A product image, with small description and a price, also 2 buttons under each product allowing you to go to the checkout and add the product to the cart.) I have created a profile page which shows the user their username, email and password. There is also 2 buttons below this to allow the user to easily view their cart and access the checkout. I have credit pages such as a terms and conditions page and a support page. The terms and conditions page is quite standard HTML/CSS. I have used divs, headings and paragraphs in the content to make the site easy to read. I have seperated different sections into seperate divs so it easy to see the different sections in the page. On the support page i decided to add a support form. This allows the user to send an email to us with a support ticket. In the form the user needs to input an email, then choose a category from the dropdown box. There also is a text box where the user can input a description for the support ticket. I have also created a reviews page. I have used bootstrap to create these reviews. I decided to create them all in seperate divs under one another. Each review has a little description, a name and a job title. On the carts page, the products that have been added to it are listed under one another. I have also used a heading to show the total price of all products. There is a 'checkout' button below the cart items which allows the user to checkout and proceed to payment section. On the checkout page, it shows the user the items in the cart that they're are about to purchase. Underneath this is the payment form. The user would need to input bank details into this form and then click Submit payment. This would then be purchased by the user and completed by 'Stripe Payments'. In the footer i decided to use headings and links. I have stated the contact details and address on the left section off the footer. In the middle section of the footer i decided to create links to pages such as, reviews and terms and conditions. On the right side of the footer i created links to all categories.(products). Unfortunately i ran out of time, so i wasn't able to add the functionality of the search bar and support form, so i have removed them. These features would be the next thing to add to the site.

• I have thought about creating promotion/discount codes to use for the site.
• I could add more content to the profile page, i could give the user the option to edit their account details such as email address and password.
• I have thought about adding an extra page, so when you click on a product, it would direct you to another page which would show the single item with the full description etc.
• I could create social media pages for my icons to link to properly.
• I could also add more categories to the site to give a wider range of products i sell.
• I could have section for each product which tells the user whether the product is sold out or in stock.
• I have thought about allowing the users to put products onto the site to sell. This would require an extra tab which would be called 'Outside Dealers'. I would need to create forms for this so the user could input products on to the webpage.
• I have also thought about creating a form on the reviews page where the users could create and upload their own reviews to the website.
• I have thought about allowing the user to save their payment details to the site and then be able to edit their payment details through the profile tab.

• HTML
• CSS
• JavaScript
• Stripe Payments
• Python
• Font Awesome

https://fontawesome.com/

• Django
• Bootsrap

https://getbootstrap.com/

• Heroku

https://www.heroku.com/

I have tested every feature i have created on the site and everything should work correctly now. I had a few issues to start with such as the search bar not bringing up any results and when clicking on some buttons, nothing would happen when really it should of redirected you to a different page. On the navbar, one of the icons on the right side was higher than the rest and no matter what CSS i wrote, it wouldn't go inline with the other icons. I also had issues with the product images. I had already created all products and put them in the admin panel. I had saved images to my local database but they was not showing up on the page. When uploading the local site to the deployed database, i changed things around slightly and instead of uploading the images, i used image URL's from the interent instead. This seemed to work a lot better.

1. Find a product you want to purchase.
2. Click on the 'Add to Cart' button.
3. Go to the cart, is the product there?
4. Is the correct price stated for the product?
5. Find a different product and click on the 'Add to Cart' button.
6. Are both products in the cart page?
7. Is the total price for both products correct?

1. Press the 'Checkout' button from the cart page.
2. Did this redirect you to the checkout page?
3. Fill in the payment details.
4. Click on the 'Submit Payment' button.
5. Was the payment successful?

1. Click on each of the tabs.. does it take you to the correct page?
2. Does the navbar work on all screen sizes?
3. Does the navbar respond to the smaller screens?
4. Do all icons show up on the navbar?
5. Does the website logo take you to the homepage?

1. Click on each product button.. does it take you to the correct page?

1. Enter a specific product into the search bar.
2. Click on the 'Search' button on the home page.
3. Do the results come up for the searched product?
4. Can you then click on the product and view it?

1. Click on all links on the footer.. does it take you to the correct page?
2. Click on the social media icons.. does it redirect you to the correct social page?

1. Enter your email into the input box in the form.
2. Choose an option from the dropdown.
3. Enter a description in the text box.
4. Click on the submit button.
5. Has the form been submitted correctly?

1. Enter credentials into the form.
2. Click the 'login' button.
3. Has it logged you in?
4. Does it now show the icon for 'profile' instead of the icon for 'register' on the navbar?
5. Does it allow you to now view your cart?
6. Does it allow you to now checkout?
7. Does it allow you to now log out?

1. Enter credentials you would like to use.
2. Click the 'Create account' button.
3. Has the account been created for you?
4. Do you now have the option to click on the profile icon on the navbar?
5. Does it now allow you to view your cart?
6. Does it allow you to log in and out?

1. Click on the 'Checkout' button on the profile page.
2. Does it redirect you to the checkout page?
3. Go back to the profile page and click the 'Cart' button.
4. Does it redirect you to the cart page?
5. On the profile page, does it show you your account details?

1. Once you have adding products to the cart, go to the cart page.
2. Is the cart showing all items you have added?
3. Is it showing the price of each product?
4. Is it showing the quantity of each product?
5. Is it showing the total of all products?

I have used media queries in my CSS to make my webpage responsive to all screen sizes. i have used the syntax '@media screen and (max-width: 600px)' and '@media screen and (min-width: 600px)' so i could make all content on each template look correct for each different screen size. I used these media queries on most pages for things like divs, headings, paragraphs and buttons. When creating this project i realised i needed quite a lot of media queries to make each page responsive to smaller screen sizes. Everything looked great on desktop versions but then was ruined as soon as i changed it to a smaller screen size. I had font coming out of divs and having to scroll ages to the right to read it. I had massive images and lots of margins that worked for the larger screen size. Once i had sorted most of the responsiveness, i realised i needed to add more CSS to some of the media queries to make the content of the page central and fit with the style of the site. The site is now easy to navigate on all screen sizes. I am quite happy with how the media queries turned out.

• Search bar doesn't do anything when pressed 'Search' button.
• When in the mobile version, the dropdown icon disappears on the navbar, you can still click the icon but it is not visable.
• The log in icon doesnt change to log out when you are logged in.
• In the checkout page, when you have items in your cart, each item adds more margin to the left of the div. This happens with every item you add to the cart.
• On the support page, when you submit a form, the form doesn't do anything.

Github Heroku

I have searched antique websites on Google to find images and information on products to sell. I have used websites like 'Auto Trader', 'Ebay' and 'Barneby's. I also used websites such as 'Topshop' to create some content such as the terms and conditions page. I have used bootstrap to be able to style forms, buttons and the reviews page. I have used Font Awesome for the icons i have used on the navbar and footer.