To view the live website, click here.
Santa's Kitchen Helper is a tool that allows families to organise their events better. It is made mostly for Christmas, yet can be developed for all year round.
The application has features that allow families to create their own group, add events and also add reminders of what dishes they will bring to said event.
- UX
- User Stories
- Design
- Wireframes
- Database Design
- Typography
- Features
- Exisiting Features
- Features Left to be Implemented
- Technologies Used
- Tools
- Testing
- Deployment
- Credits and Acknowledgments
- Have a mission statement to know what the website is about.
- Have a way to easily navigate.
- Be able to register for an account.
- Get feedback on the requirements of the registration process.
- Have the option to join a family group.
- Have the option of creating a family group.
- Be able to create events in the family group.
- Be able to see events from other members.
- Not have to sign in every time I visit the page.
- Be able to add dishes that I will bring.
- See previous events.
- Have the option to edit my profile.
- See the contact details for the creators.
Using MongoDb NoSQL database the following collections were created.
Users collection:
| Title | Data Type |
|---|---|
| id: | ObjectId |
| name | string |
| string | |
| pass_ | binary_hashed_string |
Event collection:
| Title | Data Type |
|---|---|
| id: | ObjectId |
| name | string |
| date | string |
| event | string |
| string | |
| family | string |
| description | string |
| active | boolean |
| food | array |
Family collection:
| Title | Data Type |
|---|---|
| id: | ObjectId |
| name | string |
| date | string |
| events | array |
| members | array |
Heading font: Emily's Candy
Letter font: Fuzzy Bubbles
- Provides easy to use navigation across all pages.
- Stands out visually.
- Is responsive and uses hamburger button for small screens.
- Located in most common place that users are used to.
- Provides mission/about statement.
- Is appropriately themed.
- Is responsive.
- Gathers necessary information from user.
- Provides visual cues if data type is correct or not.
- Information asked is specific.
- Gathers necessary information from user.
- Provides visual cues if data type is correct or not.
- Information asked is specific.
- Provides links to creators social pages.
- Is appropriately themed with a made-up story about each creator.
- Is the user's control center.
- Provides buttons/choices for rest of features.
- Displays user and events information.
- Provides profile edit options, so user can change their information.
- Is pre-populated with user's information.
- Easy to find button.
- Opens modal to create a new event.
- Modal has clear requirements.
- Easy to use list to join a family.
- Button located on profile page, easy to find.
- Provides option to create a new family.
- Opens modal with requested information.
- Adds the user directly into family.
- Keeps the user signed in when moving away from page.
- Shows all events that have not happened yet.
- Shows dishes that will be brought
- Shows all events that have happened.
- Shows dishes that were brought
- Provides the option to add to dishes that will be brought to event.
- Gives option to choose which event.
- See event date and details.
- Join family by code and hide families.
- Add comments to events.
- HTML - Skeleton frame of the application.
- CSS - Beautifies the skeleton (HTML).
- JavaScript - Allows for user interaction and limited dynamic function on the application.
- Python - Allows dynamic function and back end programs to run. These programs (frameworks, libraries, and databases) are:
- Flask - Allows use of templating, security, user searching, and other critical functions.
- Pymongo - Allows Flask (Python) to communicate with MongoDB.
- PythonDNS - Allows for DNS data transfer.
- Werkzeug - Encrypts data as it is sent between the user and server.
- Datetime - Allows Python to take a date/time stamp.
- Random - Allows for a random number generator.
- MongoDB - NoSQL database that the application communicates with and stores information on.
- Adobe Color Wheel
- Used to help pick color schemes.
- Balsamiq
- Used to produce the wireframes.
- Bootstrap
- Used as framework.
- GitHub
- Used for version control and deploys application information to Heroku.
- Google Fonts
- Imported font families from here.
- Heroku
- Site where application is deployed.
- Jigsaw (Validation Service)
- Used to identify errors in CSS.
- JSHint
- Used to identify errors in JavaScript.
- jQuery
- JS library used with Bootstrap.
- Lighthouse
- Used to check for performance, accessibility, best practices, and SEO.
- PEP8 online
- Used to identify errors in Python.
- RandomKeygen
- Used to create random secret key for "env.py"
- TinyPNG
- Used to Minimize KB load per image.
- W3C Validator
- Used to identify errors in markup. -VSCode
- Integrated development environment used.
- Have a mission statement to know what the website is about.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Santa letter modal | Navigate to main page, see pop-up modal | Read mission statement | Works as expected |
| Santa letter modal | Click on "About" button, see pop-up modal | Read mission statement | Works as expected |
Screenshots
- Have a way to easily navigate.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Navigation bar | Click on navigation buttons | Get moved between pages | Works as expected |
Screenshots
- Be able to register for an account.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Registration form | Navigate to "Register" page and fill out form | Create a usable account | Works as expected |
Screenshots
- Get feedback on the requirements of the registration process.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Registration form | Input details in form | Get visual feedback for good or invalid data | Works as expected |
Screenshots
- Have the option to join a family group.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Join family button | Choose a family and click "Join family" | Get added in family | Works as expected |
Screenshots
- Have the option of creating a family group.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Create family button/modal | Press "Create family", add name and click "Create" | New family is created | Works as expected |
Screenshots
- Be able to create events in the family group.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Create events button/modal | Click "Create event", fill out the form, click "create" | New event is created | Works as expected |
Screenshots
- Be able to see events from other members.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Upcoming events | Navigate to Profile page and look at upcoming events | See upcoming events | Works as expected |
| Past events | Navigate to Profile page and look at past events | See past events | Works as expected |
Screenshots
- Not have to sign in every time I visit the page.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Session cookie | Navigate away from page and to page again | Stay signed in | Works as expected |
Screenshots
- Be able to add dishes that I will bring.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Bring dish | Navigate to profile page, click "Bring dish", choose event, complete form | dishes are submitted | Works as expected |
Screenshots
- See previous events.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Past events | Navigate to Profile page and look at past events | See past events | Works as expected |
Screenshots
- Have the option to edit my profile.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Profile edit option | Go to profile page, click "Edit profile", change details, click "Update" | Profile details are updated | Works as expected |
Screenshots
- See the contact details for the creators.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Contact page | Click on creator social media link | New tab opens to clicked link | Works as expected |
Screenshots
Santa's Kitchen Helper is deployed at https://santas-kitchen-helper.herokuapp.com/ on Heroku.
**Cloning Santa's Kitchen Helper from GitHub:
Install the following:
- Git
- PIP
- Python3
Create an account at MongoDB to construct database.
- 1: Clone Santa's Kitchen Helper repository using Git by typing the following command into the terminal.
git clone https://github.com/pbtrad/santa-s-kitchen-helper.git
- 2: Go to this folder in your terminal.
- 3: Enter the following command into your terminal to create virtual environment
virtualenv venv
- 4: Intialize the environment by entering the following command.
source venv\bin\activate
- 5: Install the requirements and dependancies from the requirements.txt file.
pip3 install -r requirements.txt
- 6: In an IDE create an env.py file where SECRET_KEY and MONGO_URI can be stored, then follow the schema in the schema file.
- 7: Run the application by entering.
flask run
or
python3 app.py
Deploying the website to Heroku:
- 1: Create a requirements.txt file by entering the following command.
pip3 freeze > requirements.txt
- 2: Create a Procfile.
echo web: python app.py > Procfile
- 3: Push files to your repository.
- 4: On Heroku dashboard create a new app.
- 5: Select deployment method and select GitHub.
- 6: On the dashboard set config variables:
| Key | Value |
|---|---|
| IP | 0.0.0.0 |
| PORT | 5000 |
| MONGO_URI | mongodb+srv://:@<cluster_name>-qtxun.mongodb.net/<database_name>?retryWrites=true&w=majority |
| SECRET_KEY | "your_secret_key" |
- 7: Select the deploy button on the Heroku dashboard.
- 8: Your site is deployed by Heroku.
Santa's Kitchen Nightmare 🎄