KushalPareek / deilen

UNDER CONSTRUCTION - a full stack ecommerce website for a mock houseplant retailer called Deilen (the Welsh word for leaf).

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Deilen

This website is a full stack ecommerce store to allow people to buy house plants and plant related homeware from the mockup plant company Deilen (the Welsh word for 'leaf').

To visit the website, please visit the deployed site [here](insert link to deployed site).

Responsive Mockup


Target Audience

  • Homeowners looking to buy decorative house plants.
  • Interior designers looking to buy plants for indoor spaces e.g., an office space.
  • People looking to gift a house plant to a loved one.

User Stories

As a user of the Deilen website, I want to:

  1. User Authentication / Accounts
    • Site users should be able to register an account that allows a user to sign in and out of the site.
    • A user should be able to create a profile to store personal information to make checkout easier with default personal information to automatically populate form fields at checkout.
    • Users should be able to ammend profile information to keep records up-to-date and also have the ability to delete their account.
    • A user should be able to reset their password via email authentication so the account is not lost if the password is forgotten.
  2. Site Navigation
    • hello
  3. Shopping
  4. User Checkout
  5. Site Admin

UX

Colour Scheme

  • A earthy and natural blend of pastel pink yellow and green with darker shadesof clay-brown and blue-grey. This gives the website a fresh, organic and natural look.

    colour palette

  • No accessibility issues were returned when passing the colour scheme through the official WebAIM.

    webaim screenshot

Typography

  • Google Fonts Font styles were taken from the open source Google Fonts.
    • the typography for the text throughout the website is [Font Name](Link To Font). Small blurb about font.
    • The typography for the brand logo is font-family [Font Name](Link To Font). Small blurb about font.

Wireframes

  • Home wireframe

Home wireframe

  • Products wireframe

Products wireframe

  • Shopping bag wireframe

Shopping bag wireframe


Database Model

  • Database schema for Deilen

database schema


Features

Existing Features

Feature

  • Describe the feature and what it allows a user to do.
  • Does the feature have any defensive programming?

Picture of feature

Admin Features

Description of what admins have control over

Feature

  • Describe the feature and what it allows a admin to do.
  • Does the feature have any defensive programming?

Picture of feature

Features Left to Implement

  • Describe the feature
    • Why hasn't it yet been implemented and what steps would you take to start implementing this feature.

Technologies

  • GitPod was used as a cloud based iDE
  • GitHub was used to manage the Git repository
  • [Heroku](link to deployed site) was used for deployment
  • Git was used for version control
  • Django used as the project's web framework
  • Pip3 was the package manager used to install the dependencies
  • Bootstrap was used for website layout and responsive components
  • Google Fonts was used to provide website fonts and icons
  • Am I Responsive was used to generate a mock-up image
  • Dev Tools was used for testing and responsiveness
  • Wireframe.cc was used for creating wireframes
  • DrawSQL was used for creating the database schema
  • W3C HTML Validator and W3C CSS Validator were used to check HTML and CSS files for errors

Languages

  • HTML was used as the markup language
  • CSS was used for custom styling
  • JavaScript was used for custom website interactivity
  • Python was used as ...

Testing

To view all testing documentation, refer to TESTING.md.


Deployment

The site was deployed to Heroku. The live link can be found [here](link to deployed site)

The steps to deploy a Heroku app are as follows:

  1. Log in to Heroku or create an account if required.
  2. Create a Heroku app - select 'New', from the drop-down menu select Create New App. The app name provided must be unique.
  3. Select a region.
  4. Create.
  5. Navigate to the Resources tab and add a Heroku PostgreSQL database.
  6. Access the Settings Tab and find the Config Vars. For this project you will need the following config vars:
    • MONGO_DBNAME = the name of your mongo database.
    • MONGO_URI = the uri for your mongo database.
    • DATABASE_URL = the url of your heroku postgres database.
    • SECRET_KEY = a secret key for your app.
    • PORT = 5000
    • DEBUG = set to 'True' during development and 'False' upon deployment.
    • IP = Your IP address

Please see this official documentation on Heroku configuration for more details.

  1. Navigate to the Deploy tab.
  2. Select Github as the deployment method.
  3. Follow steps to link to the appropriate GitHub account.
  4. If you wish, enable Automatic Deploys for automatic deployment when you push updates to Github. Or alternatively, select the correct branch for deployment from the drop-down menu and click Deploy Branch for manual deployment.

Final steps:

  1. Create a Procfile in your repository containing web: python run.py so that Heroku will identify the app as a Python app.
  2. Create an untracked file called env.py in your repo and input the config vars you previously established in Heroku.
  3. Create a requirements.txt file
    • If you want to freeze your own packages into this file, run pip3 freeze --local > requirements.txt in the console.
    • To install only the packages that are already listed in the Deilen repo requirements (if making a local copy/clone) run pip3 install -r requirements.txt in the console.

Cloning

Cloning a repository makes it easier to contribute, fix merge conflicts, add or remove files, and push larger commits. To clone this repository from GitHub to a local computer use the following steps:

  1. On GitHub, navigate to the main page of the repository.

  2. Above the list of files, click Code.

  3. Click Use GitHub CLI, then the copy icon.

  4. Open Git Bash and change the current working directory to the location where you want the cloned directory.

  5. Type git clone, and then paste the URL that was copied from step 3 above - i.e., git clone https://github.com/antonia-white/deilen.git

  6. Press Enter to create the local clone.

Forking

A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project.

To fork this project go to the top left of the repository, where you see the Fork Icon and click Fork. This will create a copy of the repository for you.

Credits

Content

  • All text throughout the website is self-written.

Media

Acknowledgements

  • My Code Institute mentor, Tim Nelson
  • My friends and family for manually testing the site.

About

UNDER CONSTRUCTION - a full stack ecommerce website for a mock houseplant retailer called Deilen (the Welsh word for leaf).


Languages

Language:HTML 61.1%Language:Python 31.9%Language:Dockerfile 5.3%Language:CSS 1.7%