Title: Next.js Project with TailwindCSS and ThirdWeb Integration for File Upload to Arweave

Introduction

Welcome to our Next.js project assignment! This task will guide you through creating a web application using Next.js, styled with TailwindCSS, and integrated with ThirdWeb for authentication and Arweave for file storage. The Goal of the assessment is to guage your frontend(FE) prowess and your understanding of web3 concept

Prerequisites

• Basic knowledge of JavaScript and React.
• Familiarity with Next.js framework.
• Understanding of CSS frameworks (preferably TailwindCSS).
• Experience with blockchain technologies or willingness to learn.

Setup Instructions

Step 1: Clone the Repository

git clone https://github.com/GruveWeb3/Assessment
cd Assessment

Step 2: Install Dependencies

Navigate to the project directory and install the required packages.

npm install
# or
yarn install

Step 3: Set Up Environment Variables

Create a .env.local file at the root of your project and add the following variables:

NEXT_PUBLIC_THIRDWEB_API_KEY=your_thirdweb_api_key_here
ARWEAVE_API_KEY=your_arweave_api_key_here

Step 4: Run the Development Server

Start the development server to see your application in action.

npm run dev
# or
yarn dev

Task Requirements

Create a Next.js Project Using TailwindCSS

• Initialize a new Next.js project.
• Install TailwindCSS and configure it according to the official documentation. NB: Please demonstrate your FE prowess to the best of your ability

Implement a Simple Login Flow Using ThirdWeb

• Integrate ThirdWeb SDK for user authentication.
• Ensure users can sign up, log in, and log out seamlessly.

Allow Users to Upload a File to Arweave After Logging In

• Implement a file upload feature after successful login.
• Use Arweave to store the uploaded files securely on the blockchain.
• Add a list view to show all the files uploaded so far

Submission Guidelines

• Commit your changes to Git.
• Push your repository to GitHub.
• Share the link to your GitHub repository via email or WhatsApp

Deadline 1week

Evaluation Criteria

• Code quality and organization.
• Correctness of the implemented features.
• Adherence to best practices in Next.js and TailwindCSS usage.
• Design and overall appearance of the Application
• Security considerations, especially around authentication and file uploads.

Additional Resources

• Next.js Documentation
• TailwindCSS Documentation
• ThirdWeb Documentation
• Arweave Documentation

This README provides a clear roadmap for interns to follow, ensuring they understand what is expected from them throughout the assignment. It covers everything from setting up the environment to implementing the core functionalities and finally submitting their work.

Citations: