Question: Create a User Dashboard like SignIn & SignUp

Technical Questions Shopify
1

@manish-sharma, I have a question for you. For us to create an account page, do we need to fetch the data to display on the account page where users can log in and sign up?

Because I have not created that page yet. I’m thinking about this process and want to make sure I’m not overthinking it.

http://localhost:3000/account - This is our account page that we having trouble trying to link and add a form element on the page.

This what we trying to do: https://www.eyebuydirect.com/passport

What I’m considering is whether to fetch the account data and build out the page where people can log in or sign up, or if it’s sufficient for him to design the layout first, and then I can add the form elements that will handle the sign-in and sign-up actions.

Right now, I feel like I might be overthinking the whole process of building an e-commerce site. It doesn’t seem that complicated, and I want to make sure I’m on the right track. Is it possible to fetch the account data for both sign-in and sign-up?

I just want to ensure that the account page is linked, so I can start creating the form for sign-in and sign-up, and then move on to making sure everything is connected.

This way, after logging in, users can navigate to their dashboard or something similar. Does this explanation make sense to you?"

2

Question for you again: @manish-sharma

  • How can one begin to look at building the User Dashboard in smaller, more manageable steps to make it easier to understand?
 const [accountPageData, setAccountPageData] = useState<shopifyConfig | null>(null);

  const fetchAccountPageData = async () => {
    try {
      const data = await accountConfig('account-page');
      setAccountPageData(data);
      setIsSwitch(false);
    } catch (error) {
      console.error('Error fetching account page data:', error);
    }
  };

What data him trying to fetch in Shopify that what trying to get understand what because do not understand what data needs to be fetched to complete this goal?

3

Hello @xbrandonpowell,

You will need to use Shopify customer API

For reference check the hydrogen example at the below link

4

So will begin to set up how the login and sign-up forms should look.

Is that just a layout thing we do not at the moment fetch any customer data at the moment when we create the Customer Accounts.

I just want to make sure I have a clear understanding of the task I need to begin before taking steps to read everything you send about Shopify.

  1. Create the forms for Sign Up and Login.
  2. After that, I will begin to create the User Dashboard Page."
5

Hello @xbrandonpowell,

Your understanding is right,

  1. First create a Login and Sign up a component in next.js using Shopify customer API
  2. Create a Dashboard page component to which the user will be redirected on successful login

You might need to add more features and error handling based on your specific requirements. Additionally, handle user authentication tokens securely and implement proper security practices.

Thanks,

1 Like