Galeto's a Django/Python developed order app that was desinged for a friend of mine who sells roasted chicken and needed some sort of simple looking ordering/booking systems for their clients to be able to order in advance their roasted chicken, and collect best time suited. The app meets all the needs of their business and help them to organise better their future sales and avoid waste.
- Contents
- THANK YOU!
i. As a Site User I can register an account so that create, read, update and delete orders
ii. As a site user I can create orders on database so that have a order created
iii. As a Site user I can view the orders I created so that manage the orders
iv. As a site user I can edit my orders so that modify the details of the orders
v. As a site user I can delete my orders so that manage the orders
vi. As a site user I can see about us page so that check opening ours and address for collection
vii. As a site I can see the contact details and form so that get in touch with the retail if needed
GitHub Project Boards and Kanban are instrumental in collaborative project management. Using Kanban methodology, tasks move through stages like "To do," "In progress," "Testing," and "Done," providing a visual representation and limiting work in progress.
-
The flowchart was a very useful tool to plan ahead and understand how to build the application below you can see the chart that was made using the Lucid
-
The idea was to build a a simple "app-based" design with smooth transitions to make the UX even more seamless and intuitive. All the colors and styles were applied with the built in classes provided that can be found on the Bootstrap documentation.
-
Wireframes were designed with Balsamiq tool
Landing page was design to look like a simple booking app "menu-based" where the user can easily find and reach what their need with no distractions or missleading information. Ofering 3 simple options as: new order, contact us or about us.
Contact us page has a simple form that can be filled intuitively by the user
About us page contains the working hours and address with a google maps API for easily directions for the user
Once the user choose the options new order he will be redirect to a login page that has instructions if the user does not have an account yet
If the user does not have an account already he will be asked to click the link in the log in page and follow the instructions to create a new account
A menu is introduced to the user once loged in with three basic options: Home, Orders List and Log out.
Once loged in the user will be redirected to the new order form that can be easily filled and completed.
Whent he calendar is selected the built-in django widget pops to help user select best day suited.
time selection render django widget as well to better UX design.
Once the order is finished user will be redirected to orders list where the user could easily place another order, edit or delete the existing ones. It was designed toeb be simple and intuitive.
If the user choose to edit and existing order the app will be redirect the the order form page but retrieving the data from database for editing.
Messages sent through the contact us page can be easily found on the admin panel as well as the message details.
A custom 404 page or better UX experience with a button to go back to home page
The built in Django Admin panel was setted up to help the admin to manage the orders as well as reading the messages from costumers
All new orders are set to be Pendind an get easily be approved by the admin panel
Admin can have access to the order details through the admin panel.
Admin have some filters feature to help locate orders such as pending orders, or approved ones and so on.
Messages sent through the contact us page can be easily found on the admin panel as well as the message details.
For future features I will definetly implement and disable past dates and out of work hours that I could not implement due the deadline. I would also implement and API system that could send a email confirmation to the user and the administrator thar a new order was created
| Test | Action | Success Criteria |
|---|---|---|
| Landingpage loads | Navigate to website URL | Page loads < 5s, no errors |
| Links | Click on each Navigation link | Correct section is redirected action performed |
| Athentications System | User should be able Sign Up Log In and Log Out | All functions working fine as expected |
| CRUD Functionality | User should be able to create edit and delete orders | All functions working fine as expected |
| Responsiveness | Resize the viewport window from 320px upwards with Chrome Dev Tools. Use Responsive Design Checker to test various mobile, tablet, and large screen sizes | Page layout remains intact and adapts to screen size |
| Different web browsers | Runned the app in Google Chrome, Mozilla Firefox and Internet Explorer | App works responsive and layout remains intact no errors or bug detected |
| Different screen devices | Runned the app using a Samsung Galaxy s20 and Iphone 13 | App works responsive and layout remains intact no errors or bug detected |
HTML validators
No major issues were identified on the HTML Validator
Index Page
Contact Page
About Page
Neworder Page
Login Page
CSS Validator
All issues and warning are regarding fontawesome CDN library as shown on CSS Report. No other issue located
Jshint Validator
No major issue found on the Jshint validator:
PEP8 validator
Used PEP8 Validator from Code Institute and all issues have been resolved.
Models:
Views:
Urls:
Test:
Automated Testing
Automated testing with built in Django unittest
Debugging and troubleshooting were done constantly throughout development.
I used the following technologies, platforms and support in building my project:
- The application was built in Python.
- The Code Institute modules/lessons aided my learning and many of the concepts learned were applied in this project.
- GitHub was used for the project repository.
- GitPod - for IDE and editor of the code.
- Django - framework to develop the app and a few other libraries such as athentications system "Allauth" all specified in the requirements.txt file
- Bootstrap - for design and choices.
- Heroku - was used for application deployment.
- Elephant SQL - for database.
- PEP8CI Validator - for error and issues with the code
- Lucid - Flowchart used on readme file.
- Canva - For all images
- FontAwesome - Used for icons
- Cloudinary - Used to store media files
GitHub Deployment
First of all you need to have a GitHub account and I choose it because it's free and easy to create a repository to host your code and share with others.-
To create a repository you just need to go to the main page at the top right you will see a "+" button just click here and then new repository
-
Select the name of the project and a description make it public and then create a repository
-
Once you created your repository go the settings section and then click on pages
-
Select the Branch as main and then save it.
-
Finally, your repository is deployed and it should show you a link so you can share it with others.
Cloning the Repo
- Click on the "Code" button near the top right corner of the page.
- Copy the HTTPS or SSH URL that appears in the box. Open your terminal (or Git Bash on Windows) and navigate to the directory where you want to clone the repository.
- Type "git clone" followed by a space, and then paste the URL you copied in step 3.
- Press enter to run the command. This will clone the repository onto your local machine.
- You should now have a local copy of the GitHub repository on your machine.
Forking the Repo
- Click the "Fork" button near the top right corner of the page. This will create a copy of the repository in your own GitHub account.
- Once the fork is complete, you will be redirected to the forked repository in your account.
- If you haven't already, clone the forked repository to your local machine using the steps outlined in the previous answer.
- Make any changes or additions you want to the code in your local copy of the repository.
- Commit your changes to your local repository using the "git commit" command.
- Push your changes to the forked repository on GitHub using the "git push" command.
- If you want to contribute your changes back to the original repository, create a pull request by going to the original repository's page and clicking the "New pull request" button. From there, you can compare your changes to the original repository and request that they be merged.
- You should now have a forked copy of the GitHub repository in your account, and you can make changes to it and contribute back to the original repository if desired.
Heroku Deployment
- First of all you need to have a Heroku account.
- From the Dashboard, click "New" - "Create new app".
- Enter a name for the app. Click "Create App".
- Connect your GitHub account and select the repository and branch to deploy.
- When you create the app, you will need to add two buildpacks from the Settings tab. The ordering is as follows:
- heroku/python
- heroku/nodejs
- You must then create the followinf Config Varw:
- PORT. Set this to 8000.
- DATABASE_URL. Set this to your database url.
- DISABLE_STATICFILES. Set to 0.
- SECRET_KEY. Set to your secret key.
- Code Institute - Tutor Support.
- Code Institute Python Template - Template for Python mock terminal in Heroku.
- GitHub - for deployment and host.
- GitPod - for IDE and editor of the code.
- W3 Schools - used for multiples researches and tutorials in HTML and CSS.
- Stack Overflow - used to clarify questions and collect answers.
- PEP8 ORG - solution for the flags regarding the diagrams in the PEP8 Validator
- Real Python - Also provide with clarity the solutions
- Lucid - Flowchart used on readme file.
- Bootstrap - for design and choices.
- FontAwesome - Used for icons
- Cloudinary - Used to store media files
- Canva - For all images
This project taught me a lot and helped me put in practice what I have learn throughout the Course specially getting to know more about Django frameworks and libraries. I was happy enough with the results and to be able to develop a real world application for a friend that will use it as a tool to better manage his business. I Thank the opportunity and help I got from all Code Institute Tutors, but special thanks to Sarah Collins that helped me a lot troubleshooting and explaining to me my questions.
by Cesar Garcia