Grocery Grid

Welcome to Grocery Grid—your one-stop solution to meal planning and grocery shopping. Easily log in, add your favorite meals, plan your weekly menu, and generate a shopping list with the ingredients you need. Say goodbye to last-minute store runs!

Features

• User Authentication: Secure login and signup.
• Meal Management: Add, edit, and manage your favorite meals.
• Weekly Meal Planning: Plan your meals for the week.
• Smart Shopping List: Generate a shopping list based on your meal plan.

graph TD
    A[User] -->|Interacts<br>with UI| B[Home Page Frontend]
    B -->|POST login/signup| C[User REST API]
    C --> D{Authentication}
    D -->|Invalid User| F[Error Message]
    D -->|Valid User| E[JWT Token Generated]

    E -->|Token Sent| B


    B -->|CRUD meal data| G[Meal REST API]
    G --> H[(MongoDB)]

    B -- Meal plan --> M[localStroage Web API]
    M -- /plan --> N[(LocalStorage)]
    N --> P[Meal Planning Page<br>Frontend]

    B -->|Grocery list| K[localStorage Web API]
    K --> L[(LocalStorage)]

    H --> O[User Dashboard: Show<br>Updated Meal Plan]
    L --> O

    O -->|Display updated data| B

Loading

Tech Stack

This project is built with the MERN stack:

• MongoDB: For the database.
• Express.js: For the backend API.
• React: For the frontend.
• Node.js: For server-side logic.

Getting Started

Ready to get your own Grocery Grid up and running? Follow these steps:

1. Clone the Repository

First things first—grab a copy of the project:

git clone https://github.com/your-username/grocery-grid.git

2. Navigate to the Project Directory

Once you have the repo cloned, move into the project directory:

cd grocery-grid

3. Install Dependencies

In the root directory, run npm install:

npm install

4. Set Up Your Environment Variables

Once the appropriate dependencies are installed, navigate to server/config/connection.js to set up your MongoDB variables

5. Seed the Database

If you'd like to start with some sample data, you can seed the database with initial users and meals.

1. Navigate to the server directory:

   cd server

2. Run the seed script:

   npm seed

6. Run the Application

Run npm start in the root directory:

npm start

7. Using the Application

Once everything is up and running, you can start using the application:

1. Login/Signup: Access the login or signup page from the home page.
2. Add Meals: After logging in, navigate to the meals page to add and manage your favorite meals.
3. Plan Your Week: Use the meal planning feature to select meals for each day of the week.
4. Generate Shopping List: Automatically create a shopping list based on your meal plan.
5. Edit Meals and Lists: Make changes to your meals and shopping lists as needed.

8. Stopping the Application

To stop the server and client, you can use Ctrl + C in the terminal where they are running.

9. Additional Notes

• Make sure MongoDB is running locally or in your preferred environment before starting the server.
• If you make changes to the code, restart the server and client to see them reflected.

Contributing

Got a cool idea for a feature? Found a bug? Contributions are more than welcome! Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Citing Sources

We used some amazing SVG illustrations for the favicon and signup/login pages. These were generously provided under the CC0 license from the Figma Community

A Special Thanks

We'd like to extend our gratitude to the creator of the amazing SVG illustrations:

mariako.truestory@gmail.com

Learn More

To learn more about the CC0 license, you can read more here.