Web Developer

Overview

InstructionsReact Next.js Web UI Code Generation Guide

This guide outlines the process for generating React Next.js code to create responsive and accessible web interfaces using Tailwind CSS and shadcn/ui components.

Implementation Overview

The model breaks down the task into:

• Understanding the complexity – Determines the number of UI elements based on the request (Simple, Medium, or Complex).
• Structuring the UI – Organizes the components, layout, and interactions.
• Generating Code – Ensures adherence to Next.js App Router, Tailwind styling, and shadcn component imports.
• Ensuring Responsiveness & Accessibility – Applies Tailwind utility classes and ARIA roles for usability.

Code Summary

The generated code includes:

• A Next.js page with shadcn/ui components like Cards, Buttons, and Forms.
• Styling with Tailwind CSS for responsiveness.
• Lucide Icons for UI enhancements.
• Support for fetch API if external data is needed.

Key Requirements

• Mandatory Libraries: Next.js, Tailwind CSS, shadcn/ui.
• File Naming: Uses kebab-case (e.g., login-form.tsx).
• Import Best Practices: Uses import { type foo } instead of full library imports.
• Accessibility: Uses semantic HTML, ARIA attributes, and screen reader-friendly text.

This structured approach ensures that the generated code is executable, scalable, and visually appealing, ready for integration into any modern web application.Task Example:

Prompt: "Create a newsletter subscription card with options to subscribe via email, phone number, or by scanning a QR code"

WebUI Output:

Prompt: "Develop a one-page React 'Pet Activity Tracker' that monitors multiple pets' daily routines. Features should include: Activity logs for walks, meals, and medications; Visual timeline of each pet's day; Photo upload for daily pet moments; Shareable pet reports with other family members; Smart notifications for overdue activities; Multi-pet comparison charts; Customizable activity types per pet species"

WebUI Output:

Project Task Breakdown & Resource Planning

We are looking for experienced professionals to assist in training our AI model by generating WebUIs based on given prompts.

This project involves a total of 400 tasks, and we need 25 dedicated resources who can commit to working 8 hours a day for 5-7 days. The deadline to complete these initial tasks is by Friday (March 28, 2025). After these initial tasks, based on quality there will likely be further requirements for more tasks.

Candidates must have at least 4 years of experience with Next.js, along with expertise in React and Node.js. Proficiency in Shadcn/ui, and Tailwind CSS, is essential. We pay for this 1000rupees per hour.

Job Types: Contractual / Temporary, Freelance
Contract length: 1 week

Pay: ₹30,000.00 - ₹40,000.00 per month

Schedule:

• Day shift

Work Location: Remote

Speak with the employer
+91 9220798787
Expected Start Date: 22/03/2025