/camooflage-frontend

The front-end for the Camooflage non-dairy replacement app! Done with React JS, HTML, and fully custom CSS.

Primary LanguageJavaScript

Welcome to Camooflage!

This is Moo - Camooflage's logo and mascot, drawn and designed by me!

About Camooflage

Are you someone who is lactose intolerant and have just tried to ignore that it was a thing, but deep down know you should really give up dairy? Well this app is for you!

One of the main reasons it’s hard for people to give up dairy is because they don’t know what options there are out there for replacements. Especially nowadays, there are so many options to choose from, but there are also certain options better for certain culinary dairy needs.

Camooflage is a non-dairy replacement app. Think Pinterest, but for non-dairy milks, cheeses, ice cream, and more! It is designed to help users find non-dairy options to replace any dairy product that they need replacing for. If there's a dairy product you need a non-dairy replacement for, we can help you find it! This app is for those with allergies, lactose-intolerance, vegan lifestyles, plant-based diets, are looking to reduce their dairy consumption, or just want to know all about non-dairy options!

How Camooflage Came to Be

I have been vegan for over 12 years now. One of the hardest things for me to give up was dairy. So obviously, that meant I went searching for good vegan, non-dairy replacements for all of my old favorite dairy products. I tried about every vegan version of every dairy product I could find, and let's just say - some are a lot better than others.

You could imagine that in 12 years worth of time, I've tried a lot of non-dairy options. I don't necessarily claim to be an expert on which are the best (at least not yet!), but I definitely have strong opinions. Because of that, I've had a lot of friends and family over the past few years ask for which products I'd recommend if they wanted a non-dairy replacement. And to help explain all of my opinions for all of the different products and types, I created a Google doc outlining them. It's rather lengthy and wordy though (as it's essentially an essay about the pros and cons of various vegan cheeses), so I can't imagine that anyone actually wanted to read it.

When I got into software development and needed a project idea, the first thing that came to mind was that Google doc. I wanted to figure out a way to make the Google doc into something a little more fun and give it a more user-friendly format for people to utilize (instead of people having to read paragraphs on why I will forever love Daiya cheese even though there are much better options out there nowadays and so they should at least give it a chance). And thus Camooflage was a born!

Signing Up

If you don't have a log-in for our site, you can directly sign up right from the main page! You'll be prompted to create a username, password, and give us some information about yourself.

New users will also be prompted to choose their favorite flavor between chocolate, vanilla, and strawberry. This choice will determine what color, or rather what flavor, Moo avatar their user profile will have (and don't worry - you'll have the option to change the flavor later too!).

After a new user has successfully created a new account, they can log right in to the app and get started!

Main Non-Dairy Product Feed

The home page main feed displays all of the non-dairy products currently in the Camooflage database (which can be found here). Currently the app includes various non-dairy milks, cheeses, and ice cream, but is constantly being updated to include new products, including non-dairy yogurts, sour creams, butters, etc. The database has been curated by yours truly, so if there's an option you want to see included that's not on there - just let me know!

Users can browse all the various options in the database, filter based on allergens, brands, and/or product categories, or they can search for a specific item.

From there, they can click on an individual item to get more information about it, including allergen information, product description, a picture of the product, a link on where to buy the product, and a personalized product recommendation (written by me!).

Each item on the main feed can be added directly to a user's board(s). Each user is given a default board to start so that users can start saving non-dairy options right away! And, once a non-dairy option has been added to a board, that option can be "favorited" and will show up on the user's profile page!

Boards

To be able to save specific non-dairy options to more easily view later, users can create multiple boards that they can "pin" different options to.

Boards can be given a name and description, and users can search for specific boards of theirs by using the search bar in the navigation bar at the top of the page.

Boards can be created for any reason a user might want, and are included in order to help users sort and group their favorite non-dairy options to view at later times - perfect for meal prepping and grocery list planning.

User Profile Page

The profile page is where a user can see an overview of their account's information - personal information, their Moo avatar color/flavor choice, a list of all the user's current boards, and a list of the user's favorited non-dairy products.

If any of the user's personal information needs to be updated, this can be done within the profile page.

Future Features

As the non-dairy option database continues to be filled out, one of the main features to be implemented later on is a Recipe Planning aspect. The intent will be for users to create recipe cards to keep track of their favorite recipes, but also be able to link them to the non-dairy options that they now want to include! Users will be able to upload or manually import recipes, and then edit the reipce as needed for the non-dairy options they want to replace. Additionally, similarly to the Boards, users will be able to "pin" various non-dairy options to the recipe so that they can easily view that info.

App Demos

Check out a working demo of the app on Netlify here!

Check out a video demo of the app here!

Follow me on Instagram for more non-dairy recommendations

I mostly review vegan ice cream, but also try to do a lot of baking for vegan baked goods too!

You can find me here!