A responsive web application that analyzes and displays instant ramen statistics to help college students find the best ramen for them.
As the stereotype says, many college students around the world live up to the concept of a “broke college student”. During our search for ideas, we thought we could use the data set of instant ramen noodles, a primary food source that many broke college students eat day to day. Our final project is a website to analyze and display instant ramen statistics to help college students find the best ramen for them.
To build our project, we’ve opted to use a data set from Kaggle, which has compiled over 2500 independent reviews of different instant ramen brands and types from the website, “The Ramen Rater.” We will be analyzing and visualizing this data using JavaScript, TypeScript, Vega-Lite, and JQuery; for the front end, we will be using HTML and CSS.
- Use Figma, an online collaboration design tool, to create mockups of each page
- Figma Mockups with Style Guide: https://www.figma.com/file/XKVAFUWeG7JXBygHBhpzuT/RAWMENT?node-id=4%3A291
- Figma Prototype with Style Guide: https://www.figma.com/proto/XKVAFUWeG7JXBygHBhpzuT/RAWMENT?node-id=1%3A2&scaling=min-zoom
- Use illustrations from websites like Undraw.co and Icons8 to instill a sleek UI
Although we used Figma to create mockups, they served more as inspiration and our final product has some changes!
- A mobile-friendly, dynamic landing page that uses Bootstrap to mimic a Ramen-eating experience.
- Describe the context of the study
- Describe the context of the project
- An overview of how we plan on giving meaning to the data.
- Determine which countries have the most ramen
- Determine which countries have the highest rated ramen
- Which style has the highest rating?
- What style has the most mentions?
- What brand has the highest ratings?
- What brand has the most mentions?
- What style has the highest ratings?
Although our original project description had most common noodle flavor and top ramen of every year, we decided to remove those in exchange for frequency based graphs on brand information with rating and amount due to the fact that the data set had thousands of variations for flavors and there was no year information.
For the data page, we wanted to show majority of the graph data and make it easy for the viewer to read the data so we did not make the graph responsive when looking at smaller screens.
@nguyev12
- Convert the raw CSV data into usable JSON data to be processed with JavaScript.
- Responsible for the Vega-lite and graphical portion of interpreting the data.
@areetaw
- Design and create mockups for the website using Figma.
- Responsible for the HTML/CSS/Bootstrap portion of the project.
--Readme document for Vivian Nguyen/nguyev12/84955920 and Areeta Wong/areetaw/66943704--
- How many assignment points do you believe you completed (replace the *'s with your numbers)?
32/30
- 20/20 Requirements
- 5/5 Validity
- 5/5 Documentation
- 2/2 Bonus
- How long, in hours, did it take you to complete this assignment?
30 hours.
- What online resources did you consult when completing this assignment? (list sites like StackOverflow or specific URLs for tutorials, etc.)
- How to use Figma: https://www.figma.com/resources/learn-design/
- Figma 101: https://trydesignlab.com/figma-101-course/introduction-to-figma/
- Base template was generated from Assignment 1 and 2
- Getters/setters/constructors for each typescript class were auto-generated by a VSCode extension
- Data set used: https://www.kaggle.com/residentmario/ramen-ratings
- Illustrations:
- Centering a button: https://www.w3schools.com/howto/howto_css_center_button.asp
- HTML Rectangles: https://stackoverflow.com/questions/20690408/how-to-draw-a-rectangle-in-html-or-css
- Image on image: https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html
- Positioning: https://www.w3schools.com/css/css_positioning.asp
- BootStrap Cards: https://getbootstrap.com/docs/4.0/components/card/
- BootStrap Grid: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
- BootStrap Nav Bar: https://getbootstrap.com/docs/4.0/components/navbar/
- What classmates or other individuals did you consult as part of this assignment? What did you discuss?
N/A.
- Is there anything special we need to know in order to run your code?
No, but for your convenience, the site is hosted at https://nguyenvivian.github.io/inf133-final-project/ so you can easily view and share this project.
Our repository is located at https://github.com/nguyenvivian/inf133-final-project.