Fullstack recipes app built using TypeScript, Next 13, Next Auth, TailwindCSS, GraphQL, Prisma, Apollo Client, Apollo Server

This is a Full Stack Project built using TypeScript, Next 13, Next Auth, Apollo-Client, TailwindCSS in frontend and using GraphQL, Apollo-Server, Prisma & MySQL in backend.

The project is a "social network" of recipes, you can see the profile of other users and also their recipes, you can comment on recipes, create and delete your recipes and also search for recipes.

You can take a look at the project here.

Table of contents

• Project walk-through

  • Home

  • Recipe

  • Create recipe

  • Account

  • Profile

  • Search

  • Results

  • Discover

  • Category

• Technologies used

Project walk-through

Home

On this page we can see 4 categories of recipes "Breakfast", "Lunch", "Salad", "Dinner". A very important component for the application is the "RecipeCard" it is rendered several times on the home page, it is responsible for displaying the title, the recipe image and directing the user to the respective recipe page.

Recipe

image 1

image 2

This page is where we can see the recipe author and the recipe details, such as the image and how to make it. We can also see the comments that this recipe has received and we can also leave a comment.

Create recipe

image 1

image 2

Here is where you create a recipe. You can only access this page if you are logged in. To create your recipe, you need to first give it a title and then provide the URL of the image you want to appear as the image of your recipe. After that, you write your recipe using markdown language. It needs to be written in this language so that the recipe is displayed in a beautiful HTML format instead of plain text. Finally, you choose which categories your recipe belongs to and create it by clicking on the "create" button.

Account

This page shows your account and your recipes. You can delete any recipe or log out of your account.

Profile

This page looks like the account page, but it's actually how a user views the profile of another user. They can see the account and all the recipes of that user.

Search

This component is responsible for taking the typed recipe and passing it to the "results" page.

Results

This page takes the typed recipe from the URL and searches for corresponding recipes to display. It displays all of them, but in this case, only one was found.

Discover

closed

open

"Discover" is a dropdown menu that displays several categories. When you click on one, you will be taken to the "category" page, which will display recipes from the category you chose.

Category

This page retrieves the category from the URL and displays the recipes that match that category.

Technologies used

I have built this project using the following technologies:

• React
• TypeScript
• NextJS 13
• Next Auth
• TailwindCSS
• Class Variance Authority
• Clsx
• GraphQL
• Apollo Client
• Prisma
• Apollo Server
• Date fns
• NodeJS