Cooksphere

"Cooksphere creates a space where users can discover,
save or share recipes."

Recap

During this refactoring, we improved the project's structure and performance by updating key components located in the ./RecipeDetailsPage/

• RecipeDetailsPage.tsx,
• GeneralCard.tsx,
• Ingredients.tsx,
• Instructions.tsx
• Reviews.tsx

By simplifying these components, centralising logic.

Key Benefits

• Increased safety and clarity thanks to TypeScript.
• Cleaner and more maintainable code with centralised logic and route reorganisation.
• Better user experience with error handling and visual feedback.
• Ready to scale with a modular structure and robust typing.

Key Changes

1. Migration to TypeScript:

   • We migrated the project from JavaScript to TypeScript, adding type safety and improving code clarity.
   • Defined interfaces for key data structures (categories, recipes, users) in types.d.ts.
   • Added types to states and functions in App.tsx and other components.

2. Centralised Data Logic:

   • Created a custom hook called useFetchData to handle data fetching (categories, recipes, and user login).
   • This simplified App.tsx and centralised the fetching logic in one place.

3. Improved Route Organisation:

   • Moved all routes to a separate component called AppRoutes, allowing App.tsx to focus on global state and context management.

4. Authentication Handling with AuthContext:

   • Created an AuthContext to manage the authenticated user’s state and avoid "prop drilling".
   • Added default values and safe handling of null values using optional chaining (?.) and fallbacks.

5. Project Structure Improvements:

   • Reorganised files for better separation of concerns (e.g., moved AuthContext to a dedicated folder).
   • Gradually migrated components to TypeScript (e.g., Navbar.jsx to Navbar.tsx).

6. Refactoring of Key Components in components/RecipeDetailsPage:

   • RecipeDetailsPage.tsx: Simplified the component by breaking it into smaller, reusable parts.
   • GeneralCard.tsx: Improved reusability and type safety.
   • Ingredients.tsx: Enhanced readability and maintainability.
   • Instructions.tsx: Streamlined the logic and improved error handling.
   • Reviews.tsx: Added better validation and reusable logic for user reviews.# Cooksphere

Cooksphere creates a space where users can discover, save or share recipes.

Frontend

The frontend shows categories of recipes. The user can either look into those or search for recipes. Both the search result page and the category page show a list of recipes which can be filtered and sorted. On the recipe details page users see information about the recipe. At the bottom of the page are reviews of other users listed and a form to post a review and rate the recipe. In the profile are the user's favorite and uploaded recipes listed. Furthermore he can upload a recipe by filling the form. The frontend was built with React and TailwindCSS. Uploaded recipe images are sent to Cloudinary.

Assets like category images are taken from Unsplash and the profile avatar or logo are AI generated.

Start frontend

From within the client folder, install dependencies and start the frontend

npm install
npm run dev

Backend

The backend server was built with express. A MongoDB database with mongoose as an orm is used to store recipe and user data. Make sure to have a MongoDB instance running on mongodb://127.0.0.1:27017.

Fill database

To get initial recipe data I used TheMealDB API which is free of use for educational development purposes. To fill the database with initial recipes and the user who is logged in navigate to the server/scripts folder and execute

node seed.js

Start backend

From within the server folder, install dependencies and start the backend

npm install
npm run server

Once both the frontend and the backend are running open localhost:5173 in your browser. Have fun!

Known Issues and Next Todos

• User updates are not reflected immediately, so when adding a recipe as a favorite or uploading a new one, you have to refresh the browser page manually to fetch the updated user
• Form validation is not complete yet
• Authentication is missing (frontend and backend), you are currently logged in as one user (s. in App.jsx)
• Use env variables for PORTs, URLs etc
• Split router (backend) and apiclient (frontend) to multiple files to separate recipe and user related functions
• Create more common components like button or headings

Solo Project by

Legacy Project Team

:)