Recipe Management Client

This is a React-based frontend for the Recipe Management System, designed to work with a GraphQL API built with Spring Boot.

Features

• View all recipes with search and filter capabilities
• View detailed recipe information
• Add new recipes
• Delete recipes
• Responsive design using Material-UI

Installation

1. Clone this repository
2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

Project Structure

recipe-management-client/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── apollo.ts             # Apollo Client configuration
│   ├── App.tsx               # Main application component
│   ├── App.css               # Application styles
│   ├── index.tsx             # Entry point
│   ├── index.css             # Global styles
│   ├── components/           # React components
│   │   ├── RecipeList.tsx    # List of all recipes
│   │   ├── RecipeDetail.tsx  # Detailed view of a recipe
│   │   └── AddRecipe.tsx     # Form to add a new recipe
│   └── graphql/              # GraphQL queries and mutations
│       └── queries.ts        # All GraphQL operations
├── package.json
└── README.md

Dependencies

• React
• React Router
• Apollo Client
• GraphQL
• Material-UI

Backend Configuration

This frontend is designed to connect to a GraphQL API running at http://localhost:8080/graphql. Make sure your backend is running and accessible at this URL.

Available Scripts

• npm start: Runs the app in development mode
• npm test: Launches the test runner
• npm run build: Builds the app for production
• npm run eject: Ejects from Create React App configuration

Notes

• This project was bootstrapped with Create React App.
• The backend implementation details can be found in the corresponding Spring Boot project. recipemanagement