# CodeNuk Frontend A modern web application built with Next.js 14, TypeScript, and shadcn/ui. This project serves as the frontend for the CodeNuk platform, providing a user interface for generating and managing code projects. ## ๐Ÿš€ Features - **Project Generation**: Create new projects with various templates - **Authentication**: Secure user authentication flows - **UI Components**: Built with shadcn/ui for a consistent design system - **Responsive Design**: Works on all device sizes - **Modern Stack**: Next.js 14, TypeScript, and Tailwind CSS ## ๐Ÿ› ๏ธ Prerequisites - Node.js 18.0.0 or later - npm or yarn package manager - Git ## ๐Ÿš€ Getting Started ### 1. Clone the repository ```bash git clone https://github.com/your-username/codenuk-frontend.git cd codenuk-frontend ``` ### 2. Install Dependencies ```bash npm install # or yarn install # or pnpm install ``` ### 3. Environment Setup Create a `.env.local` file in the root directory and add the necessary environment variables: ```env NEXT_PUBLIC_API_URL=your_api_url_here NEXT_PUBLIC_APP_URL=http://localhost:3000 # Add other environment variables as needed ``` ### 4. Run the Development Server ```bash npm run dev # or yarn dev # or pnpm dev ``` Open [http://localhost:3000](http://localhost:3000) in your browser to see the application running. ## ๐ŸŽจ Adding shadcn/ui Components This project uses shadcn/ui for UI components. Here's how to add new components: 1. Install the shadcn CLI: ```bash npx shadcn-ui@latest init ``` 2. Add a new component: ```bash npx shadcn-ui@latest add button ``` 3. Import and use the component in your code: ```tsx import { Button } from "@/components/ui/button" export function MyComponent() { return } ``` ## ๐Ÿ“ Project Structure ``` src/ โ”œโ”€โ”€ app/ # App router โ”‚ โ”œโ”€โ”€ auth/ # Authentication pages โ”‚ โ”œโ”€โ”€ components/ # Page-specific components โ”‚ โ”œโ”€โ”€ layout.tsx # Root layout โ”‚ โ””โ”€โ”€ page.tsx # Home page โ”œโ”€โ”€ components/ # Reusable components โ”‚ โ”œโ”€โ”€ ui/ # shadcn/ui components โ”‚ โ””โ”€โ”€ ... โ”œโ”€โ”€ lib/ # Utility functions โ””โ”€โ”€ styles/ # Global styles ``` ## ๐Ÿงช Testing Run the test suite: ```bash npm run test # or yarn test ``` ## ๐Ÿ—๏ธ Building for Production 1. Build the application: ```bash npm run build ``` 2. Start the production server: ```bash npm run start ``` ## ๐Ÿค Contributing 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/AmazingFeature`) 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request ## ๐Ÿ“„ License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. ## ๐Ÿ™ Acknowledgments - [Next.js](https://nextjs.org/) - [shadcn/ui](https://ui.shadcn.com/) - [Tailwind CSS](https://tailwindcss.com/) --- Made with โค๏ธ by Tech4Biz ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.