CSWok Takeout Project
Link to website:
Computer Science Wok (CSWok) is an Asian Restaurant inspired website for ordering takeout food.
As a final project for a Web Development class, our group hard coded both the front-end and back-end aspects of the website. Some functionalities include: an interactive menu, auto updating shopping cart, and login/signup page.
Roles and Responsibility
Our group members Daniel (me), Brian, and Riis, coded the website from scratch so a lot of time was split taking on different roles interchangeably. However, to categorize our roles more specifically:
​
-
Daniel focused more on the front end regarding the coding of the home page, coding of the menu page, implementing Google Maps API, the contact form and overall direction of the website.
-
Brian focused more on the back end regarding the domain, database, client/server side, the logic of the menu page, coding the cart page, logic of the cart page, the login/signup page, and logic of login/signup page.
-
Riis focused more on the back end regarding the coding of the search bar, logic of the search bar, the login/signup page, and logic of login/signup page.
Goals and Constraints
Our overall goal was to have a functional website that could accurately detect and respond to:
​
-
the menu transactions
-
cart calculations
-
login/signup process
-
third party API and contact form
​
A problem we faced earlier in our project was correctly adding and clearing items from our cart. There were a few weeks we spent unable to progress because of smaller errors such as identical items being added consecutively or deleting an item, deleted more items than intended. We ended up figuring it out with more group logic sessions, altering the code to have a loop that checks through all the items in the database and refreshed the cart upon any add/delete transactions.
Process
The resources we used were:
-
Heroku- A domain that we could host our website on for free
-
Datastore- Our backend database used when interacting with the shopping cart function and usernames/passwords
-
Express- backend web application framework (Server-side logic), which helps structures our paths and URLs
-
Axios- HTTP Client-side logic for browser and node, which helps sends requests and responses
Our main programming language was JavaScript, along with HTML and CSS for styling.
We started by braining storming many ideas but eventually came to a conclusion of CSWok, steaming from our shared interest of Asian foods and computer science.
​
I started the front end, building the framework to how the website would look like. As I was working on the front end, on my local state, Brian was theorizing how to host our website and which back-end options should be used. Once we’ve selected it and uploaded the framework, we started working on the logic portions of the website, with Brian and Riis coding the backend. After each logic portion was complete, I would finalize the frontend and test the usability before moving onto the next step.
Outcomes
After months of hard work, we created a functional and appealing site. The following are screens of the different pages, examples of login/signup and examples of transactions:
Signup Page
Landing Page
Group Members
