Matcha Brewer - CS50 Fair 2025 at Harvard
Key Takeaways
The Matcha Brewer project, developed by Sophia, a member of the class of 2029, is a web application that allows users to log and simulate their matcha creations, complete with a whisking simulation and a task system to try matcha drinks around Harvard and beyond, utilizing HTML, SQL, and JavaScript.
Full Transcript
Hi, I'm here with Sophia, a member of the class of 29 in the here to talk about her project, Matcha Brewers. So, Sophia, can you just tell me a little bit about your project? >> Yeah, so my project is just for the matcha fans on campus. Um, this is just the homepage and it's essentially where people can log in their matcha creations. They can simulate whisking their drinks and they can complete a bunch of tasks to try matcha all around Harvard and beyond. That's so cool. Can we see a little bit of your project in action? Yeah. So, um, first the homepage, you're able to change the profile picture from these photos. So, if I were to change it to this one, I just press save changes and it'll change. And then these are the stats of a user. Over here is like a little matcha tracker where you can input your new creation. So, if I were to do one really quickly, like I would input a matcha latte um using this brand name and let's say my drink base is milk with whole milk and I want the card to be green. I press log creation. It'll appear over here. So, these are a bunch of creations that people have logged throughout the fair. You can edit, delete, or whisk it. And then whisking it gives you this little whisking simulation where if you stop it in the center, I did really poorly, but you try to stop it in the center, you can redo or save the score onto the card. And finally, over here, it's called Masha Missions where you're tasked to go to these places and try a drink. So, it ranges in difficulty based on how far the place is. And to start it, you just rate the drink, share your comments, and post. And then your stats should be updated over here on your homepage. Yeah, that is so cool. Uh, what inspired you to make a mantra related game? And like what was something a little unexpected that you came um that you encountered while through your implementation? >> Well, I'm a really really huge fan of matcha. So, I've been trying the matcha all around. And um for this whisking station, I was kind of inspired by the Papa's Freezeria game. And I really wanted to do a simulation thing where people could like interact with the drinks they log in. And I found something that was a little unexpectedly challenging is I have a lot of buttons to like stop the list, save it onto the cards, edit the buttons. And I didn't realize how like every time I added a new button, I would have to change so many things cuz everything is interconnected. So like my SQL databases, um all the HTML files, etc. Yeah. Yeah. Well, incredible, incredible project. We loved hearing about it. Um and this was CS50.
Original Description
***
This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming.
***
HOW TO SUBSCRIBE
http://www.youtube.com/subscription_center?add_user=cs50tv
HOW TO TAKE CS50
edX: https://cs50.edx.org/
Harvard Extension School: https://cs50.harvard.edu/extension
Harvard Summer School: https://cs50.harvard.edu/summer
OpenCourseWare: https://cs50.harvard.edu/x
HOW TO JOIN CS50 COMMUNITIES
Bluesky: https://bsky.app/profile/cs50.harvard.edu
Discord: https://discord.gg/cs50
Ed: https://cs50.edx.org/ed
Facebook Group: https://www.facebook.com/groups/cs50/
Faceboook Page: https://www.facebook.com/cs50/
GitHub: https://github.com/cs50
Gitter: https://gitter.im/cs50/x
Instagram: https://instagram.com/cs50
LinkedIn Group: https://www.linkedin.com/groups/7437240/
LinkedIn Page: https://www.linkedin.com/school/cs50/
Medium: https://cs50.medium.com/
Quora: https://www.quora.com/topic/CS50
Reddit: https://www.reddit.com/r/cs50/
Slack: https://cs50.edx.org/slack
Snapchat: https://www.snapchat.com/add/cs50
SoundCloud: https://soundcloud.com/cs50
Stack Exchange: https://cs50.stackexchange.com/
Telegram: https://t.me/cs50x
Threads: https://www.threads.net/@cs50
TikTok: https://www.tiktok.com/@cs50
Twitter: https://twitter.com/cs50
Twitter Community: https://twitter.com/i/communities/1722308663522594923
YouTube: http://www.youtube.com/cs50
HOW TO FOLLOW DAVID J. MALAN
Facebook: https://www.facebook.com/dmalan
GitHub: https://github.com/dmalan
Instagram: https://www.instagram.com/davidjmalan/
LinkedIn: https://www.linkedin.com/in/malan/
Quora: https://www.quora.com/profile/David-J-Malan
Threads: https://www.threads.net/@davidjmalan
TikTok: https://www.tiktok.com/@davidjmalan
Twitter: https://twitter.com/davidjmalan
***
CS50 SHOP
https://cs50.harvardshop.com/
***
LICENSE
CC BY-NC-SA 4.0
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License
https://creativecommons.org/licenses/by-nc-sa/
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from CS50 · CS50 · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Hello, World: Hadi Partovi
CS50
Content Distribution and Archival in a Digital Age
CS50
CS50 2014 - Week 1
CS50
CS50 2014 - Week 3
CS50
CS50 2014 - Week 0, continued
CS50
CS50 2014 - Week 4
CS50
Week 3, continued
CS50
Quiz 0 Review
CS50
CS50 2014 - Week 3, continued
CS50
CS50 2014 - Week 7
CS50
CS50 2014 - Week 7, continued
CS50
Breaking Through The (Google) Glass Ceiling by Christopher Bartholomew
CS50
Introduction to Amazon Web Services by Leo Zhadanovsky
CS50
CS50 2014 - Week 9
CS50
How to Build Innovative Technologies by Abby Fichtner
CS50
Light Your World (with Hue Bulbs) by Dan Bradley
CS50
Building Dynamic Web Apps with Laravel by Eric Ouyang
CS50
CS50 2014 - CS50 Lecture by Steve Ballmer
CS50
CS50 2014 - Week 10
CS50
This is CS50 with Steve Ballmer?
CS50
Meteor: a better way to build apps by Roger Zurawicki
CS50
Data Analysis in R by Dustin Tran
CS50
Data Visualization and D3 by David Chouinard
CS50
CS50 2014 - Week 6
CS50
Build Tomorrow's Library by Jeffrey Licht
CS50
CS50 2014 - Week 9, continued
CS50
Essential Scale-Out Computing by James Cuff
CS50
iOS App Development with Swift by Dan Armendariz
CS50
Sam Clark Leads Yale Students on Tour to CS50 at Harvard
CS50
3D Modeling and Manufacture by Ansel Duff
CS50
CS50 2014 - Week 5, continued
CS50
hello, world
CS50
CS50 2014 - Deep Thoughts - Hash Table
CS50
CS50 2014 - Deep Thoughts - Binary Tree
CS50
CS50 2014 - Deep Thoughts - Scratch
CS50
CS50 2014 - Deep Thoughts - MySQL
CS50
LaunchCode Visits CS50
CS50
CS50 Live, Episode 100
CS50
CS50 Field Trip to Google
CS50
This is CS50 AP
CS50
Week 4: Monday - CS50 2011 - Harvard University
CS50
Week 2: Wednesday - CS50 2011 - Harvard University
CS50
Week 1: Wednesday - CS50 2011 - Harvard University
CS50
Week 11: Monday - CS50 2011 - Harvard University
CS50
Week 3: Wednesday - CS50 2011 - Harvard University
CS50
Week 12: Monday - CS50 2011 - Harvard University
CS50
Week 1: Friday - CS50 2011 - Harvard University
CS50
Week 3: Monday - CS50 2011 - Harvard University
CS50
Week 10: Wednesday - CS50 2011 - Harvard University
CS50
Week 2: Monday - CS50 2011 - Harvard University
CS50
Week 9: Monday - CS50 2011 - Harvard University
CS50
Week 7: Monday - CS50 2011 - Harvard University
CS50
Week 5: Monday - CS50 2011 - Harvard University
CS50
Week 5: Wednesday - CS50 2011 - Harvard University
CS50
Week 7: Wednesday - CS50 2011 - Harvard University
CS50
Week 8: Monday - CS50 2011 - Harvard University
CS50
Week 9: Wednesday - CS50 2011 - Harvard University
CS50
Week 8: Wednesday - CS50 2011 - Harvard University
CS50
Week 10: Monday - CS50 2011 - Harvard University
CS50
Week 2: Wednesday - CS50 2010 - Harvard University
CS50
More on: AI Pair Programming
View skill →Related Reads
📰
📰
📰
📰
I Stopped Using Multiple If Statements After Discovering This Python Pattern
Medium · Programming
The Biggest Mistake Vibe Coders Make With AI
Medium · AI
The Biggest Mistake Vibe Coders Make With AI
Medium · ChatGPT
I'll Build You a Custom AI Prompt System for Free (First 3 Founders Only)
Dev.to AI
🎓
Tutor Explanation
DeepCamp AI