Welcome to Lola's boutique where you can find mindfulness inspired products available to buy. If you are a budding or experienced yogi, meditator or wellbeing enthusiast, you will find products here to inspire your day to day living and lifestyle.

This ecommerce store was built using Django and Python, deployed on Heroku.

This website provides full CRUD functionality to the admin user to add and delete products from the purposely built admin panel. Customers are able to view a history of all orders placed from their profile login.

You can view the live page HERE

• The website has to work well on all kind of devices like mobile phones, tables and desktops.
• Visually appealing website.
• Customer should be able to easily find and buy products.
• Customer purchase should be seamless, easy and quick.
• Customer should have ability to view current and past orders.

• As a customer, I would like to have a quick, simple and hassle free experience during my purchase.
• As a customer, I would like to easily search for and find what I'm looking for regardless of device i'm using.
• As a customer, I would like access to a history of all my orders including current ones.
• As a customer, I would like an email confirmation that updates me on the status of my order.

• To have an ecommerce store that allows CRUD functions for products and customers.
• To access and update customer orders and progress.
• To enable easy access and communication to customers and viceversa.
• To have a reliable data storage system for assets and databases.

• A simple and easy way to navigate the website and place an order.
• An easy to understand dashboard with simple controls.
• Simple display of previous and current orders.
• Receive updates on order status.
• Easy access to cancel an order or request a refund.

• Updates on order status and view previous orders.
• Simple and hassle free finding and ordering products
• Website compatible with chosen device

I have used ColourLovers to find inspiration for my colour palette and scheme. I went for simple muted colours to not distract from the products on display.

I chose to use a simple Lato font for this website to keep things simple and legible.

A Favicon was added to the site. I designed the initials LB using lato font and sticking to muted colours of black and white.

I have created a simple logo using Lato font in bold and normal to represent the purpose of the website using Canva and to maintain the consistency of fonts used throughout the site.

These wireframes were created using Balsamiq during the Scope Plane part of the design and planning process for this project.

You can find my wireframes below:

• Navigation Bar

  • Featured on all pages is a fully responsive navigation bar which includes links to the Logo, Home page, Products and their categories, a functioning search bar, accounts profile (for login, registration and order/product management), a shopping bag with products and their totals, as well as a promotion banner for delivery charges. This is identical in each page to allow for easy navigation.
  • This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.

• The home page image

  • The home page image was designed using Canva. I used the branding colours and elements to represent the lifestyle of the target customer it was designed with enough space to include text overlay with a call to action.

  • This section introduces the customer to Lola's Boutique using the branding colours, illustrations and a call to action to grab their attention.

• The Footer

  • The footer section includes links to the relevant social media sites for Lola's Boutique. The links will open to a new tab to allow easy navigation for the user. There is an unlimited amount of social icons that can be added to the footer section via the Django admin panel.
  • There is a brief about me section to make Lola's Boutique more personable to the user.
  • The footer social links and About Me section can be easily edited using CRUD functions by the via the Django admin panel as I have created models for this section.
  • There is also a copyright section at the bottom of the footer.
  • The footer is valuable to the user as it encourages them to keep connected via social media and remain relatable to the store owner.

• The Products

  • The products page is fully responsive and will provide the user with images and details about each product available to buy.
  • Admin users have access to CRUD functions for each product directly on the website upon login.
  • Users can sort products according to their prefrences using the drop down
  • Each product has a details page which gives the user more information about the product with options to choose quantity, add to bag, or keep shopping.

• The Categories

  • There are 2 main categories - Books & Paper and Accessories. These categories are further split into sub-categories for easier navigation and grouping of similar products
  • The categories can be found along the navigation bar and by clicking to see all products in that category, this displays links to the sub categories.

• Sign Up

  • A simple sign up form was created to collect email, user name and password using django's built in allauth templates.

  • These come pre-built with Form Validations and messages to provide feedback to the user.

  • A bootstrap toast message appears if signup was successful and a user profile is created. The user is re-directed to the confirm email page.

• Once email have been recieved and the link in the email clicked, the user is sent to the confirm email page to continue with verification.
• Toast message appears to confirm success and user is directed to the login page.

