This is the starter template for Overmind's Over Network Auth part 1 quest. The original Over Network quest can be view here.

• Over Network FE quest - Auth part 1
• Table of Contents
• Tech Stack
  • React and Next.js
• Developer Cheat Sheet
  • Provided types
    • User
  • Provided API
    • storeUser
    • dropUser
    • createProfile
    • login
    • logout
• Completing the Quest
  • Deploying the app locally
  • Completing the quest

• Yarn package manager
• React library for building user interfaces
• Next.js framework for React
• Tailwind CSS for styling
• shadcn/ui for UI components using Radix UI and Tailwind CSS

This app is built using React and Next.js. React is a JavaScript library for building user interfaces. Next.js is a React framework that provides a number of features including server-side rendering, file-based routing, and automatic code splitting.

This type is used to represent a user. In this quest, the important attributes are username, name, and privateKey.

export type User = {
  username: string; // the user's username
  name: string; // the user's name
  imgSrc?: string;
  followers: number;
  following: number;
  privateKey: string; // the user's private key belonging to their on-chain account. Use to execute transactions on the Over Network system
};

This function is used to store the user's information in the browser's local storage. It takes in a User object and stores it in the app's local storage ./app/storage/auth.json. Only the user's username, name, and private key are stored in this quest.

This function can be found in ./app/lib/storage.ts.

This function is used to drop the user's information from the apps's local storage. It takes in a User object and removes the user's information from the app's local storage ./app/storage/auth.json.

This function can be found in ./app/lib/storage.ts.

This function is used to create a profile for the user on the blockchain. It takes in a user object and creates a profile for the user on the blockchain. This blockchain account is used to store the user's profile data and execute transactions on the Over Network system.

This function can be found in ./app/lib/contract.ts.

This function is used to log the user in. It takes in a user object and stores the user's information in the browser's cookie storage which will trigger a re-render of the app.

This function can be found in ./app/lib/actions.ts.

This function is used to log the user out. It clears the user's information from the browser's cookie storage which will trigger a re-render of the app.

This function can be found in ./app/lib/actions.ts.

1. Navigate to ./app/. This is the app's root directory. All commands in the following steps should be run from this directory.
2. Run yarn install to install dependencies
3. Run yarn dev to start the development server
4. Open http://localhost:3000 with your browser to see the result

1. Read through the Developer Cheat Sheet above to understand the app and the supporting dependencies. Look back to that section for reference as you complete the quest.
2. Deploy and open the app locally as described above.
3. Complete the quests by following the TODO comments in the following files (recommended order):
   • app/app/layout.tsx
   • app/app/loginWindow.tsx