Meals Project is a Next.js application for discovering, sharing, and exploring meal recipes. With features like browsing meals, viewing detailed recipes, and submitting new dishes, it offers a user-friendly experience, built with React, and integrated with AWS S3 for image storage, it also leverages a SQLite database for managing meal data.
Welcome to the Meals Project! This application allows users to browse, share, and explore a variety of meal recipes. Built with Next.js, React, and CSS modules, it integrates with AWS S3 for image storage and uses a SQLite database to manage meal data.
Clone the repository:
git clone https://github.com/your-username/meals-project.git
cd meals-project
Install dependencies:
npm install
# or
yarn install
Configure environment variables:
Create a .env
file in the root directory and add the following:
SERVER_IMAGE_URL=https://
NAME=your-name
ACCESS_KEY_ID=your-access-key-id
SECRET_ACCESS_KEY=your-secret-access-key
Initialize the Supabase database:
node initdb.js
Start the development server:
npm run dev
# or
yarn dev
Navigate to http://localhost:3000
to view the application.
/app
: Contains the main application layout and routing.
page.js
: Home page and other top-level routes.meals/page.js
: Meals list page.meals/[mealsSlug]/page.js
: Meal detail page.meals/share/page.js
: Share meal page.meals/[mealsSlug]/not-found.js
: Custom 404 page for meals.meals/share/error.js
: Error page for meal sharing.community/page.js
: Community page./components
: Reusable components used throughout the application.
main-header.js
: Main header component with navigation.nav-link.js
: Navigation link component with active state handling.image-picker.js
: Component for picking and previewing images.meals-form-submit.js
: Submit button for meal forms.meals-grid.js
: Grid display for meal items.meals-item.js
: Item display for individual meals.images-slide-show.js
: Slideshow component for images./lib
: Utility functions and API calls.
meals/meals.js
: Functions to fetch and manage meal data.actions/actions.js
: Functions for form handling and meal sharing./public
: Static files such as images.
/styles
: Global and component-specific CSS styles.
initdb.js
: Script to initialize the Supabase database with dummy data.
Ensure you have the following environment variables set in your .env
file:
SERVER_IMAGE_URL=https://
NAME=your-name
ACCESS_KEY_ID=your-access-key-id
SECRET_ACCESS_KEY=your-secret-access-key
MainHeader
The header component of the application, including navigation links.
NavLink
A navigation link component with active link styling.
ImagePicker
Component for selecting and previewing images.
MealsItem
Displays a single meal item with details and a link to view more.
MealsGrid
Displays a grid of meal items.
ImageSlideShow
Displays a slideshow of images.
MealsFormSubmit
Submit button for forms with a pending state.
This project is licensed under the MIT License - see the LICENSE file for details.
Here is an expected gif of the preview of the App(Meals Foodie App)
This is a Next.js project bootstrapped with create-next-app
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.