[Frontend] Build Notification Template Preview Modal

[Abd-Standard]

Description

Users should be able to preview notification templates before sending them.

Tasks
Create preview modal.
Support dynamic template variables.
Display notification metadata.
Add responsive design support.

Acceptance Criteria
Templates render accurately.
Variable substitutions display correctly.
Preview works across screen sizes.

[Favourejiro]

@Favourejiro has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainers, I'd like to work on this issue.

I'm a Full Stack Developer with experience across the entire stack — from pixel-accurate frontend UIs to scalable backend APIs and database design. I've shipped production-ready features using Next.js/React + Tailwind on the frontend, and Node.js/Express, PostgreSQL, and REST/GraphQL APIs on the backend.

What I'll deliver

• Component/feature implemented to match the design/spec
• Responsive behavior (mobile + desktop), no layout breakage
• Hover/focus states + accessible semantics
• Clean, reusable components and consistent styling
• RESTful or GraphQL API endpoints (if applicable)
• Database schema design or migrations (if applicable)
• Authentication, authorization, and data validation where needed

Approach

1. Review the design/spec, existing code patterns, and any relevant API contracts
2. Build the UI + interactions on the frontend
3. Implement or update backend logic, routes, and data models as needed
4. Write unit/integration tests for critical paths
5. QA on multiple breakpoints + open a PR with screenshots/video and a summary of backend changes

Stack
Frontend: Next.js · React · TypeScript · Tailwind CSS
Backend: Node.js · Express · PostgreSQL · Prisma / Drizzle
Infra: REST · GraphQL · JWT Auth · Docker · Vercel / Railway

If assigned, I'll start immediately and share progress updates in the PR.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Favourejiro to this issue.

[misrasamuelisiguzor-oss]

@misrasamuelisiguzor-oss has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I’m a smart contract developer who turns complex ideas into secure, production-ready blockchain code.
With strong skills in Rust and Solidity, I build systems that are fast, safe, and built to last.
My experience with the Stellar SDK lets me ship real-world Web3 solutions that actually move value

ℹ️ Repo Maintainers: To accept this application, review their application or assign @misrasamuelisiguzor-oss to this issue.

[Malcolm-Wander]

@Malcolm-Wander has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainer, I’d love to work on this issue please…thank you 🙏🏽

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Malcolm-Wander to this issue.

[annacodervibe]

@annacodervibe has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this issue. I have experience with Rust and Soroban smart contract development. I will follow the acceptance criteria and add tests. Excited to contribute. Kindly assign.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @annacodervibe to this issue.

[coderolisa]

@coderolisa has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello maintainer let me work on this
please assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @coderolisa to this issue.

[drips-wave]

Congratulations, @coderolisa! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @coderolisa: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox!

@coderolisa's PR #207 was approved and merged by @Abd-Standard.

🏆 @coderolisa: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (786 total points). Track your full progress on GrantFox.

👏 Great work, @coderolisa! Keep contributing to Core-Foundry.