A Next.js project featuring a customizable sidebar component built with Shadcn UI.
Special Note: This project was created by a non-coder using Windsurf, the world's first agentic IDE by Codeium. It demonstrates how modern AI-powered development tools can help anyone create professional applications without prior coding experience.
- Modern UI with Shadcn components
- Light/Dark mode support
- Responsive design
- Accessibility-first approach
- TypeScript support
- Built with AI assistance in Windsurf IDE
- Comprehensive development guidelines for consistency
- Next.js 15.0.3
- React 19 (RC)
- TypeScript
- Tailwind CSS
- Shadcn UI
- Windsurf IDE by Codeium
- Clone the repository:
git clone [your-repo-url]
cd rm-sidebar-08
- Install dependencies:
npm install
- Run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
src/
├── app/ # Next.js app directory
├── components/ # React components
│ ├── ui/ # Shadcn UI components
│ └── ... # Custom components
├── hooks/ # Custom React hooks
└── lib/ # Utility functions
- Use Next.js with TypeScript and Tailwind CSS for optimal developer experience and type safety
- Implement the App Router architecture
- Utilize Server Components by default, using Client Components only when necessary
- Leverage Server Actions for data mutations
- Ensure accessibility (WCAG guidelines)
- Follow proper documentation practices for both technical and non-technical audiences
Every component, function, and significant code block should include both plain English and technical documentation:
/**
* 👥 Plain English:
* This is a reusable button that can be customized to look different ways
* (like primary, secondary, or outline styles). It can handle being clicked,
* being disabled, and showing a loading state.
*
* 🔧 Technical Details:
* @component Button
* @extends shadcn/ui button component
* @description Polymorphic button component with variant support
* @props {ButtonProps} - Extends HTML button attributes
*
* @example
* // Primary button with loading state
* <Button variant="primary" isLoading>Save Changes</Button>
*/
import { Button } from "@/components/ui/button"
/**
* 👥 What This Does:
* Creates a customized button that matches our app's style but can be
* modified for different uses.
*/
export function CustomButton({ className, ...props }) {
return <Button className={cn("custom-styles", className)} {...props} />
}
/**
* 👥 Plain English:
* This helps the app remember and reuse information instead of fetching it every time.
* Think of it like a smart notebook that remembers important information.
*/
const getCachedData = unstable_cache(
async () => fetchData(),
['cache-key'],
{ revalidate: 3600 }
)
/**
* 👥 Plain English:
* Creates a safety net that catches errors and shows a friendly message.
*/
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
return (
<div className="error-container">
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</div>
)
}
-
Documentation
- a. Plain English explanation included
- b. Technical documentation complete
- c. Usage examples provided
- d. Edge cases documented
-
Implementation
- a. Proper Server/Client component usage
- b. Accessibility considerations
- c. Performance optimizations
- d. Error handling
- e. Type safety
- Always include both plain English and technical documentation
- Follow provided patterns for components and functions
- Use consistent documentation structure
- Include practical examples with code
- Consider accessibility in all implementations
- Maintain type safety throughout
- Optimize for performance where possible
MIT
Created with:
- Next.js
- Shadcn UI
- Windsurf IDE by Codeium
Want to build something like this? Check out Windsurf - making professional development accessible to everyone!