Over Network FE quest - Auth part 1

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

Table of Contents

• 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

Tech Stack

• 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

React and Next.js

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.

Developer Cheat Sheet

Provided types

User

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
};

Provided API

storeUser

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.

dropUser

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.

createProfile

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.

login

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.

logout

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.

Completing the Quest

Deploying the app locally

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

Completing the quest

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. Visit and try out the demo app here. Feel free to use this demo as a reference as you complete the quest.
3. Deploy and open the app locally as described above.
4. Complete the quests by following the TODO comments in the following files (recommended order):
   • app/app/layout.tsx
   • app/app/loginWindow.tsx