Skip to content

Refactor of front end project originally made with create-react-app and JavaScript ==> now using Next.js App Router, React Server Components, TypeScript, and Django (REST Framework) for the backend. View Django API here --> https://github.com/ryanmphill/gastro-django-server

Notifications You must be signed in to change notification settings

ryanmphill/gastro-gnome-next-client

Repository files navigation

Gastro Gnome

Gastro Gnome is an application intended for the true gastronomes where users can discover, collect, and share their favorite recipes using an intuitive UI. The application is built with Next.js app router, a Python/Django backend and interfaces with a third party API to display a nutrition profile for each recipe.

homepage

homepage-mobile

Getting Started

  1. Make sure you have Node.js and npm installed on your machine. Pull down the this (client side) repository and install dependencies.
npm install
  1. Pull down the server side repository

If cloning via SSH:

git clone git@github.com:ryanmphill/gastro-django-server.git
  1. In the server side directory, install necessary dependencies via pipenv and start the virtual environment:
pipenv shell
  1. Start up a local web server for the API. It should automatically listen on port 8000
python3 manage.py runserver
  1. If you want to use the Edamam API locally, you will need to create an account to get an id and key. Make a .env.local file in the root directory of the client side project, and add the following:
EDAMAM_ID = "<PASTE ID HERE>"
EDAMAM_KEY = "<PASTE KEY HERE>"
  1. If you simply want to demo the project, you can run and preview the build for the best performance. From the root directory of the client side project:
npm run build

Wait for the build to complete and then run:

npm start

Now you should be able to view the project on http://localhost:3000

Note: If you want to preview live changes while making edits to the project, you can run in development mode. Just know that route changes will take more time to load this way:

npm run dev

Deployed Project

🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧 Coming soon to gastro-gnome.com!

Screenshots

profile

profile-mobile

recipe

recipe-mobile

nutrition

nutrition-mobile

Additional Resources

About

Refactor of front end project originally made with create-react-app and JavaScript ==> now using Next.js App Router, React Server Components, TypeScript, and Django (REST Framework) for the backend. View Django API here --> https://github.com/ryanmphill/gastro-django-server

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published