typesammy/souperb

SOUPerb

SOUPerb is an app that will let you store all your recipes in one easy to use place. This full-stack application uses RESTful routes and MVC framework. You can skip creating an account by using the logins below:

• Username: Souperb
• Password: SoupMail1

🍲 How to use

• You can sign up via the "sign up" CTA, then proceed to login.
• Click on "Create a recipe"
• Enter the relevent information, you can include a source as well as an image.
• Select the relevent categories and click "Create".
• Your recipe has now been added and can be found on the homepage via the categories section.
• You can edit the recipe as you please, as well as remove them entirely.

🍳 Try it out

• Try SOUPerb here

🔐 Sign up feature

• Case sensitive and unique usernames
• Email validator
  • Include one @
  • One character before @
  • Include at least one dot after @
  • One character between @ and .
  • At least one character after .
• Password validator
  • Minimum 8 characters long
  • At least one uppercase character
  • At least one number

🛠️ Technology used

• HTML/CSS
• Ruby
• Sinatra
• PostgreSQL

📐 Planning

• Created a database flowchart showcasing all the information that is needed as well as data type
• Created a website flowchart to help visualise RESTful routes
• Created the database and pre-planned most PSQL queries
• Researched recipe websites and food apps
• Designed a rough website mockup with Adobe PS

🐛 Bugs

• N/A

🌱 Future updates

• Add a couple of automatic recipes for every user so when signed in, the page isnt empty
• Add a user show and edit page/functionality
• Add search functionality
• Add recipe tags where users can input their own tags (eg: eggplant, gluten free)

🎨 Digital Mockups

Mockup created with Photoshop

🍕 Category icons

Icons created with Krita

✏️ Flowchart

Flowchart created with Creately

---

💫 My experience

I found that creating the visual representations of the database, web flow and RESTful routes helped keep my project organised. Having a very clear structure and end goal in mind meant I was never stuck on what to do next.

Key learning:

• Plan everything

Challenges:

• CSS stylings
• Displaying specific pages with specific paths

🌟 Show your support

Give this a star to show your support.

📬 Contact me on

• LinkedIn
• E-mail
• Instagram