Create a version of the menu as you designed as you see fit, in order to get a hang on the project.
First, you should log in with google. (remember after putting email adress, you should replace the domain tiranaparty.vercel.app with localhost:3000 in order to login succesfully)
Create a new page named Menu.js.
Using getServerSideProps you you will get the token from the cookie and parse it like the example below:
`export async function getServerSideProps({ req }) {
//here we get the token from the request and assign it to variable
const { token } = parseCookies(req);
//here we make a normal fetch, you can use axios if you feal more comfortable
const res = await fetch(${API_URL}/businesses/me, {
method: "GET",
headers: {
//in this way you add token to the request, MUST DO
Authorization: Bearer ${token},
},
});
// here wait for the response
const events = await res.json();
// here we pass the results as below and you can accses them to your component as normal props.
// example below was taken from account/dashboard.js page, you can look there for more details.
return {
props: {
events,
token,
},
};
}`
/businesses/me => will get you the data for the bussines and all the needed information about the food.
REMEMBER if you try to console.log the data, they will be shown to the terminal not browser console because we are using serverside framework.
After getting the data you can do as you wish, use tailwind, or material ui or what do you want this is to build a first mockup and to practice the data fetch with our backend.
Create a version of the menu as you designed as you see fit, in order to get a hang on the project.
`export async function getServerSideProps({ req }) { //here we get the token from the request and assign it to variable const { token } = parseCookies(req);
//here we make a normal fetch, you can use axios if you feal more comfortable const res = await fetch(
${API_URL}/businesses/me, { method: "GET", headers: { //in this way you add token to the request, MUST DO Authorization:Bearer ${token}, }, }); // here wait for the response const events = await res.json();// here we pass the results as below and you can accses them to your component as normal props. // example below was taken from account/dashboard.js page, you can look there for more details. return { props: { events, token, }, }; }`
/businesses/me => will get you the data for the bussines and all the needed information about the food. REMEMBER if you try to console.log the data, they will be shown to the terminal not browser console because we are using serverside framework.
After getting the data you can do as you wish, use tailwind, or material ui or what do you want this is to build a first mockup and to practice the data fetch with our backend.