This theme was chosen to fit the overall feminine power theme that Robyn has with her artwork. I chose a color, in the case F7A0CB, that displayed most throughout her work and developed the rest of the theme around that colour. The theme worked well with the bold and playfull style of her artwork.
- 000000 - Was used for the product description text throughout.
- BF4A67 - Was used for the header and foolter of the webpage and some link elements.
- F7A0CB - Was used as the whole web applications background color. This was chosen from one of the illustrations that was supplied to me.
- FFEEDD - Was only used for the titles in the product description pages. It matched the overall theme and made a nice change from the proposed white.
- be able to browse through all products available.
- be able to keep up to date with the latest new through the blog post.
- be able to view my bag and any items I currently have awaiting payment in my bag.
- be able to add, edit quantity and remove items from my bag.
- have generic questions answered through a FAQs page without the need to contact the site owner.
- be able to purchase items from the site with or without an account.
- to be able to register the site if I choose to keep up to date.
- have the ability to log in to the site.
- have a record of any purchases that I have made in the past and view them in detail.
- be able to update my shipping information.
- be able to update my shipping information from the checkout page.
- be able to log in to an admin panel.
- be able to add, update or remove products and update blog posts without the need for the admin panel.
- Get an email notifications when a user submits through the contact page.
- Bootstrap - used to design some elements on the pages as well as help with styling and responsiveness.
- AdobeXD - used to create the wireframes.
- Google Fonts
- Line Awesome - used for the icons.
- cdnjs
- GitHub - used to store the project's code.
- Git - used for version control.
- Gitpod
- SQLite - relational database used during development.
- PostgreSQL - relational database used for deployed site.
- jQuery
- Django - used to build the site.
- Heroku - used to host the deployed site.
- Stripe - used for the payments functionality.
- RandomKeygen - used to generate passwords across the site.
- AWS S3 - used for storage of static and media files on the deployed site.
This project's code is stored on GitHub, the IDE chosen was Gitpod and deployment is done to Heroku.
- From my project's repo on GitHub, download the files by clicking on "Code" and getting the zip folder. Alternatively, you can also clone the repo by running the command
gh repo clone ConnorGray97/robyn_janine_v1
from your IDE. - Open the project's folder and install all the requirements from the requirements.txt file with command
pip3 install -r requirements.txt
. - Set up your environment variables in an env.py file (make sure to add this env.py file to the .gitignore file in the root directory) as per below:
os.environ["DEVELOPMENT"] = "True"
os.environ('STRIPE_PUBLIC_KEY', 'YOUR_STRIPE_PUBLIC_KEY')
os.environ('STRIPE_SECRET_KEY', 'YOUR_STRIPE_SECRET_KEY')
os.environ('STRIPE_WH_SECRET', 'YOUR_STRIPE_WH_SECRET')
os.environ('SECRET_KEY', 'YOUR_DJANGO_SECRET_KEY')
- Migrate the models with the below commands in this same order:
python3 manage.py makemigrations
python3 manage.py migrate
- Set up the database by loading the fixtures in the following order:
python3 manage.py loaddata categories
python3 manage.py loaddata products
- Create a superuser for yourself so you can do admin tasks by using the command
python3 manage.py createsuperuser
. - Run the project locally with
python3 manage.py runserver
.
First of all, you will need to set up:
- Your AWS account, which is where you static and media files will be hosted for the deployed site. For this, you will need a public access S3 basket. Find out more about this on their documentation user guide and learning how to connect your Django application to the S3 bucket here.
- Your Gmail account for sending emails. For this, make sure you have 2-step verification turned on and go to Security settings to set your App password, which later will be used as Config Var on your Heroku app, EMAIL_HOST_PASS.
Deployment steps:
- Log in to Heroku, create a new app (choose a name) and select the region closest to you for it.
- Under the Resources tab on your Heroku app, add Heroku Postgres as add-on and select the Hobby Dev free plan.
- Back in your IDE, make sure you have all dependencies from requirements.txt installed and that there is a Procfile with the following content:
web: gunicorn robynjanine.wsgi:application
- Next, set up your Config Vars under the Settings tab as per below:
Key | Value |
---|---|
AWS_ACCESS_KEY_ID | YOUR AWS ACCESS KEY ID from the csv |
AWS_SECRET_ACCESS_KEY | YOUR AWS SECRET ACCESS KEY from the csv |
DATABASE_URL | YOUR POSTGRES DATABASE URL |
EMAIL_HOST_PASS | YOUR APP PASSWORD FROM GMAIL |
EMAIL_HOST_USER | YOUR GMAIL EMAIL ACCOUNT |
SECRET_KEY | YOUR SECRET KEY |
STRIPE_PUBLIC_KEY | YOUR STRIPE PUBLIC KEY |
STRIPE_SECRET_KEY | YOUR STRIPE SECRET KEY |
STRIPE_WH_SECRET | YOUR STRIPE WH SECRET |
USE_AWS | True |
- Set up your database for the deployed site. First, in settings.py comment out DATABASES and add the below:
DATABASES = {
'default': dj_database_url.parse('your-url-goes-here')
}
The URL is the Postgres database URL from Heroku vars. Migrate your models with python3 manage.py migrate
.
Next, you need to load the fixtures just like in step 5 of running the project locally (above). Next, create a superuser (as described in step 6) for yourself. Finally, uncomment the DATABASES code and remove the code you added in step 6.
- Make sure to add in settings.py the below:
ALLOWED_HOSTS = ['your-app-url', 'localhost']
- Push the code to GitHub.
- Back on the app's dashboard on Heroku, under Deploy tab, connect GitHub for automatic deploys.
- Finally, as the last step, Open app to see the deployed site.
Unfortunately thing got a bit on top of me so this project is unfinished. I did what I could with the time I had and look forward to hearing feedback either way.