{"id":24648192,"url":"https://github.com/alissatroiano/dash","last_synced_at":"2026-04-07T21:32:04.525Z","repository":{"id":103092494,"uuid":"312751221","full_name":"alissatroiano/Dash","owner":"alissatroiano","description":"As the Milestone 3 Project for Code Institute's Full Stack Developer Program, Dash is a recipe sharing application","archived":false,"fork":false,"pushed_at":"2024-11-17T01:16:14.000Z","size":89052,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-11T18:23:37.505Z","etag":null,"topics":["crowdsourcing","crud-application","flask","mongodb","python"],"latest_commit_sha":null,"homepage":"https://dash-ms3.herokuapp.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alissatroiano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-11-14T05:17:19.000Z","updated_at":"2024-11-18T20:20:56.000Z","dependencies_parsed_at":"2025-07-11T00:03:07.019Z","dependency_job_id":"7cc99bff-352f-492c-a767-8c008a571ea2","html_url":"https://github.com/alissatroiano/Dash","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"Code-Institute-Org/gitpod-full-template","purl":"pkg:github/alissatroiano/Dash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alissatroiano%2FDash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alissatroiano%2FDash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alissatroiano%2FDash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alissatroiano%2FDash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alissatroiano","download_url":"https://codeload.github.com/alissatroiano/Dash/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alissatroiano%2FDash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31530641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crowdsourcing","crud-application","flask","mongodb","python"],"created_at":"2025-01-25T16:14:29.532Z","updated_at":"2026-04-07T21:32:04.500Z","avatar_url":"https://github.com/alissatroiano.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash\n\n![responsive](/wireframes/amiresponsive.jpg)\n\nDash is a recipe crowdsourcing application for men \u0026 women, (ages 24 - 39), who want to find and share recipes. To become a contributor or an editor for Dash, all you need to do is sign up for a free account, log in, and start creating/editing recipes! Dash's administrator account manages the application and may delete inappropriate or offensive content.\n\n## UX\n\nTo make for a more organized development process, the developer used [GitHub Projects](https://github.com/users/alissatroiano/projects/4) to manage sprints and tasks. \n\nAs the Milestone 3 Project for [Code Institute's](https://codeinstitute.net/) Data-Centric Development portion of the Full Stack Developer Program, this project was built with HTML, CSS, JavaScript, jQuery, Python, Flask, and MongoDB.\n\nDash's target market is comprised of men \u0026 women, ages 24 - 39, that wish to find and share recipes. To become a contributor or editor on Dash, a user must first create an account. Creating an account is quick, easy, and free. Once an account has been created, a user may log in to create new recipes or edit any of the recipes on Dash.\n\n### User Stories\n\nUser stories were created first during the Strategy Plane phase of this milestone project to guide the wireframing process:\n\nUser Story 1:\n\n\u003e *\"As a Dash user, I want to be able to search for recipes, so that I can find what I actually want to make!\"*\n\u003e\u003e -Jane Marino, Homemaker\n\nUser Story 2:\n\n\u003e *\"As a new user, I want to find the 'Sign Up' form right away, so I can create and update recipes.\"*\n\u003e\u003e -Michael Corona, Yoga Teacher\n\nUser Story 3:\n\n\u003e *\"As a contributor, I want to be able to post new recipes, so I can share my creations with like-minded individuals.\"*\n\u003e\u003e -Danielle Greenstein, Food Blogger\n\nUser Story 4:\n\n\u003e *\"As an editor, I want the option to edit any of the recipes on the page, so I can use my expertise to contribute to the Dash community.\"*\n\u003e\u003e -Andy Fjordane, Chef\n\n![userstories](wireframes/userstories.jpg)\n\nThe user story worksheet and journal exercise that was completed during the Strategy Plane portion of this project can be viewed here:\n\n[userjournal](wireframes/userstories.pdf)\n\n### Trade-Off Exercise\n\nTo determine what features were the most important and most viable, the following Strategy Plane activity was completed during the planning phase of this project:\n\n![Trade Off Table](wireframes/tradeoff.jpg)\n\nTo view a PDF version of this exercise, please refer to [this document](wireframes/tradeoff.pdf)\n\n### Wireframes\n\n The following wireframes were created by the developer to guide the development process:\n\n![wireframes](wireframes/desktop.png)\n\n![wireframes](wireframes/tablet.jpg)\n\n![wireframes](wireframes/mobile.jpg)\n\nThese [wireframes](wireframes/dash.pdf) can also be viewed in the attached PDF.\n\n## Features\n\n### Existing Features\n\nTo properly develop this full-stack application, the following features were included:\n\n- Sign Up - allows users to create an account, by inputting an original username and a password.\n\n- Login - Allows users to log in to their Dash account, by inputting the correct user and password values.\n\n- Create Recipe - Allows **existing** users to create new recipes, by providing an 'Add Recipe' form that lets users insert 'recipe' records to MongoDB and upload an image to the project's Amazon S3 Photo Bucket.\n\n- Edit Recipe - Allows **existing** users (aka 'editors') to edit recipes, by providing an 'Edit' button that displays when users are logged in and sends an updated dictionary of values to MongoDB upon submission.\n\n- Search - Allows users to search for specific recipes, by providing them with a search bar that fetches and displays relevant data.\n\n### Features Left to Implement\n\n- Edit Credentials Feature - Allows users to upload a profile picture, view content they have created, and change their username and/or password.\n\n### Database Design\n\nIn order to build the most optimal CRUD application, I began my process by creating this Use Case flowchart:\n\n![use case](wireframes/usecase.jpg)\n\nTo create a functional CRUD application, I took the following steps when creating my database:\n\n1. Choose a database management system: **MongoDB**.\n\nI chose to use MongoDB to store Dash's data. Dash is a crowdsourcing app, so it involves obtaining information, or data, from a large group of people. Because of this, it was determined crucial that Dash be connected to a database that can handle a lot of data and send/receive data requests to and from the application.\n\n2. Design the Database:\n\n    - Though my initial plans were a bit more complex, I decided to make the database as simple and efficient as possible. To do this, I took the following steps:\n        - Create a new database named, 'Dash'.\n\n        - Create 2 collections:\n            1. recipes - Contains the contents for each recipe.\n            2. users - Contains identifying information that is essential to user authentication.\n\n        ![database](wireframes/dashdatabase.png)\n        \n    - Include the following documents in each collection:\n\n        1. recipes:\n            - recipe_name: The name of the recipe (string).\n            - recipe_description - A brief description of the recipe (a string).\n            - prep_time - How long the recipe takes to make (I contemplated using an integer, but decided to use a string so users can write minutes, etc.).\n            - tools_needed - What tools are required to make the recipe (string)\n            - recipe_ingredients - The ingredients of the recipe (string)\n            - file - An image file that users can upload when creating or editing a recipe. (string).\n            - recipe_instructions - The steps taken to create the recipe (string)\n\n        ![recipesdb](wireframes/recipesdb.png)\n\n        2. users:\n            - username: The username that the user creates at signup and logins in with to perform any write actions on the database. ***(Note: a user can read any of the recipes without an account, but must be signed in to create or edit a recipe)***\n            - password: The password will be used by the user to login and perform C.R.U.D operations on the database.\n\n3. Add some data:\n\n    - When building a C.R.U.D application, it makes it easier for the developer to build out the backend when there is already some data in place. Because of this, I added some data to each of the collections in my database. Once I had some data to work with, I created the Flask App, deployed it to **Heroku**, connected it to my database, and constructed the frontend.\n\nTo read more about my process, visit the Deployment section of this documentation.\n\n## Technologies Used\n\n- [HTML](https://html.com/)\n\n- This project uses HTML to display and format content on the front-end.\n\n- [CSS](https://www.w3.org/Style/CSS/Overview.en.html)\n\n- This project uses **CSS** to add styles and responsiveness to its' content.\n\n- [Python](https://www.python.org/)\n\n- This project uses **Python** to speed up development time and integrate systems.\n\n- [PyPy](https://doc.pypy.org/en/latest/)\n- This project uses **PyPy** to improve processing performance.\n\n- [Pip3](https://pip.pypa.io/en/stable/)\n\n- This project uses **Pip3** to install software dependencies for Python.\n\n- [Flask](https://flask.palletsprojects.com/en/1.1.x/)\n\n- This project uses the **Flask** framework to reduce development time and build a more robust application.\n\n    **Flask Dependencies:**\n\n    - [Werkzeug](https://werkzeug.palletsprojects.com/en/1.0.x/serving/)\n\n    - This project uses Flask's dependencies, including the WSGI web application library, **Werkzeug** to serve the WSGI application with powerful structure and patterns.\n\n- [Jinja](https://jinja.palletsprojects.com/en/2.11.x/)\n\n- This project uses the **Jinja** templating functionality to create HTML that is returned to the user via HTTP requests.\n\n- [MongoDB](https://www.mongodb.com/)\n\n- This project uses **MongoDB** to simplify data storage and manipulation.\n\n- [PyMongo](https://pypi.org/project/pymongo/)\n\n- This project uses the driver **PyMongo** to fetch and insert data to MongoDB from Python.\n\n- [DNSPython](https://www.dnspython.org/)\n\n- This application uses **dnspython**  to handle queries and data manipulation.\n\n- [request]()\n\n- This project uses **request** to get the JSON out of the response body on new inserts.\n\n- [Git](https://git-scm.com/)\n\n- This project uses **Git** for code storage and version control.\n\n- [GitHub](https://github.com/)\n\n- This project uses **GitHub** for version control and project management.\n\n- [Materialize](https://materializecss.com/)\n\n- This project used **Materialize** to add frontend styles and improve user experience.\n\n- [Boto3](https://boto3.amazonaws.com/v1/documentation/api/latest/index.html)\n\n- This project uses **Boto3** to create, configure, and manage the AWS S3 service.\n\n- [Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html)\n\n- This application uses Amazon S3 to streamline file storage and transfer.\n\n- [Werkzeug.security](https://werkzeug.palletsprojects.com/en/1.0.x/utils/)\n\n- This application uses **Werkzeug.security** to create secure, reliable user authentication.\n\n- [Werkzeug.utils](https://werkzeug.palletsprojects.com/en/1.0.x/utils/)\n\n- This application used Werkzeug.utils to import, configure and use the `secure_filename` function.\n\n- [Pytest](https://docs.pytest.org/en/latest/)\n\n- This project used testing framework **Pytest** to write and execute database tests in Python.\n\n## Testing\n\nThorough testing was conducted by the developer for this project and can be viewed in [TESTING.md](TESTING.md)\n\n## Deployment\n\n### Heroku\n\nThis project uses **Heroku** for deployment. \n\nTo successfully deploy the app, the following steps were taken:\n\n- Visit GitPod workspace.\n- Create the Flask App.\n- Use the CLI to tell Heroku which applications and dependencies are required to run the application via the `pip3 freeze --local \u003e requirements.txt` command.\n- Create the Procfile via `echo web: python app.py \u003e Procfile`.\n- Visit [Heroku](https://www.heroku.com).\n- Click, 'Create a New App'.\n- Create an application on Heroku with a unique name **('dash-ms3')** to satisfy Heroku requirements.\n- Create the Heroku application.\n- Add the following configuration vars to Heroku application:\n    - `IP`\n    - `PORT`\n    - `MONGO_URI`\n    - `SECRET_KEY`\n    - `MONGO_DBNAME`\n- Visit workspace/IDE.\n- Push newly created `requirements.txt` and `Procfile` to Git.\n- Navigate back to Heroku and enable automatic deployment.\n- Connect Heroku to deploy from the **master** branch of Dash's repository.\n- Successfully deploy the application.\n\nOnce the application was deployed, I navigated back to my workspace and began to build out templating with Jinja. Upon testing my application, I discovered an issue regarding file storage and decided to use [Amazon S3]() Photo Bucket, a third-party service, to store file uploads.\n\nI then had to add the following configuration vars to my Heroku app;\n    - `S3_BUCKET_NAME`\n    - `S3_KEY`\n    - `S3_SECRET`\n    - `S3_LOCATION`\n\nTo view this project on Heroku, visit https://git.heroku.com/dash-ms3.git.\n\n## Local Machine\n\nTo run the project from your local machine, follow these steps:\n\n- Make sure git is installed `git --version`.\n- If Git isn't already configured, configure Git:\n    - `git config --global user.name \"your_username\"`\n    - `git config --global user.email \"your_email_address@example.com\"`\n- Check the configuration:\n    - `git config --global --list`\n\n- **Clone** the application in your local environment via command:\n\n    - `gh repo clone alissatroiano/Dash`\n\n## Credits\n\n### Development Process\n\n- The steps taken to configure Flask and MongoDB were learned by following [Code Institute's](https://codeinstitute.net/) 'Data-Centric Development: Flask Mini Project' lesson.\n\n- The process I used to import the favicon was copied from (Stack Overflow)(https://stackoverflow.com/questions/11893478/add-favicon-to-website) and [Hostinger](https://www.hostinger.com/tutorials/how-to-add-favicon-to-website).\n\n- The developer made use of [GitHub Projects](https://github.com/users/alissatroiano/projects/4) to manage development and efficiently set sprints.\n\n- The media queries defined in the stylesheet for tablets and large devices were copied/learned from [W3 Schools](https://www.w3schools.com/css/css_rwd_mediaqueries.asp).\n\n- I followed the steps provided by this article, [How to use Flask to upload files to Amazon s3](https://www.zabana.me/notes/flask-tutorial-upload-files-amazon-s3) to understand and implement uploading files to an Amazon S3 bucket using the Flask web framework for Python.\n\n    - I aquired information about the difference between boto3 and botocore from this [Reddit post](https://www.reddit.com/r/aws/comments/apdaoo/boto3_vs_botocore/).\n\n- I read [this article](https://boto3.amazonaws.com/v1/documentation/api/latest/guide/migrations3.html) to learn more about working with Amazon S3 buckets. \n\n- I used [JSHint](https://jshint.com/) to validate, `static/js/script.js`.\n\n- I used [W3C HTML Validator](https://validator.w3.org/) to validate every file in `/templates`.\n\n- I used [W3C Jigsaw](https://jigsaw.w3.org/css-validator/) to validate my stylesheet, `static/css/style.css`.\n\n- I learned about **request.args.get** by reading [this article](https://stackoverflow.com/questions/34671217/in-flask-what-is-request-args-and-how-is-it-used).\n\n- I referenced [these examples](https://www.programcreek.com/python/example/51530/flask.request.args) when learning about `request.args.get` and building the search function.\n\n- I utilized the [DiffChecker](https://www.diffchecker.com/) to find typos, bugs and differences in updated syntax.\n\n- I tested my JavaScript with [JSHint](https://jshint.com/).\n\n- I used [pep8online](http://pep8online.com/checkresult) to ensure Python code is PEP8 compliant.\n\n- I used the [CSS Autoprefixer](https://autoprefixer.github.io/) to parse my CSS and add vendor prefixes. \n\n### TESTING\n- I used [Pytest](https://docs.pytest.org/en/latest/) for automated testing.\n\n- I followed [Tutorialspoint]() to learn more about Pytest and speed up the testing process. \n\n- I referenced this [GitHub repository](https://github.com/Code-Institute-Submissions/STEPLADD3R-data-centric-development-project/blob/master/test_app.py) as a starting point for automated testing with Python.\n\n- I \n\n### Content\n\n- The grid layout and responsive design were made possible by importing [Materialize](https://materializecss.com/) front-end framework and using the built-in classes.\n\n- The 'Cauliflower Grilled Cheese' recipe was copied from [delish](https://www.delish.com/cooking/recipe-ideas/g3733/healthy-dinner-recipes/).\n\n- Text shadow styles were copied from [CSS Tricks](https://css-tricks.com/almanac/properties/t/text-shadow/).\n\n- The recipes the developer posted to provide placeholder content were copied from:\n\n    - Broccoli Quinoa Cakes - [Feasting at Home](https://www.feastingathome.com/broccoli-cakes/).\n\n    - Tomato Garlic Chicken - [I Food Real](https://ifoodreal.com/chicken-breast-with-tomatoes/).\n\n    - Cauliflower Grilled Cheese - [Tasty](https://tasty.co/recipe/cauliflower-grilled-cheese).\n\n    - California Burger Wraps - [Taste Of Home](https://www.tasteofhome.com/recipes/california-burger-wraps/).\n\n    - Salmon Garlic Lemon - [Eat Well 101](https://www.eatwell101.com/baked-salmon-asparagus-foil-packs-recipe)\n\n### Media\n\n- Dash's favicon was copied from [Openclipart.org](https://openclipart.org/detail/321362/kitchen-utensils) and is licensed under Creative Commons.\n\n- The default photo that is selected when a user does not upload an image was copied from [unsplash](https://unsplash.com/photos/fnztlIb52gU).\n\n- The icon in the branded navigation menu, responsive sidebar, and footer was copied from [Font Awesome](http://fontawesome.com/)\n\n- The footer styles were copied from [Materialize](https://materializecss.com/footer.html) and altered via copying [W3 Schools](https://www.w3schools.com/howto/howto_css_fixed_footer.asp).\n\n- The stock images used to create the recipes were copied from:\n\n    - [Unsplash](https://unsplash.com/photos/SqYmTDQYMjo) - Cauliflower Grilled Cheese\n\n    - [Unsplash](https://unsplash.com/photos/9WfO94SjhmE) - Tomato Chicken Garlic \n\n    - [Feasting at Home](https://www.feastingathome.com/broccoli-cakes/)\n\n    - [ifoodreal.com](https://ifoodreal.com/clean-eating-recipes-dinners/)\n\n    - [unsplash](https://unsplash.com/) - Salmon\n\n- The responsive view image at the top of this README.md documentation was created with [AmIResposnive](http://ami.responsivedesign.is/).\n\n- The hero image on the Profile/welcome page was copies from [Unsplash](https://unsplash.com/).\n\n### Acknowledgements\n\n- I received markdown instructions from this [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#blockquotes)\n\n- I received UX inspiration from [Awwwards](https://www.awwwards.com)\n\n- I received UX inspiration from [Behance](https://www.behance.net)\n\n- I learned about Flask file upload configurations from [Flask's Documentation](https://flask-uploads.readthedocs.io/en/latest/).\n\n- I utilized the free web-tool provided by [Amiresponsive](http://ami.responsivedesign.is/) to get an idea of how my project looks on different screens.\n\n- I obtained information about project dependencies and what they do from, [Inserting and Reading MongoDB Documents from a Python Flask API](https://medium.com/swlh/inserting-and-reading-mongodb-documents-from-a-python-flask-api-4fa7be61e45).\n\n- I proofread and corrected this documentation with [Grammarly]((https://app.grammarly.com/).\n\n- I referenced this [GitHub repository](https://github.com/Code-Institute-Submissions/STEPLADD3R-data-centric-development-project/blob/master/test_app.py) as a starting point for automated testing with Python.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falissatroiano%2Fdash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falissatroiano%2Fdash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falissatroiano%2Fdash/lists"}