Flavortown Food Battle banner

Flavortown Food Battle

Created by: ChiChi
4 devlogs
6h 13m 34s

Flavortown Food Battle is a web app where users can create and submit their own food ideas, vote on other people's creations, and compete for a place on the leaderboard. Users can enter a dish name, description, and category, then the app displays…

Flavortown Food Battle is a web app where users can create and submit their own food ideas, vote on other people’s creations, and compete for a place on the leaderboard. Users can enter a dish name, description, and category, then the app displays each submission as a food card. Other users can upvote or downvote the food ideas, and each dish receives a score based on its votes. The highest-rated dishes are ranked on a leaderboard, making the app feel like a fun food competition where the best creations rise to the top.

This project uses AI

This project unfortunately does use AI for debugging and many fixes since I am really bad at Javascript, however most of the time the code are based upon me and all the server and deployment are done by me

Demo Repository

README

Loading README...
ChiChi
ChiChi shipped Flavortown Food Battle
about 7 hours ago

Shipped this project!

I built Flavortown Food Battle, a live community food-voting web app where users can submit dish ideas, vote on them, comment on them, and compete on a leaderboard. I started with a very simple React/Vite prototype, but gradually expanded it into a more complete app with Firebase Firestore, anonymous authentication, live database updates, category filtering, a top-three podium, comment sections and various stuff

The hardest part was connecting the frontend to Firebase properly and making the app work like a real shared website rather than just a local prototype. I had to handle user identity, environment variables, and deployment issues. I also had to change my moderation approach when the Perspective API became too awkward to set up, so I replaced it with a simpler banned-word filter that works reliably for the prototype.

I am most proud that the app feels complete and usable. Other people can open the live website, submit food ideas, vote, comment, and see the leaderboard update. It also has practical moderation features, such as admin deletion and basic language filtering, so it feels more like a real community platform than just a small demo.

ChiChi
ChiChi worked on Flavortown Food Battle
about 9 hours ago
1h 10m logged

what’s new???

dish comment system

added a comment section under each food card so users can leave short reactions or feedback on dishes
comments are saved with each dish in Firebase, which means they stay visible after refreshing and can be seen by other users on the live website

comment input and display

each dish now has a comment input box and a post button
users can write short comments up to 100 characters, making the app feel more interactive and community-focused instead of only being a voting leaderboard

admin comment moderation

added admin controls for comments so inappropriate comments can be deleted directly from the food card
this improves moderation because the admin can manage content from the app interface instead of manually editing the Firebase database

basic banned-word filter

replaced the external Perspective API moderation system with a simple built-in banned-word filter
this makes the project easier to deploy because it no longer depends on a separate API key, while still blocking inappropriate language before it is saved

post and comment moderation

the banned-word filter now checks both dish submissions and comments
if inappropriate language is detected, the app blocks the submission and shows an alert to the user

comment visibility fix

improved the comment styling so posted comments, empty comment text, and typed comment input text are easier to read
the comment text is now darker, which makes the comment section clearer and more usable

bi-parrot-2

Changelog

Attachment
0
ChiChi
ChiChi worked on Flavortown Food Battle
about 10 hours ago
1h 43m logged

whats’s new???

Vercel deployment

deployed Flavortown Food Battle using Vercel so the app can stay online without needing to run from my own computer
connected the GitHub repository to Vercel, which means the website automatically rebuilds and updates whenever I push new commits

live public website

the project now has a real public website link that other people can open and use
this makes the app feel much more complete because users can submit dishes and vote from their own devices instead of only testing it locally

environment variables on Vercel

added the Firebase and app environment variables into Vercel so the deployed version can connect to the correct Firebase project
this allows the live site to use Firestore, anonymous authentication, admin mode, and the moderation API without hardcoding the values directly into the source code

Firebase hosting compatibility

checked the live deployment with Firebase so the app can still load dishes, submit new dishes, update votes, and display the leaderboard correctly
this confirms that the database features work outside of the local development environment

deployment settings

used the Vite preset on Vercel and kept the default build settings, including the build command, install command, and output directory
this made the deployment process simpler because Vercel could automatically detect the correct setup for the React/Vite app
yayayayayay-67-spedup

Changelog

Attachment
0
ChiChi
ChiChi worked on Flavortown Food Battle
about 12 hours ago
1h 56m logged

what’s new???

Firebase database system

connected Flavortown Food Battle to Firebase Firestore, so food ideas are now stored online instead of only inside the browser. The app uses a live database listener, so the feed updates automatically whenever the database changes.

online dish submission

updated the submit system so new dishes are saved to Firestore with a name, description, category, vote counts, and creation time. After submitting, the form clears automatically so users can add another dish quickly.

live voting system

changed the upvote and downvote buttons so votes are saved online using Firebase. When a user votes, the database updates and the app refreshes the score in real time.

leaderboard upgrade

the leaderboard now ranks dishes using shared Firebase data instead of temporary local data. Scores are calculated using upvotes minus downvotes, so the highest-rated dishes move to the top automatically.

new visual design

added a food banner image, a cleaner hero section, the Fredoka font, rounded cards, category pills, hover effects, and a three-column layout. This makes the app feel more polished and more like a finished food-voting web app.

loading and empty states

added messages for when dishes are loading, when the feed is empty, and when the leaderboard has no dishes yet. This stops the app from looking broken while waiting for data or when there are no submissions.

yay-anya

Changelog

Attachment
0
ChiChi
ChiChi worked on Flavortown Food Battle
about 14 hours ago
1h 22m logged

what’s new???

first working prototype

built the first version of Flavortown Food Battle as a React/Vite web app
the app now has a complete basic layout with a title, description, food submission area, food feed, and leaderboard
this gives the project a proper usable structure instead of just being an empty starter page

food submission system

added a form that lets users create their own food ideas by entering a food name, description, and category
when the form is submitted, the new food is added directly to the food feed
also added simple validation so empty food names or descriptions cannot be submitted

voting system

added upvote and downvote buttons to each food card
when a user votes, the vote count updates immediately on the page
each food now has a score calculated from its votes, using upvotes minus downvotes

leaderboard system

added a leaderboard that ranks all food submissions by their score
the leaderboard updates automatically when users vote, so the highest-rated food ideas move to the top
this makes the app feel more like a proper food competition instead of just a list of submissions

basic visual design

added a warm food-themed colour scheme with cream and orange tones
used card-style panels, rounded corners, shadows, and spacing to make the app feel more polished
the layout is split into Create a Food, Food Feed, and Leaderboard sections so users can understand the app quickly

GitHub setup

connected the local project folder to the existing GitHub repository
pushed the first working version to the main branch

Changelog

Attachment
0