A simple, modular, light web shop made from scratch with CSS, JS and PHP. Fully responsive for use with mobile and tablet devices. In this instance modelled to be a bakery/coffee shop, it provides a lightweight and useful way for customers to purchase items without having to queue in front of the store.
Deployment on a hosting server is super simple. Given the database schema just create a database on phpmyadmin called 'coffee' and import the coffee.sql file to fill and create the appropiate tables.
Once you have all your SQL database up and running just launch a web browser and navigate to the /index.php page and you'll be up and running.
Feel free to modify all items and modals and color schemes. This is just a simple version for a bakery but it can be adapted to any shop.
Users can fully customize size of cover picture and of course the picture itself.
Scrolling down will land them in the shop itself.
Once the users click on a modal they can visualize the order, pick the size and write their name on the order as the barista will need it when calling out their order. They can also choose to pay by card or cash (card payments are disabled for security reasons in this version.)
A very handy feature is the top display live counter that allows the user to visualize in real time a "virtual queue" where they can see how many orders are yet to be fulfilled and so gauge the waiting time until their order is prepared.
As a staff member, clicking the "Staff Login" button on the navigation bar will land you in this page where pre-authorised memebers can join and look at the realtime view of all the outstanding orders.
Once you're in, its a simple uncluttered live table that updates every few seconds that queries the SQL database to view the outstanding orders the barista or staff member needs to attend to. Once the orders are complete the staff member clicks on confirm order and the order leaves the table and the next one replaces it.
From here you can also add new staff members and remove staff members from the system.
Lastly, you can see some screenshots of the page being used by a mobile device.
