Code Institute Milestone Project 4: Full Stack Frameworks with Django
POSTFLY is a site where you can order all your necessary printed matter online. POSTFLY already has an existing site, but it needs an update. The existing site as it is now no longer meets the needs of customers and employees. This is a first draft for the company's new site and in this case is for educational purposes only. For this reason only a few of the many products are used on this site.
The focus with this site is to combine knowledge about everything conserning printed matter with what was learned during the Code Institute course. The site's goal is to have a more efficient system for employees and a easy to understand order system for B2B customers.
By clicking this link a live demo version will be visible.
This project was moved from Heroku to Vercel 3 years after its creation. As a result, not all functions work anymore, but since it is a study project, I don't feel the need to fix that again.
Features
Technologies
Testing and Bugs
Deployment
Credits
This is meant to be a B2B site which targets visitors who are in need of printed matter, such as flyers, posters, business cards, etc.
The design goal is to make a clear, accessible, structured site so that visitors can easily order their printed matter.
For customers, the site should be an improvement over the existing site. Frequently heard complaints with the existing site include that it is not clear where the artwork should be uploaded and that the payment system is not working.
If this can be improved, it will also ease the workload of the employees, by solving many complaints and questions related to the site.
The site shows a homepage with links to different parts of the site. It contains a products page where the different products are displayed. There is a files section which gives guidance on how to prepare your digital files and a frequently asked question page for the answers to most asked questions.
Furthermore there is a section "About us" which gives a bit of background information about the company and there is a contact section where a contact form can be used, a sample kit request form and a quotation form can be filled out.
The site also contains a register page, a log in page and a shopping cart which will color red and update the price when there is a product in the cart.
The register link will dissapear when logged in and the login link will change to account, where the dashboard, profile and logout link will be displayed. When you are a logged as admin there will also be a product management link.
| Nav menu | Logged in User | Logged out User |
|---|---|---|
| Home | ✅ | ✅ |
| Products | ✅ | ✅ |
| Specifications | ✅ | ✅ |
| FAQ | ✅ | ✅ |
| About us | ✅ | ✅ |
| Contact | ✅ | ✅ |
| Register | ❌ | ✅ |
| Log in | ❌ | ✅ |
| Account | ✅ | ❌ |
| Dashboard | ✅ | ❌ |
| Profile | ✅ | ❌ |
| Log out | ✅ | ❌ |
| Shopping cart | ✅ | ✅ |
A difference has also been made in user rights:
| Options | Standard User Account | Admin User Account |
|---|---|---|
| Add products | ❌ | ✅ |
| Update products | ❌ | ✅ |
| Delete products | ❌ | ✅ |
| See own orders | ✅ | ✅ |
| See other customers orders | ❌ | ✅ |
| Edit profile | ✅ | ✅ |
The site will be structured as clear as possible, with a logic workflow and it should be easy to navigate the site on all screen sizes.
The skeleton section is a bit more extensive, for that reason please view this separate file.
Google Fonts was used to embed the Poppins font in the code. Poppins was chosen because this has a good readability and fits the company's identity. FFONTS was used to get the Syntha Regular font for the subtext of the logo. For the icons Font Awesome was used.
The site contains the following features:
- A page with an overview of all the products which can be sort by name, price and category.
- A frequently asked questions page.
- Pages with tips and tricks about designing / handing in artwork.
- A contact form where customers can ask questions.
- A form where customers can request a quotation or deviating products / products that are not on the site but we may have.
- A sample kit form where customers can request a sample kit with our paper types.
- A register page.
- A log in page.
- A page for when the customer forgot their password.
- An order sytem, to order the products and upload the artwork for the products.
- A dashboard, with the order history.
- A profile page to adjust the user's details.
The following features can be added:
- An option to change the language to Dutch. The start has already been made by making most of the translations, but due to be able to submit this project in time, this feature has been moved to a future update.
- Integrate the previously created project POSTFLY Business card creator into this site, so that customers can create their design on the site instead of uploading their separately made artwork.
- A chat function for live chat with an employee.
- An artwork upload system where a customer can check their artwork themself.
- An option to have multiple billing and delivery addresses for one user.
- An option to see the status of the order on the dashboard.
- HTML
- CSS
- Python
- JavaScript
- Bootstrap
- Postgres
- Stripe
- Pillow
- Boto3
- Django
- Django-allauth
- Django-crispy-forms
- Django-countries
- Django-livereload-server
- Adobe Photoshop: to resize the images.
- Adobe Illustrator: to create the logo.
- VSCode: to write the code in.
- Heroku: as a host for the deployed site.
- GitHub: for the repository.
The tests have been done on multiple devices and browsers. In the end everything works as intended. Because this topic contains a lot of information, a separate page was created. For more details about testing and bugs please view this file.
The deployment section is a bit more extensive for that reason please view this separate file.
Most content has been written by me, the technical stories regarding the delivery of the files and the origin of the printing company come from the sites of POSTFLY and Grafische Groep Matthys and were sometimes adjusted by me. Prices are based on the product price from the original site, and adjusted here and there, but are for learning purposes only for this project. No rights can therefore be derived from this.
- Code Institute LMS Full Stack Frameworks with Django Boutique Ado project by Chris Zielinski this was used as the basis of the code and then modified to make it my own site.
- Hover.css to learn how to let the buttons on the home page grow on hover.
- W3 Schools to learn how to create the parallax effect.
- W3 Schools to learn how to create the loader on the payment process page.
- Tutorial to learn how to upload files with Django.
- Autoprefixer CSS online for improving the CSS code.
- CI Alumni Aukje van der Wal for learning how to set up the contact form and matching email with it.
- CI Alumni Django Heimgartner and Lokalise to understand how to set up translation files.
- POSTFLY the POSTFLY logo provided by my colleague Filip Matthys, for the job options and base of the templates, and for the images on the deep black and resolution (sunflower image) page.
- Flaticon to get and adjust the paper plane of the logo.
- favicon.io was used to get the favicon of the logo and the Dutch flag.
- Color-hex was used to get the images of the colors that were used.
- Grafische Groep Matthys for their logo, the images of some foil samples and the foil fan, the head office and the presses, thanks for my colleague Bart Lauwaert for providing some original photos to me and for the how to cold foil pdf.
- WPJournalist to create the avatars of the team.
- Adobe Stock for the images on the specifications, file type, color, resolution (dpi image), templates, FAQ, concept, contact, quotation, register, login, forgot password page and the illustrator file for the mockup image. These are licensed images downloaded with a paid Adobe Stock account.
- Cleanpng for the cmyk image of the 403, 404 and 500 error page, text added with Adobe Illustrator.
- The other images on the site and the screenshots of indesign etc. are my own photos and screenshots.
- Luchidchart to create the Django diagram model.
- Tinypng to resize the wireframe png's.
- Django Secret Key Generator to get a new secret key for Django
- Django livereload server to learn how to not have to refresh the page every time.
- My mentor from Code Institute, thank you Narender for your time and guidance.
- My husband, thank you Django for taking more care of our son so I can work on my education, and thank you for your patience and guidance in the time I had a lot of mental breakdowns.
- Special thanks to CI former students Aukje van der Wal and Django Heimgartner whose projects Dark Luna and Silkscreenservice + Digipress learnt me a lot.
- A huge thanks to the incredible CI tutor support for helping me a out a lot of times during this project.
- Special thanks to CI fellow student Gwendolyn Jo for lifting my spirits during multiple mental breakdowns.
- Special thanks to fellow Slackers Laila and John R for checking my project.
- Special thanks to my colleagues, friends and family for their support, tips and for testing.