This project combines a robust .NET 9.0 RESTful API for joke management with a modern Next.js frontend. The system provides comprehensive capabilities for managing and serving humorous content, featuring advanced categorization, tagging, and engagement tracking, all wrapped in a user-friendly web interface.
- ✨ Full CRUD operations for joke management through both API and UI
- 🎲 Random joke retrieval with filtering options
- 🏷️ Advanced categorization system with tagging support
- 📊 Engagement tracking with laugh scores
- 🔍 Flexible search and filtering capabilities
- 🎨 Modern, responsive user interface built with Next.js
- 🌓 Dark mode support using Tailwind CSS
- 🚀 Backend built on .NET 9.0 for optimal performance
- ⚡ Next.js 13+ with App Router for frontend
- ✅ Comprehensive validation using FluentValidation
- 📝 Detailed Swagger/OpenAPI documentation
- 🎯 TypeScript for enhanced development experience
- 🎨 Tailwind CSS for modern styling
- 🔒 JWT authentication with Google OAuth integration
- 🐳 Docker support for easy deployment
src/
├── Data/
│ ├── AppDbContext.cs # EF Core database context
│ ├── BaseRepository.cs # Generic repository pattern
│ ├── DbInitializer.cs # Database seeding
│ └── JokeRepository.cs # Joke repository
├── Services/
│ ├── JokeService.cs # Joke business logic
│ ├── TagService.cs # Tag management
│ ├── JwtTokenService.cs # Authentication
│ └── GoogleAuthService.cs # OAuth integration
├── Models/
│ ├── Request.cs # Request DTOs
│ └── Response.cs # Response DTOs
└── Program.cs # Application entry point
app/
├── components/
│ ├── JokeForm.tsx # Joke submission form
│ └── ui/ # Reusable UI components
├── lib/
│ └── api.ts # API integration
├── styles/
│ └── globals.css # Global styles
└── page.tsx # Main page component
- .NET 9.0 SDK
- Node.js 18+ and npm/yarn
- PostgreSQL 15+
- Docker (optional)
- Clone the repository:
git clone https://github.com/yourusername/whateverAPI.git
cd whateverAPI
- Update database connection in
appsettings.json
:
{
"ConnectionStrings": {
"DefaultConnection": "Host=localhost;Database=whateverdb;Username=postgres;Password=postgrespw;"
}
}
- Run the API:
dotnet restore
dotnet run
- Navigate to the Next.js directory:
cd frontend
- Install dependencies:
npm install
- Start the development server:
npm run dev
The application will be available at:
- Frontend: http://localhost:3000
- API: http://localhost:5000
- Swagger UI: http://localhost:5000/swagger
POST /api/jokes
Content-Type: application/json
{
"content": "Why did the developer quit his job? He didn't get arrays!",
"type": "Programming",
"tags": ["programming", "work"],
"isActive": true
}
GET /api/jokes/random
POST /api/jokes/find
Content-Type: application/json
{
"type": "Programming",
"query": "developer",
"active": true,
"pageSize": 10,
"pageNumber": 1,
"sortBy": "laughScore",
"sortDescending": true
}
The main form component for submitting new jokes:
import { useState } from 'react';
export default function JokeForm() {
const [jokeContent, setJokeContent] = useState('');
// Form implementation...
}
The project uses Tailwind CSS with a custom configuration:
// tailwind.config.ts
export default {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
}
Create a .env.local
file in the frontend directory:
NEXT_PUBLIC_API_URL=http://localhost:5000
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-client-id
Configure JWT and Google OAuth in appsettings.json
:
{
"JwtOptions": {
"Secret": "your-secret-key",
"Issuer": "your-issuer",
"ExpirationInDays": 90
},
"Authentication": {
"Google": {
"ClientId": "your-client-id",
"ClientSecret": "your-client-secret"
}
}
}
- Follow C# coding conventions
- Include XML documentation for public APIs
- Implement proper error handling
- Add appropriate logging
- Write unit tests for new features
- Use TypeScript for all new components
- Follow Next.js best practices
- Implement proper error handling
- Use Tailwind CSS for styling
- Write unit tests using Jest
The API uses RFC 7807 Problem Details:
{
"type": "https://httpstatuses.com/404",
"title": "Resource Not Found",
"status": 404,
"detail": "Joke with ID '123' was not found",
"traceId": "00-1234567890abcdef-abcdef1234567890-00"
}
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
Use conventional commits:
- feat: New feature
- fix: Bug fix
- docs: Documentation changes
- style: Code style changes
- refactor: Code refactoring
- test: Adding tests
- chore: Maintenance tasks
This project is licensed under the MIT License.
For support, please open an issue in the GitHub repository or contact the maintainers.