Delitaly - Django e-commerce

View the live project here.

Delitaly is a project in Python / Django Framework that I created a few years ago as final exam for a course in Full Stack Development. Delitaly is basically an e-commerce written from scratch. This project uses the following Django Apps: “Allauth” for users subscriptions, access and management, “Profiles” for users’ info and purchase history, “Products” for the shop and items management (search, add, edit, delete), “Checkout” for the payment screen. I used Amazon Web Services for the deployment of static files such as CSS and Media files. I integrated Stripe for online payment processing.

In this last year (2022), I successfully completed a further course in UX Design, then by looking at this project I realise that now, with more experience in both software development and ux design, I would definitely write a better CSS and choose a better style. But that is the nice part when you improve and look back at what you have done, you understand what it took to become skilled. The code in Django is pretty fine, I would only extend it for further or more complete features.

Please find further info about the projet here below.

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript
• Python

Frameworks, Libraries & Programs Used

• Django
• Bootstrap
• EmailJS

1. Heroku
   • Heroku was used to deploy the website.
2. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
3. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
4. Google Fonts:
   • Google fonts were used to import the 'Montserrat' font.
5. Font Awesome:
   • Font Awesome was used to add all the icons throughout the project.
6. AWS
   • Amazon Web Server was used to store CSS and Images.
7. Stripe
   • Stripe was used to manage payments
8. Adobe-Illustator
   • Adobe Illustrator was used to create the logo
9. • NOTE: All the images have been accurately chosen on many different png providers such as: subpng, nextpng, pngio, pngfind, and many others through the web.

Testing

• I checked the markup validity of my Web documents in HTML on The Markup Validation Service
• I validated my CSS code on The W3C CSS Validation Service

Further Testing

• The Website was tested on Google Chrome, Firefox and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7 Plus, iPad.
• A large amount of testing was done to ensure that all pages were linking correctly.

Known Bugs

• The select/option tags in the forms' website haven't been adapted to Safari browser.

Deployment

GitHub Pages, Heroku and Visual Studio Code

• The project was deployed to GitHub Pages linked to Heroku.
• Heroku manages app deployments with Git, the popular version control system.
• To code this project, I used a code editor on my computer, Visual Studio Code for macOS

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/Renato79/delitaly/

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/Renato79/delitaly/
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Content

• Text into the pages Policy and Shipments have been taken online and adapted to my project.
• Almost all the product descriptions have been found online.
• Info like prices, titles, scores have been invented.