Smoothie Bar

A virtual smoothie bar! place your order at https://smoothiebar.herokuapp.com/

Authors: Sam, Ryan, Kate & Burhan

Local Set up

• Clone this repo
• Run npm i to install npm dependencies
• If you like, run npm run buildtest. This will run a script that builds a test database locally on your machine. You'll need this string for your config.env file:

TEST_DATABASE_URL = postgres://smoothietester:test@localhost:5432/smoothietest

• Run npm run fulltest to run both database and server tests
• npm test will run only the server tests

Planning

We sketched out our first ideas out on whiteboards:

• Initial plan:

• Initial layout:

• User/code journey:

We then wrote out our entire file structure - along with file purposes and overall themes:

• File structure:

• Controllers structure:

After our design talk, we drew up a few designs in Figma:

Some features we wanted to see on each page (✨ = level of stretch goal):

Order page

• Name
• Dropdown of smoothies
• Button - order
• Show contents of smoothies ✨
• Timestamp ✨

Personal page - show data

• Name
• Order history
• Favourite smoothie (most ordered) ✨
• Authentication? ✨✨
• Add your own smoothie recipe ✨✨✨

To-do

• Set up file structure
• Installed npm packages
• Set up server (app.js, index.js)
• Set up layout (/views/layout/main.hbs)
• Set up partials (/views/partials/..)
• Set up main page content (/views/home.hbs)
• Set up database (/model/build_db.js, db_connection.js)
• Write a query to put new data in DB
• Connect query to form POST handler (/controllers/order.js)
• Send back data from DB
• Render data from DB response on page (/controllers.receipt.js ==> /receipt.hbs)
• Deploy to Heroku
• Travis?
• WRITE SOME TESTS OK

To-do stretchies ✨✨

• Make an API call in the backend for nutrutional info

Day 1

• We coded as a team on one laptop
• We planned and wrote down a detailed file structure - we found writing this out really helped with structuring our code later on
• We wrote out our core express server files - app.js & index.js
• Wrote out a very basic handlebars template, added some partials
• Wrote the code to send our {{{body}}} content to the server
• Once we had it up, straight to Heroku!
• Wrote the build code for our database, got it running after a few snags
• Ate lots of chocolate (Kate) 🍫

Day 2

• Connected our database up to the app
• Used Handlebars to render data on the page
• we split up for pair coding
• Wrote tests for the server and the database
• ✨✨ CSS'd ✨✨
• we worked on a 404 page
• we worked rendering all the order history

Preview

Issues

• Understanding MVC architecture
• Struggled with a test database on Travis
• not breaking established tests when experimenting with new features
• communication so when pair coding so the entire team knows their objectives
• Travis.org vs Travis.com???

Cool stuff we learned

• more practice with writin server tests with supertest
• Serving and creating pages from the backend (express / handlebars)
• SQL in database build can just be a string - doesn't need to be a separate file (very cool)
• The routing in express/handlebars doesn't have to be in a separate file (when it is very small)
• Script to build a whole test database from a js file (very very cool)
• Putting our messy SVGs in partials - thanks spottedgulls!