• Sign in

  • A simple Sign in form was created to find user in the django database using the allauth templates complete with form validations and warnings.
  • There is a link for forgotten passwords as well as buttons to return to the home page or sign in.
  • Bootstrap toast message appears if login was successful.

• Log Out

  • Users can sign out easily from the profile tab. By clicking on the log out link, the user is directed to the sign out confirmation page.
  • Once the user confirms signing out, a toast message appears confirm user has been logged out and re-directed to the homepage.

• 404 Page
  • A custom 404 page was created for when the user navigates to a link that doesn't exist.
  • I created the image with Canva by using branding colours and fonts.

• User Profile

  • User profile displays current and previous order details as well as a form section to update delivery information.

• Admin Profile

  • The admin user has complete access to carry out CRUD functions for product management via my accounts section

  • The admin user has the edit and delete buttons that appear next to each product.

Admin user can add a new product and upload image of product filling out the form via product management page.

All logged in users have access to view products and previous orders.

Admin user can edit products by clicking the edit button next to each product which loads up the pre-populated form. Standard user can update delivery information from their profile page.

Once changes have been saved, toast message displays it has been successfully updated.

Admin user can delete products. A toast message appears confirming it has been successfully deleted and user is returned to the products page.

I ran out of time but a custom branded 500 error page would be nice to add in the future.

I have used Django to set up the relational database. SQLite was used in the development phase and Heroku was used for live production using Postgres. These are the database models created for this project:

• HTML

  • 6 errors were returned when passing through the official W3C validator which have all been fixed with no errors found.

  

• CSS

  • No errors were found when passing through the official (Jigsaw) validator

• FLAKE8

  • Flake 8 testing was done via the terminal. vscode/arctictern and migrations were ignored. The rest of the errors were fixed with a few exceptions below where they couldn't be changed without affecting the code:

  

• SCREEN SIZES (Responsiveness)

  • Screen sizes have been tested passing through the (Responsinator) website

• CHECKOUT/ORDER

  • An order was placed as a registered user upon login, updating the quantities using the provided buttons and going to the secure checkout page.

  • On the checkout page, delivery information and test card was entered: 4242 4242 4242 4242.

    • Use a valid future date, such as 12/34.
    • Use any three-digit CVC (four digits for American Express cards).
    • Use any value you like for other form fields.

  • Order was completed successfully, redirecting user to the thank you page with a toast message acknowledging completion and email confirmation sent to user.

  • Order added to users profile in the order history section.

  

• REGISTER and SIGN IN/OUT

  • Registration and Sign in/Out Tested and screenshots provided in the features section above. Confirmation emails received via email host set up in Heroku and using test temporary email address.

• PROFILE

  • Profile for both user and admin have been tested and work as expected. Screenshots have been provided in the features section above.

• KEYS

  • I wasn't sure if keys had been accidentally pushed to Github during switching of databases from SQLite to PostGres so to be sure I recycled the keys and generated new ones ensure security and integrity of the site has been maintained.

• Bug
  Profile page not showing on deployed Heroku site after migrating, switching to Postgres and pushing changes via Github. Page showing on local server.

• Fix
  Accidentally created a file thinking it was a folder holding the css in the static folder which caused issues mirroring files into the staticfiles folder. Manually moved and relinked folders and redeployed.

• Verdict
  Profile page working on deployed site as expected.

• Bug
  unable to signout users once logged in. Sign out button wasn't responding.

• Fix
  reassigned the the block content template headers to inner content and added a cancel button with redirect to home page.

• Verdict
  Sign out page and buttons working as expected.

• Bug
  Home page footer scrolling into the homepage hero image cutting it in half.

• Fix
  changed the hero image css settings from fixed to scroll.

• Verdict
  home page scrolling as expected showing footer at the bottom without cutting into hero image.

• HTML
• CSS
• JavaScript
• Python

• Font Awesome to provide icons for the website.
• Bootstrap to simplify the structure of the website and make the website responsive easily.
• Google Fonts to style the website fonts.

