CoolSmoothies - RecipeHub

A modern recipe organiser web application for organizing and creating recipes and meal plans, built with React, Vite, Tailwind CSS, and Supabase.

Comment

Inspiration

The inspiration for our web app actually came from our team name, CoolSmoothies. We decided to go with a smoothie organiser app at first, but decided to extend it to a general recipes app.

What it does

Our recipe organiser app allows users to search for preexisting recipes that are already available on our website from Spoonacular API, as well as create, view, update and delete their own user-created recipes. We also have preferences features where users can select their preferences, and also a meal planning service using Google Calendar API, as well as a subscription service.

How we built it

  1. React: React is the core JavaScript library used to build the user interface of our web application. It enables the creation of reusable components, state management with hooks (like useState and useEffect), and efficient UI updates. All our pages and features (like the chatbot, recipe cards, and search) are built as React components.

  2. Node: Node.js is used for our backend server. It runs Express.js to handle API requests, connect to Supabase/PostgreSQL, and integrate with third-party APIs (like PayPal and RapidAPI). Node allows us to write server-side JavaScript for handling authentication, CRUD operations, and business logic.

  3. Vite: Vite is our frontend build tool and development server. It provides fast hot module reloading and efficient builds for our React app. We run our frontend locally with 'npm run dev' using Vite, which compiles our React code and serves it in development.

  4. Tailwind CSS: Tailwind CSS is a utility-first CSS framework used for styling our frontend. It allows us to rapidly build custom designs using utility classes directly in our JSX. This makes our UI consistent and easy to maintain.

  5. Supabase (PostgreSQL): Supabase is our backend-as-a-service platform, providing authentication and a PostgreSQL database. We used Supabase to store and retrieve user data, recipes and feedback, handle authentication (user sign-up, login, session management), and perform CRUD operations via Supabase’s client library in both frontend and backend code.

  6. React Router: React Router is used for client-side routing in our React app. It enables navigation between pages (e.g., /profile, /meal-planner, /admin/login, /feedback, /my-recipes) without full page reloads. We define routes in AppRoutes.jsx and use components for navigation.

  7. PostCSS: PostCSS is a tool for transforming CSS with JavaScript plugins. In our project, it processes our CSS files (including Tailwind’s utilities) before they are bundled, enabling features like nesting and custom syntax.

  8. Autoprefixer: Autoprefixer is a PostCSS plugin that automatically adds vendor prefixes to our CSS, ensuring compatibility across different browsers. It works behind the scenes as part of our build process.

  9. RapidAPI: RapidAPI is a marketplace for APIs. We use it to access third-party APIs (such as nutrition or food data) by subscribing to APIs and making HTTP requests from our backend or frontend. It simplifies API key management and usage.

  10. Google Calendar API: The Google Calendar API is used to integrate calendar features into our app. For example, users can add meal plans or events directly to their Google Calendar from our app. We authenticate users with Google and use the API to create, update, or delete calendar events.

  11. Spoonacular API: Spoonacular API provides recipe, ingredient, and nutrition data. We use it to search for recipes and ingredients, get recipe details, instructions, and suggestions and power features like autocomplete in our RecipeSearch.jsx and ingredient substitutions.

  12. PayPal API: The PayPal API is used to handle payments and subscriptions. We integrate PayPal’s subscription buttons in our frontend (SubscriptionPage.jsx) and use the PayPal REST API in our backend to create products and plans. This allows users to subscribe to premium features using PayPal.

Challenges we ran into

We kept meeting the daily limit of API calls for Spoonacular API, until we decided to use RapidAPI to help 'bypass' the limit by subscribing to their API plan for Spoonacular. We initially tried to use Stripe API for the payment for our subscription plan, but it didn't work until we used PayPal API. So generally, the issues we had were pertaining routing and APIs.

Accomplishments that we're proud of

  1. That we managed to get all our APIs working in the end
  2. How neatly our app turned out
  3. That we managed to finish almost all the features we had in mind at the start of the project
  4. Good team work and good team mates

What we learned

How to use APIs, routing, developing a web app from scratch

What's next for CoolSmoothies - RecipeHub

Firstly, we plan on deploying this and we plan on this being a community thing where users from all over the world can share recipes, and also link our web app with social media apps where they can share their recipes there too. We also plan on making this a mobile app that can be installed from the app store. We also plan on incorporating smart features like a more advanced LLM for our RecipeHub Chatbot Assistant, and also making our app available in more languages for global reach.

Built With

Share this project:

Updates