Los Platos Chileno Restaurant App

View the live project here.

This is a fictive restaurant booking app which is developed based on user stories and with a focus on responsiveness and accessibility.

User Experience (UX)

• User stories

  • All user stories can be found on GitHub in a project specific Kanban board. Visit Project

Features

• Responsive on many device sizes - Built with Bootstrap 5 and tested along with development for small, medium and large screens.

• Seamless reservation process - Easily book a table at your favorite restaurant with a simple and intuitive reservation process. Users can select the date, time, and number of guests to secure their dining experience hassle-free.

• Automated unit tests - Assures the form, view and model files response as expected so that the user's experience is as simple and positive as possible.

Upcoming features

• Google Map implementation to show restaurant location.
• Bookable times should only be displayed if they have not already been booked.
• Newsletter signup
• Possibility to book a table in a special place such as by a window
• Directions by bus and/or car

Technologies Used

Languages Used

• HTML5
• CSS3
• Python
• Javascript

Frameworks, Libraries & Programs Used

1. Django 4.2.7
   • Django was used to build the app. Example of installed and/or used libraries: gunicorn, dj_database_url, psycopg2, urllib3, django-crispy-forms.
2. ElephantSQL
   • ElephantSQL was (is) used as external database.
3. Heroku
   • Heroku was (is) used to deploy the app.
4. Bootstrap 5.2
   • Bootstrap 5 css was used to assist with styling and responsivenes for layout and forms. Also, Bootstrap icons was used as icon library.
5. Google Fonts
   • Google fonts were used to import 'Ephesis' as display font, 'Roboto' and 'Lato' as content fonts.
6. Git
   • Git was used for version control in Gitpod terminal to handle commit and pushes to GitHub.
7. GitHub
   • GitHub stores the projects code and also has user stories connected to the project.
8. Mage
   • Mage was used to create all AI generated images on the page.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C CSS Validator - Results mainly according to imported bootstrap css min file.
• W3C Markup Validator - Results few errors and some warnings will be handled in the near future

Automated testing

#### PYtest - Errors to be fixed in the near future
![alt](https://github.com/Pernilla-Strandberg/django-restaurant-app/blob/main/readme_img/pytest.png)

Manual testing

#### Browsers and different screensizes
![alt](https://github.com/Pernilla-Strandberg/django-restaurant-app/blob/main/readme_img/menu.png)![alt](https://github.com/Pernilla-Strandberg/django-restaurant-app/blob/main/readme_img/home_cards.png)

Further Testing

• Form validation

Deployment

The project was deployed to Heroku:

1. Connect GitHub repository to Heroku app
2. Set up basic dyno and add "gunicorn projectmap.wsgi" for webb
3. Add Config vars:

• CLOUDINARY_URL
• DATABASE_URL
• PORT
• SECRET KEY

4. Deploy automatically or manually and open app

How to run it

1. Locate GitHub Repository
2. Fork or Clone repository
3. Open project in vs-code or another source code editor
4. Configure environment variables in projectmap/settings.py
5. Install all necessary packages: $ pip install -r requirements.txt
6. In settings DATABASE, switch back to Django db.sqlite3 as default
7. Run server: $ python manage.py runserver
8. Create a booking, login to change or delete booking.

Credits

Code

• Mage - All images is created in Mage AI tool

• Bootstrap5 - Bootstrap Library used for layout and forms

• MDN Web Docs - To get a better understanding of views, models and templates, this tutorial was great. I modified a lot of the provided code to fit my booking app.

• Medium - Health Clinic Appointment tutorial that helped me a lot with the logics according to views and models Healt Clinic Tutorial

Content

• All content was written by me (the developer).

Media

• All Images were created by me (the developer).

Acknowledgements

• Code Institute project walktroughs and the included pedagogical content.