Skip to content

So-yummy app - Frontend: React, React Router, Redux, Redux-toolkit, Axios, Styled-components, React-use, Formik, Yup

Notifications You must be signed in to change notification settings

lisitsyna-anna/so-yummy-frontend

 
 

Repository files navigation

So-yummy So-yummy App - Your Ultimate Cooking Companion

So-yummy is a feature-rich single-page application (SPA) designed to enhance your culinary experience. Whether you're searching for mouthwatering recipes or looking to create your own culinary masterpieces, So-yummy is here to assist you every step of the way. With a wide range of functionalities and a user-friendly interface, cooking has never been more enjoyable!

Tech Stack

  1. Frontend: React, React Router, Redux, Redux Toolkit, Redux Persist, Axios, Styled-Components, Formik, Yup, React-icons, React-Toastify, React-use, React-spinners, i18next, i18next-browser-languagedetector, i18next-http-backend
  2. Backend: Node.js, Express.js, Mongoose, Multer, Joi, Jsonwebtoken, Bcryptjs,Nodemailer, Cross-env, Cloudinary

Features

  1. Responsive Design: The website is designed to be responsive and user-friendly, starting from a minimum width of 375px. It follows a mobile-first approach, ensuring a seamless experience across different devices.

  2. Registration and Login: Users have the option to register and login to their accounts. They can also choose to authenticate using their Google account, providing convenience and flexibility.

  3. Multilingual Support: The website is available in two languages, English and Ukrainian. While the static content is translated, data fetched from the backend is available only in English.

  4. Dark and Light Themes: Users can switch between dark and light themes according to their preference. This feature offers a personalized visual experience and enhances usability in different lighting conditions.

  5. Recipe Search: Users can easily search for recipes using keywords, such as recipe title or ingredient. The search functionality provides quick and relevant results, making it convenient to find specific recipes.

  6. Recipe Categories: The website offers various recipe categories, allowing users to explore recipes based on their preferences. This categorization simplifies the browsing process and helps users discover new recipes.

  7. Favorites: Users can mark recipes as favorites and easily access them later. They can view detailed information about each recipe, including ingredients and cooking instructions, making it convenient to follow along while preparing the dish.

  8. Shopping List: The website provides a feature to create a shopping list based on selected recipes. Users can compile a list of ingredients needed for their chosen recipes, ensuring a seamless and organized shopping experience.

  9. User-Added Recipes: Users have the ability to contribute their own recipes to the platform. The website offers a user-friendly form for adding recipes, allowing individuals to share their culinary creations with the community.

  10. Popular Recipes: The website showcases popular recipes based on the number of users who have added them to their favorites. This feature highlights trending and well-loved recipes, enabling users to explore popular culinary choices.

  11. Pagination: The website incorporates pagination to improve navigation and enhance the browsing experience. When browsing through recipe categories or search results, users can easily navigate through multiple pages of content, ensuring a smooth and organized exploration of the recipe collection.

Local launch of the program on your device

To install and run the So-yummy App locally, follow these steps:

  1. Clone the repository: git clone [https://github.com/lisitsyna-anna/so-yummy-frontend]
  2. Navigate to the project directory: cd so-yummy-frontend
  3. Install dependencies: npm install
  4. Start the development server: npm start
  5. Open the app in your browser at http://localhost:3000

Backend

Swagger documentation

https://so-yummy-98ev.onrender.com/api-docs/.

Developers

The development of this project was led by:

Contact Information

If you have any questions or feedback, please feel free to contact me: