This is my milestone project I am doing with Code Institute for the Full Stack Frameworks With Django module. The is a pseudo-website that allows me sell your graphic design services with users being able to purchase graphical design to address their needs
The website structure is minimalist and functional where the user is greeted with the landing page where he can view a nice carousel displaying previous designs has and has an the option to register an accound to make requests.
The user can easily register an account see a list of all his requests by category (processed/unprocessed/uncomplete), can raise a new request, can modify /delete the request (as long the payment didn't go through ), can checkout the based on the design request inputs and get confirmation email.
The wireframe was designed using Balsamic and the example can be viewed here below.
On the add design request page , you can only view the select image button only of you check the provide source image checkbox, also when you upload the photo there is a text box that tells you which photo has been uploaded , same happens when the superusers wants to process the request.
On the design request detail page the user will be able to view one of the 3 category data tables only if there is data to be shown.
There is 'toasts' messages to get user confirmation alerts each time and design request was added/modified/ deleted or and an request was processed there is an additional email that is being send to the user to let him know the order was processed.
When and order is processed there is a toast message that alerts the user the order was registered and an email with the order details was sent to the user email address, if the save billing details checkbox is checked the profile form will be updated automaticaly prompting a toast message to reflect it.
The user can view the detail foto only if the image exists and the essential input fields are required only if they are essantial to process the request/order.
- contact form that sends and email to the default email host
- posibility to request changes to the processed design request and add an accept button
The website was manualy tested with Chrome Developer Tool in a Test Driven Development approach on difrerent screen size as well on other browsers such as Edge and Firefox.
Testing procedure
- Register and account, and check if the registration email is received
- Once logged in check if I can visualise my design requests and order only on the design requests and profile views
- Add a new design request and check if it shows in the uncompleted design requests views
- Checkout the design requests and check if the payment went through with stripe and the all webhooks return 200 status
- Check on the success checkout view if toast messages display correctly, check if the email has been sent
- Check if the design request shows in the unprocessed design requests view and the order is available on the profile view
- Check the sendto mail button
- Submit a new request and check the delete button
- Check if the testimonial button works correctly both in the design request list view and in the design request detail view
- Login with supperuser accound and check if the process request button is present iin the design request list view and in the design request detail view
- From design request detail view click process request and check if it renders all the elements as expected , click the process request checkbox and check if select image button appears. Select image and check if file info is shown in red text. Click process request and check if the design request detail view is updated as expected. Check if the email was send.
- Log in as super user and check if you can see all requestes and Projects management link works and displays correctly
At the end of the project I first created a new heroku app called manub-graphic-design-freelance. Attached Heroku Postgres to my app via the Heroku dashboard While connected to mysql db I performed the ./manage.py dumpdata command in bash to create a file db.json that contains all my static files Disconected and connected to the Heroku Postgres database and then perfomed the "./manage.py loaddata db.json" command to load all the static files in the new database I have installed unicorn app , froze the requirements and created the Procfile and temporarly disabled the collectstatic files I generated a key using a secret key generator only and declared it in the heroky app enviroment variables along with the rest of enviroment variables from Git.
On my AWS amazon account using S3 services I have created new bucket that matches my heroku app name , disabled block public access and cofigured the CORS , created a new policy using policy generator function based on my bucket ARN, next I attached the new policy to my bucket
Using Identity and Access Management from AWS I created a new group named manage-graphic-design-freelance to manage access to my bucket
On the JSON tab I have imported the my managed full accesed policy from S3 and then attached the policy to the IAM group
Next I have downloaded the CSV file which will contain this users access key and secret access key
Installed boto3 and django-storages with pip3 and froze the requirments into the requirements.txt file On the Heroku enviroement variables I set up USE_AWS to check if there's an environment variable called USE_AWS in the environment, declared the AWS_STORAGE_BUCKET_NAME and the AWS_S3_REGION_NAME my access key, and secret access key, to be able to get from the environment.
Removed the collectstatic from variables to be able to collect my static files from git
On the settings file I have declared Django to use s3 to store our static files whenever someone runs collectstatic. Created custom storages files to and created two classes StaticStorage and MediaStorage to define storage for static files
Logged in my Heroku app from GIT and set up my heroky master based on the app I have created , perfomed git commit and push and then check for errors, check if the site is working on heroku app and check AWS S3 to see if the static folder was created.
In my AWS S3 bucket I have created a folder called media where I've uploaded the media files and gave them public access permission.
I connected my Git workspace to Heroku deply tab and enabled the automatic deplyos
For further deploys I've used the GitHub commit/push to get Heroky app updated with the latest version. The only diffrence between the development and the production version represents the debug tool which is turned off and the variable DEVELOPMENT is missing form the enviroment. You can view the production version here
- The carousel display that has been well modified to suit my project can be found here
- Got all my media files from Pexel and other freesources here
- The JS price calulation functionality for design request can be foundhere
- For the delete functio I've used inspiration from here
- For Stripe Debugging I've used their documentation that can be foun here
- For preventing back button refresh of the check out page I've used documenatation from here
- For recoveing JSON dump files data for my webhooks I have searched to understand the topic better here
- For JQuery total price calculator based on input I found documentation here
- For Customize ClearableInputFiles I used documentation from here
- For email_send documentation I used this [link] (https://docs.djangoproject.com/en/3.2/topics/email/#:~:text=Although%20Python%20provides%20a%20mail,that%20can't%20use%20SMTP.)