MealPreppers

Demo

live demo of app - https://mealpreps.netlify.app/

Demo app login details:

Username: TestApp

Password: Testing123

Description

MealPreppers is a social media platform for food enthusiasts to share their meal prep ideas, recipes, and tips. Users can create posts, upload images, and connect with others who share their passion for meal prepping. The app offers an interactive and engaging way to discover new recipes, track meal costs, and estimate cooking times.

Features

• Rich Text Editor: Users can format their recipes with headings, lists, links, and more.

• Image Upload: Upload images to visually showcase your meal preps.

• Like and Follow System: Interact with other users by liking their posts and following their profiles.

• Comment Section: Engage with other users by commenting on their posts.

• Profile Page: Customize your profile with a profile picture and track your followers.

• Explore Page: Discover new recipes from other users in the community.

Technologies Used

• React

• JavaScript

• Node.js & Express

• MongoDB

• Cloudinary

• CSS

Lessons Learned

During the development of this app, several key concepts were reinforced and new skills were acquired:

• Full-Stack Development: Building a complete application from frontend to backend.

• RESTful API Design: Creating and consuming APIs to manage data flow between frontend and backend.

• State Management & Hooks in React: Efficiently managing state and side effects across various components.

• User Authentication: Securing routes and data with JWT-based authentication.

• Form Handling: Managing file uploads and form submissions in React.

• CSS Grid Layout: Implementing complex layouts with CSS Grid for better user experience.

Future Improvements

While the app is functional, there are several areas that could be enhanced:

-Add sorting functionality of meals (ex - sort by breakfast, lunch, dinner. food types - chicken, vegan, etc.)

• Mobile Optimization: Improve the app's responsiveness for a seamless experience on mobile devices.

• Accessibility: Enhance the app’s accessibility for users with disabilities.

• Improved Notifications: Add real-time notifications for likes, comments, and follows.

• Dark Mode: Implement a dark mode for better user experience during night time usage.

Installation

To set up this project locally for development or testing, follow these steps:

1. Clone the Repository: Begin by cloning this repository to your local machine:

   git clone https://github.com/your-username/meal-preppers-app.git
   
   

2. Install Dependencies: Navigate to the project folder and install the required dependencies using npm for both the frontend & backend:

   cd backend & cd frontend

   
   npm install
   
   

3. Set Up Environment Variables: Create a .env file in the root of the project and add necessary environment variables such as MongoDB URI, JWT secret, and Cloudinary credentials.

4. Run the Development Server: Run the Development Server: Start the development server to preview the app locally. It will be accessible at http://localhost:3000.

• backend
  • npm start
• frontend
  • npm run dev

6. Open in Browser: Open your web browser and go to http://localhost:3006 to view the website.