157 lines
3.8 KiB
Markdown
157 lines
3.8 KiB
Markdown
# 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 <Button>Click me</Button>
|
|
}
|
|
```
|
|
|
|
## 📁 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.
|