My project is a restaurant website which represents a traditional rustic cuban cuisine. The websites main features, as 'about', 'menu', contacts' displays the 'read' part of CRUD to the user and gives the important information about the websites goal to the user, while the admin can change, update and delete the same information from the backend. The crucial part of the project is the 'book here!'(or the booking form) and 'my bookings' which gives the user and admin the possibility for 'create', 'update' and 'delete' in CRUD, so that a reservation/booking can be created, edited or removed. As admin these bookings can be approved or rejected and the status of this action reflects in the frontend presentation, which gives the user the possibility to follow up the status themselves.
The live deployed application can be found deployed on Heroku.
The link to my Github repository's Github Repo.
Users visiting the restaurants website are looking for a new place to explore. We are offering a real rustic traditional experiance to excape the luxuary fancy vibe but still a place to fine dine.
The front page provides the user with all the necessary content so they could decide if that is the place they want to explore. If not authenticated they can access almost all the content of the page until it gets to the reservation part of it, for which authentication is required.
Everyone can enjoy their visit to our website because it's adjusted and designed for all different screen sizes.
The project is build using the agile methodology. To check the project's board click here
I have created user stories based on the agile methodology and I have created them using the Githubs kanban. In the upcoming images the projects build-up process can be followed up throughout different stages.
Click here to see the progress in KanBan:
Click here to see the progress in KanBan:
Click here to see the progress in KanBan:
Click here to see the progress in KanBan:
Click here to see the progress in KanBan:
Click here to see the progress in KanBan:
I wanted to keep it simple and light. The color palette matches the cover image and is well suited color scheme for the full website.
Coolors.co was the website I've used to fetch the colour palette presented.
After I have applied the bootstrap CND I really liked the font style which came along with it and so I decided to just stick to it.
Balsamiq is used for wireframe design.
My website includes the base.html and the rest of the pages are build using templating.
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
Click here!
The navigation menu and footer is continiously the same throughout all the pages of my website.
This page has a potential to grow bigger. There is open space for many possible future implementations, like email automation, adding tables and available time slots to the booking form and so on.
- Python
- HTML/CSS
- JavaScript
- Django
- Bootstrap
- Cloudinary-storage
- PostgreSQL
- Github
- Gitpod
- Balsamiq
The live deployed application can be found deployed on Heroku.
This project uses ElephantSQL for the PostgreSQL Database.
To obtain your own Postgres Database, sign-up with your GitHub account, then follow these steps:
- Click Create New Instance to start a new database.
- Provide a name (this is commonly the name of the project: tribe).
- Select the Tiny Turtle (Free) plan.
- You can leave the Tags blank.
- Select the Region and Data Center closest to you.
- Once created, click on the new database name, where you can view the database URL and Password.
This project uses the Cloudinary API to store media assets online, due to the fact that Heroku doesn't persist this type of data.
To obtain your own Cloudinary API key, create an account and log in.
- For Primary interest, you can choose Programmable Media for image and video API.
- Optional: edit your assigned cloud name to something more memorable.
- On your Cloudinary Dashboard, you can copy your API Environment Variable.
- Be sure to remove the
CLOUDINARY_URL=as part of the API value; this is the key.
This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
Deployment steps are as follows, after account setup:
- Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
- Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set your environment variables.
| Key | Value |
|---|---|
CLOUDINARY_URL |
insert your own Cloudinary API key here |
DATABASE_URL |
insert your own ElephantSQL database URL here |
DISABLE_COLLECTSTATIC |
1 (this is temporary, and can be removed for the final deployment) |
SECRET_KEY |
this can be any random secret key |
Heroku needs two additional files in order to deploy properly.
- requirements.txt
- Procfile
You can install this project's requirements (where applicable) using:
pip3 install -r requirements.txt
If you have your own packages that have been installed, then the requirements file needs updated using:
pip3 freeze --local > requirements.txt
The Procfile can be created with the following command:
echo web: gunicorn app_name.wsgi > Procfile- replace app_name with the name of your primary Django app name; the folder where settings.py is located
For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:
Either:
- Select Automatic Deployment from the Heroku app.
Or:
- In the Terminal/CLI, connect to Heroku using this command:
heroku login -i - Set the remote for Heroku:
heroku git:remote -a app_name(replace app_name with your app name) - After performing the standard Git
add,commit, andpushto GitHub, you can now type:git push heroku main
The project should now be connected and deployed to Heroku!
This project can be cloned or forked in order to make a local copy on your own system.
For either method, you will need to install any applicable packages found within the requirements.txt file.
pip3 install -r requirements.txt.
You will need to create a new file called env.py at the root-level,
and include the same environment variables listed above from the Heroku deployment steps.
Sample env.py file:
import os
os.environ.setdefault("CLOUDINARY_URL", "insert your own Cloudinary API key here")
os.environ.setdefault("DATABASE_URL", "insert your own ElephantSQL database URL here")
os.environ.setdefault("SECRET_KEY", "this can be any random secret key")
# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:
- Start the Django app:
python3 manage.py runserver - Stop the app once it's loaded:
CTRL+Cor⌘+C(Mac) - Make any necessary migrations:
python3 manage.py makemigrations - Migrate the data to the database:
python3 manage.py migrate - Create a superuser:
python3 manage.py createsuperuser - Load fixtures (if applicable):
python3 manage.py loaddata file-name.json(repeat for each file) - Everything should be ready now, so run the Django app again:
python3 manage.py runserver
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/Balkaneros91/Cubaneros-PP4.git
- Press Enter to create your local clone.
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 owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
All the links in the navigation bar and in the footer has been tested and works. The logo link always brings us back to the main page. Menu located on the 'home' page has different tabs for all the categories and when clicked, the menu items related to that category will be displayed to the user. Menu located on the 'menu' page has the categories listed in the top of the menu and when clicked the link will take you to the chosen category just further down the page.
The navigation between the pages/apps is very simple and pretty straightforward. And the deployed website has been tested in Chrome, Safari, Opera and Firefox. Media queries looks good and been tested throughout different screen sizes.
I used both of these to check the responsivness across different screen sizes.
- Booking data model tested and the whole circle of the CRUD functionality works for both users and the admin.
- Accept or reject bookings by admin in the admin panel tested. It works and the status can be monitored from the frontend.
- Menu data model tested: admin can use the whole circle of CRUD functionality from the backend, while the user only view the menu.
- Sign-up/ Sign-in/ Sign-out links all tested and works.
- Booking form tested and all its functionality and validations works.
- Authorisation tested based on the different accesses so that role-based functions such as booking form access, edit or deleting bookings can be accessed just if the person is permitted.
| Browser | Pass/Fail |
|---|---|
| Google Chrome | Pass |
| Safari | Pass |
| Opera | Pass |
| Firefox | Pass |
- Lighthouse was used to check the quality of website pages accross mobile and desktop view.
Click here to see the lighthouse for mobile views:
Click here to see the lighthouse for desktop views:
- W3C Markup Validation Serice was used to validate HTML code.
- W3C CSS Validator was used to validate CSS code.
- JShint Validator was used to validate JS code.
- CI Python Linter was used to validate Python code.
Check here!
-
cubaneros/settings.py
-
cubaneros/urls.py
Check here!
-
restaurant/views.py.
-
restaurant/urls.py.
Check here!
-
about/models.py, about/admin.py, about/views.py.
-
about/urls.py.
Check here!
-
menu/models.py , menu/admin.py, menu/views.py.
-
menu/urls.py.
Check here!
-
reservation_booking/models.py, reservation_booking/admin.py , reservation_booking/widget.py, reservation_booking/forms.py, reservation_booking/views.py.
-
reservation_booking/urls.py.
Check here!
-
contacts/models.py , contacts/admin.py, contacts/views.py.
-
contacts/urls.py.
Check here!
-
bookings/views.py.
-
bookings/urls.py.
- Chrome DevTools played a big role in projects development. I used it for testing, debugging. Further more for exploring around and helping myself to fix HTML and CSS difficulties with it. It help me a lot with setting the responsiveness accross different screen sizes.
-
On some pages there I don't have enough content the footer does not stick to the bottom and I wasn't able to figure out the fix for that. If I remove the absolute and add the inherit css property than the footer covers some of the content. But will deffinitely look into this in the future.
-
Other than that not aware of any other bug.
-
Creating the booking form I hadf some issues when it comes to the validation of opening and closing times of the restaurant but with mentors guidance I got those resolved and the same applies for email address validation.
-
I could not place correctly the booking list and position it so that it fits even on a xs screens, but later it got resolved once I realized that bootstrap has the table class which has a built-in feature so the user can scroll back and forward (right-left).
Code Institue projects: 'Hello Django' and 'I think therefore I blog' has helped me a lot during the project planning for my websites design. Extra help I've used for this project, please see links below.
-
The code is mostly created by me and I was inspired by the traditional cuban cuisine.
-
For the deployment section I got expired by my colleague here at CI,Adam Gilroy.
- Favicon The fork and knife emoji.
All images are downloaded from internet and used only for purposes of this project.
- And last but not least a big thanks to my mentor Antonio Rodriguez and to the CI tutor support who help a few times during the process.