https://github.com/keyyuwan/recp

Explore dishes from around the world and register your own recipes.
https://github.com/keyyuwan/recp

axios nextjs nodejs reactjs recipes sqlite styled-components typeorm typescript

Last synced: 9 days ago
JSON representation

Explore dishes from around the world and register your own recipes.

• Host: GitHub
• URL: https://github.com/keyyuwan/recp
• Owner: keyyuwan
• Created: 2022-04-19T03:21:41.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-04-20T00:48:10.000Z (over 2 years ago)
• Last Synced: 2023-03-05T03:36:42.877Z (over 1 year ago)
• Topics: axios, nextjs, nodejs, reactjs, recipes, sqlite, styled-components, typeorm, typescript
• Language: TypeScript
• Homepage:
• Size: 4.87 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
RECP


Recp is a project where you can explore dishes from various countries and learn how to cook them. Also, you can register your own recipes and authenticate with Google.




# 🎥 Overview:

![Landing Page and Authentication](./.github/docs/assets/auth-landing.gif)

![Recipes](./.github/docs/assets/recipes.gif)

![Create Recipe](./.github/docs/assets/create-recipe.gif)

# 🖥️ The project:

Recp is a dish explorer with various recipes from various contries. You can also register your own recipe from your own country.

### Functionalities:

- List all recipes;

- View each recipe;

- Social auth with Google;

- Create recipe;

- List all recipes from a specific country;

- List all recipes from a specific user;

- Server-side routes protection if a page can only be accessed by the authenticated user;

- Feedbacks with Toasts.

### What I learned and improved when developing this project:

- Improved my skills about Uncontrolled Components when developing forms;

- Improved my knowledge about SSR (Server-side rendering) and SSG (Static site generation);

- Learned how to make an app with Social Authentication using Next Auth;

- Learned more about dynamic routes in Next.js

# 👨‍💻 Technologies:

### • ReactJS

### • TypeScript

### • Next.js

### • Next Auth

### • Styled Components

### • Axios

### • React Hook Form