Wine O'Clock is a fictional wine cellar nested in the heart of the world-renowned Bordeaux wine region in France. Born from my deep passion for wine and the enchanting allure of France, this project invites enthusiasts to embark on an unforgettable journey into the captivating realms of winemaking.
The site shares a brief narrative about Wine O'Clock, offering a glimpse into its rich history and commitment to the craft. Immerse yourself in our curated gallery, adorned with exquisite photos captured by owners, reviews left by cherished visitors, creating a tapestry of memories that resonate with the essence of our vineyard, or read our blog if you crave some more info about all things wine. Whether you're a seasoned connoisseur or a curious explorer, Wine O'Clock has something for everyone. For booking or any additional information, our Contact form is at your disposal. Wine O'Clock beckons, a celebration of passion, tradition, and the timeless beauty of French winemaking.
Deployed project can be found here: Wine O'Clock
- Overview
- User experience
- Agile Development
- Features & Future Development
- Technologies used
- Testing
- Deployment
- Acknowledgement & Credits
- Media
During the planning phase I revisited UX videos provided on the course and used 5 planes to create my design. I tried to keep original idea of project as much as I could but as I got unwell for majority of project time, some big changes can be seen. I have left original planning part for Strategy and Scope plane to show what I begun with. Opportunities in Strategy plane and MoSCoW in Scope plane shows exactly how different project was when I planned it.
- Offer a fully responsive user-friendly site to browse through.
- Implement fully functional features.
- Offer admin/user login with full CRUD funcionality.
- Create a welcoming space for wine enthusiasts to contribute their photos and reviews.
- Promote a passion for wine and travel.
| Opportunity | Importance | Viability/Feasibility |
|---|---|---|
| Age verification | 5 | 5 |
| Newsletter list | 3 | 5 |
| User register/login | 5 | 5 |
| User profile | 3 | 1 |
| User ability to add photos to gallery | 2 | 3 |
| User ability to delete previously added photos | 2 | 3 |
| User reviews | 5 | 5 |
| Full CRUD funcionality for user | 5 | 5 |
| Full CRUD funcionality for admin | 5 | 5 |
| Admin login via front end | 5 | 5 |
| Password recovery | 5 | 5 |
| Reservation management system for admin | 5 | 3 |
| User ability to book a tour online | 5 | 5 |
| User ability to edit/cancel booking online | 3 | 3 |
| Booking confirmation on site | 5 | 5 |
| Booking confirmation by email | 5 | 5 |
| Booking reminder by email | 3 | 3 |
| Visible booking for logged-in user | 3 | 2 |
| Option to pay for booking online | 3 | 1 |
| About page | 5 | 5 |
| Contact form | 5 | 5 |
| Social media links | 3 | 5 |
| Terms & conditions | 3 | 3 |
| Wine blog | 2 | 2 |
| --- | --- | --- |
| Total | 95 | 96 |
Due to a incredible amount of new knowledge and deadline for this project as for anything in life and to avoid scope creep, I used MoSCoW method to keep project on track and concentrate on delivering fully functional site. Unfortunately, since beginning of the project I knew I won't have time to implement everything I would like so decided to leave some features for future development.
-
Must Have:
- User register/login
- User reviews
- Full CRUD funcionality for user
- Full CRUD funcionality for admin
- About page
- Contact form
- Social media links
-
Should Have:
- User ability to book a tour through contact form
- User ability to add photos to gallery
- Wine blog
- Password recovery
-
Could Have:
- User ability to edit/cancel booking online
- User ability to delete previously added photos
-
Won't Have:
- User profile
- Reservation management system for admin
- Newsletter list
- Booking reminder by email
- Terms & conditions
- Option to pay for booking online
- Booking confirmation on page
- Booking confirmation by email
| EPIC | ID | Task |
|---|---|---|
| SET UP & DEPLOYMENT | ||
| As a developer, I can create a new Github repository to store my project files online | ||
| As a developer, I can create a new workspace on Gitpod, install Django and add required libraries to have access to cloudbased images and postgress database | ||
| As a developer, I can create a Heroku app and deploy project early to confirm funcionality | ||
| EPIC | ID | User Story |
|---|---|---|
| NAVIGATION AND CONTENT | ||
| As a user, I can navigate through website easily | ||
| As a user, I can clearly understand the purpose of the site | ||
| As a user, I can read relevant content | ||
| USER REGISTRATION & LOGIN | ||
| As a user, I can register on the site | ||
| As a user, I can login using USERNAME and password | ||
| As a user, I can logout | ||
| BOOKING | ||
| As a user, I can book a tour | ||
| As a logged-in user, I can see my booking | ||
| As a logged-in user, I can edit my booking | ||
| As a logged-in user, I can cancel my booking | ||
| REVIEWS | ||
| As a user, I can read reviews from other visitors | ||
| As a logged-in user, I can leave a review | ||
| As a logged-in user, I can add my photo taken at wine cellar when leaving a review | ||
| As a logged-in user, I can delete my previously added photo to review | ||
| As a logged-in user, I can edit my review | ||
| As a logged-in user, I can delete my review | ||
| BLOG | ||
| As a user, I can see a paginated list of posts | ||
| As a user, I can click on a post to see full text | ||
| COMMENTS | ||
| As a logged-in user, I can write a comment on post | ||
| As a logged-in user, I can edit my comment | ||
| As a logged-in user, I can delete my comment | ||
| As a user, I can read other people comments | ||
| GALLERY | ||
| As a user, I explore images in gallery | ||
| CONTACT | ||
| As a user, I can find wine cellar's opening hours | ||
| As a user, I can find wine cellar's location | ||
| As a user, I can contact someone at wine cellar | ||
| ADMIN | ||
| As an admin, I can login to access admin panel | ||
| As an admin, I can add/edit content | ||
| As an admin, I can create draft posts | ||
| As an admin, I can create, read, update and delete posts | ||
| As an admin, I can delete inappropriate reviews/photos | ||
| As an admin, I can approve comments | ||
| As an admin, I can delete inappropriate comments | ||
| As an admin, I can upload/ delete images from gallery | ||
| As an admin, I can add description to images in gallery | ||
| DEVELOPER | ||
| As a developer, I can create wireframes | ||
| As a developer, I can create a fully responsive site | ||
| As a developer, I can choose color scheme and style of the website | ||
| As a developer, I can choose fonts | ||
To help with a flow of the website, I created a flowchart using Draw.io
Wireframes for both desktop and mobile were created with Balsamiq and can be seen below:
Home Page
About Page
Gallery Page
Book a Tour Page
Contact Page
Login Page
Home Page
About Page
Gallery Page
Book a Tour Page
Contact Page
Login Page
Home Page
About Page
Gallery Page
Reviews Page
Blog Page
Blog post Page
Contact Page
Contact Success Page
Login Page
Logout Page
Register Page
Home Page
About Page
Gallery Page
Reviews Page
Blog Page
Blog post Page
Contact Page
Contact Success Page
Login Page
Logout Page
Register Page
The color palette chosen for Wine O'Clock app reflects a thoughtful blend of elegance and richness inspired by the world of wines. The soft and inviting Seasalt shade #fafafa serves as the symbol of the purity and clarity found in the process of winemaking. The use of Muted gold shade #daa520 represents the allure of gold, mirroring the excellence and sophistication associated with wines bringing a sense of warmth to project. This golden hue speaks to the refined taste and quality that defines the Wine O'Clock experience. Accentuating the palette are deep, juicy tones of Bordeaux #4c0013, evoking the essence of rich red wines, and a Classic black #000000, representing the depth and complexity found in a perfectly aged bottle. Each color is carefully selected to embody the journey from vine to cellar, culminating in a visual harmony that encapsulates the luxurious world of Bordeaux wines at Wine O'Clock.
To add more depth and interest to design but not make it overwhelming for user to look at, I created a pattern for background using one my colors - Classic black #000000:
In planning the visual identity of my website, I meticulously selected two fonts, Parisienne and Montserrat, to convey a harmonious blend of elegance and readability. Parisienne, with its delicate and flowing script, exudes a touch of sophistication, making it ideal for captivating headings that leave a lasting impression. Complementing this, Montserrat provides a clean and modern sans-serif typeface for content, ensuring optimal legibility and a seamless reading experience. Together, these fonts not only reflect the timeless allure of France and wine industry but also contribute to an aesthetically pleasing and engaging design, inviting visitors to explore our content with both style and clarity.
I have included details of agile development in a separate file AGILE.md.
In the second half of development I realized what I won't be able to implement due to dealine fast approaching. I decided to leave following features for future development:
- Map with marker so that location is easier to find
- Option to book and edit a tour online
- Option to book special occasions online
- Option to pay for everything online
- I would like to add an option to purchase wine directly from site
- HTML
- CSS
- Javascript
- Python
- Django
- Django allAuth
- Bootstrap
- Heroku
- Heroku PostreSQL & ElephantSQL
- Jinja
- Whitenoise
- Cloudinary
- Summernote
I have included details of testing in a separate file TESTING.md.
I have included details of testing in a separate file DEPLOYMENT.md.
-
Pattern Monster - background pattern
-
Google Fonts - fonts
-
Font Awesome - icons
-
Stack Overflow - used to check if I remember correct how to set CSRF_TRUSTED_ORIGINS in settings
-
Google groups - used to resolve models.py issue
-
Walkthrough blog code from Code Institute course used to set up register/ login/ logout/ blog and modified/ styled to suit my project.
-
Reddit - used to reset my database when I couldn't resolve migration errors.
-
The biggest thank you as always to my family during this busy time of juggling the biggest project so far, hackathon and life in general.
-
Thank you as well to my mentor David Bowers who supported me from the very beginning always giving the best advice and ideas for solutions and more importantly never losing hope in me, even when I did.
-
And thank you to Kim for continuous support and in general for convincing me to take on this course.
- Vecteezy - Home page image by Chinnachart Martmoh, available at this link
- Freepik - About page image by wirestock, available at this link
- Vecteezy - Reviews page image by somchai sanvongchaiya, available at this link
- Vecteezy - Contact page image by icon ade, available at this link
- Vecteezy - blog image by icon ade, available at this link
- Vecteezy - blog image by Idalba Granada, available at this link
- Vecteezy - blog image by Idalba Granada, available at this link
- Vecteezy - blog image by Chinnachart Martmoh, available at this link
- Pexels - review image by Grape Things, available at this link
- Vecteezy - review image by Iftikhar Alam, available at this link
- Vecteezy - review image by Yulia Gapeenko, available at this link
- Other review images were generated by me using Adobe Firefly
- Vecteezy - gallery image by Pierluigi Palazzi, available at this link
- Vecteezy - gallery image by Chinnachart Martmoh, available at this link
- Vecteezy - gallery image by icon ade, available at this link
- Vecteezy - gallery image by Giuseppe Ramos, available at this link
- Vecteezy - gallery image by Chinnachart Martmoh, available at this link
- Vecteezy - gallery image by Kseniia Chunaeva, available at this link
- Vecteezy - gallery image by Chinnachart Martmoh, available at this link
- Vecteezy - gallery image by Irina Kryvasheina, available at this link
- Freepik - gallery image by freepik, available at this link
- Freepik - gallery image by pressfoto, available at this link
- Freepik - gallery image by lookstudio, available at this link
- Pexels - gallery image by furkanfdemir, available at this link