Skip to content

feat: Initialize Next.js frontend for PrivacyLayer dApp (Issue #23)#172

Open
HuiNeng6 wants to merge 1 commit intoANAVHEOBA:mainfrom
HuiNeng6:feat/nextjs-frontend
Open

feat: Initialize Next.js frontend for PrivacyLayer dApp (Issue #23)#172
HuiNeng6 wants to merge 1 commit intoANAVHEOBA:mainfrom
HuiNeng6:feat/nextjs-frontend

Conversation

@HuiNeng6
Copy link
Copy Markdown

Summary

This PR initializes the Next.js frontend application for the PrivacyLayer privacy pool dApp as requested in Issue #23.

Implementation

Project Setup

  • ✅ Next.js 14 with App Router
  • ✅ TypeScript with strict mode
  • ✅ Tailwind CSS with custom theme
  • ✅ ESLint configuration

Project Structure

\
frontend/
├── app/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Landing page
│ ├── deposit/page.tsx # Deposit flow
│ ├── withdraw/page.tsx # Withdrawal flow
│ └── history/page.tsx # Transaction history
├── lib/
│ ├── sdk.ts # SDK integration placeholder
│ └── utils.ts # Utility functions
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── README.md
\\

Dependencies

  • next@14
  • react@18
  • @stellar/freighter-api
  • zustand
  • @tanstack/react-query

Features

  • Landing page with hero section and feature cards
  • Deposit page with denomination selection (10/100/1000/10000 XLM)
  • Withdraw page with secret note input and recipient address
  • History page with transaction list
  • Freighter wallet connection placeholder
  • Dark theme with purple/teal gradient design

Verification

\\�ash
npm install
npm run build # ✅ Build succeeds
\\

Acceptance Criteria

  • Next.js project initialized
  • TypeScript configured
  • Tailwind CSS working
  • Basic routing set up

  • pm run dev\ starts dev server

  • pm run build\ builds successfully
  • README with setup instructions

Bounty

This addresses Issue #23 - [BOUNTY] Set Up Next.js Frontend Project Structure

Resolves: #23

…OBA#23)

- Next.js 14 with App Router
- TypeScript with strict mode
- Tailwind CSS with custom theme (primary/stellar colors)
- ESLint configuration

Project Structure:
- app/page.tsx - Landing page with hero section
- app/deposit/page.tsx - Deposit flow UI
- app/withdraw/page.tsx - Withdrawal flow with ZK proof
- app/history/page.tsx - Transaction history
- lib/sdk.ts - SDK integration placeholder
- lib/utils.ts - Utility functions

Features:
- Freighter wallet connection
- Denomination selection (10/100/1000/10000 XLM)
- Responsive dark theme design
- Build verified: npm run build succeeds

Resolves: ANAVHEOBA#23
@HuiNeng6
Copy link
Copy Markdown
Author

Hi @ANAVHEOBA!

Following up on this PR for the Next.js frontend (Issue #23). Ready for review.

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BOUNTY] Set Up Next.js Frontend Project Structure

1 participant