• Git to handle version control.
• GitPod to write my code.
• GitHub to store and share all project code remotely.
• Google Devleoper Tools Used to help fix problem areas and identify bugs.
• Heroku to deploy my website
• Balsamiq to create the wireframes for this project.
• Google Lighthouse to carry out accessibility audits
• WAVE to carry out detailed accessibility evaluation
• W3C HTML Validation Service to validate HTML code
• W3C CSS Validation Service to validate CSS code
• Am I Responsive to create the website mockups
• Responsinator to test device responsiveness
• Django python based framework
• Cloudinary Used to store static files and images.
• SQLite Used when performing unit tests.
• PostgreSQL Database used through heroku.
• Jinja templating language for Python.

I have created Lolas Boutique project using Github, from there I used Gitpod to write my code. Then I used commits to git followed by "git push" to my GitHub repository. I've deployed this project to Heroku and used "git push heroku master" to make sure my pushes to GitHub were also made to Heroku.

This project can be ran locally by following the following steps: ( I used Gitpod for development, so the following steps will be specific to Gitpod. You will need to adjust them depending on your IDE. You can find more information about installing packages using pip and virtual environments here

1. Sign in to Github and go to my repository
2. Locate the Fork button at the top right of the page.
3. Select this.
4. The fork is now in your repositories.

1. Sign in to Github and go to my repository
2. Above the list of files click the green ‘code’ button.
3. This will bring up a few options as to how you would like to clone. You can select HTTPS, SSH or Github CLI, then click the clipboard icon to copy the URL.
4. Open git bash
5. Type ‘git clone’ and then paste the URL you copied. Press Enter.

For more information on cloning check out the github documentation here

To get the Django framework installed and set up I followed the Code institutes Django Blog cheatsheet.

To deploy this page to Heroku from its GitHub repository, the following steps were taken:

1. Create the Heroku App:

   • Select "Create new app" in Heroku.
   • Choose a name for your app and select the location.

2. Attach the Postgres database:

   • In the Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option.

3. Prepare the environment and settings.py file:

   • In the Settings tab, click on Reveal Config Vars and copy the url next to DATABASE_URL.
   • In your GitPod workspace, create an env.py file in the main directory.
   • Add the DATABASE_URL value and your chosen SECRET_KEY value to the env.py file.
   • Add the SECRET_KEY value to the Config Vars in Heroku.
   • Update the settings.py file to import the env file and add the SECRETKEY and DATABASE_URL file paths.
   • Update the Config Vars with the Cloudinary url, adding into the settings.py file also.
   • In settings.py add the following sections:
     • Cloudinary to the INSTALLED_APPS list
     • STATICFILE_STORAGE
     • STATICFILES_DIRS
     • STATIC_ROOT
     • MEDIA_URL
     • DEFAULT_FILE_STORAGE
     • TEMPLATES_DIR
     • Update DIRS in TEMPLATES with TEMPLATES_DIR
     • Update ALLOWED_HOSTS with ['app_name.heroku.com', 'localhost']

4. Store Static and Media files in Cloudinary and Deploy to Heroku:

   • Create three directories in the main directory; media, storage and templates.
   • Create a file named "Procfile" in the main directory and add the following:
     • web: gunicorn project-name.wsgi
   • Go to Deploy tab on Heroku and connect to the GitHub, then to the required recpository. Click on Delpoy Branch and wait for the build to load. When the build is complete, the app can be opened through Heroku.

I have used the following websites to gather ideas, information and code examples for the overall content of my website.

This website would not have been possible without all these amazing resources:

• Code Institute - BA tutorials
• The illustration avatars used on the hero image and 404 page were created by someone I hired on Fiverr to look like me.
• The product images and descriptions were pulled from a wholesalers site called Ancient Wisdom.

The amount of times I didn't think I would make it in time to submit this project was countless, lifes challenges seemed to come from all directions and I honestly couldn't have pulled through without the incredible and amazing support from my mentor Simen (Eventyret_mentor), it has been an absolute joy and a priviledge to have had his support. He has taught me so much more than just the tech stuff and I will always cherish everything he has shared with me. He didn't have to, but he did and that for me is priceless.

I also saved myself a few grey hairs but gained some very important tech wisdom hairs from the tutoring I received from Ger, Scott, Alan, John. I am so grateful for imparting your wisdom when my brain had completely shut down. (lol) thank you for helping me swim across the tidal wave of codes.

Thank you also to student services for checking in on me too - special shout out to Aoife!.