BlogPost is a modern, full-stack web application that empowers users to share their stories with the world. Create beautiful blog posts with compelling titles, stunning images, and engaging descriptions. Discover and explore content from a vibrant community of writers and creators.
- Secure user authentication with Kinde Auth
- Personalized user dashboard
- User profile management with profile pictures
- Create Posts: Rich text editor for creating blog posts with titles, images, and descriptions
- My Posts: Personal dashboard to manage your published content
- Post Management: Edit and delete your own posts
- Image Upload: Support for high-quality image uploads
- Browse All Posts: Explore posts from the entire community
- Responsive Design: Seamless experience across desktop, tablet, and mobile devices
- Real-time Updates: Dynamic content loading and updates
- Clean, intuitive interface built with Tailwind CSS
- Smooth animations and transitions
- Notification system for user interactions
- Dark/Light mode support (coming soon)
- Frontend: Next.js 14 (App Router), React 18, TypeScript
- Styling: Tailwind CSS, shadcn/ui components
- Backend: Next.js API Routes, Prisma ORM
- Database: PostgreSQL (Neon.tech)
- Authentication: Kinde Auth
- Icons: Lucide React
- Deployment: Vercel
- Development: ESLint, Prettier
- Node.js 18.x or higher
- npm, yarn, or pnpm
- PostgreSQL database (or Neon.tech account)
- Kinde Auth account
-
Clone the repository
git clone https://github.com/yourusername/blog-post.git cd blog-post -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
cp .env.example .env.local
Fill in your environment variables:
DATABASE_URL="your-postgresql-connection-string" KINDE_CLIENT_ID="your-kinde-client-id" KINDE_CLIENT_SECRET="your-kinde-client-secret" KINDE_ISSUER_URL="your-kinde-issuer-url" KINDE_SITE_URL="http://localhost:3000" KINDE_POST_LOGOUT_REDIRECT_URL="http://localhost:3000" KINDE_POST_LOGIN_REDIRECT_URL="http://localhost:3000/dashboard"
-
Set up the database
npx prisma migrate dev npx prisma generate
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
blog-post/
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication routes
│ ├── dashboard/ # Dashboard pages
│ ├── posts/ # Post-related pages
│ └── api/ # API routes
├── components/ # Reusable components
│ ├── general/ # General UI components
│ └── ui/ # shadcn/ui components
├── lib/ # Utility functions
├── prisma/ # Database schema and migrations
├── public/ # Static assets
└── styles/ # Global styles
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style and conventions
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js for the amazing React framework
- Tailwind CSS for the utility-first CSS framework
- Kinde for seamless authentication
- Prisma for the excellent ORM
- Vercel for deployment and hosting
If you have any questions or run into issues, please:
- Check the Issues page
- Create a new issue if your problem isn't already listed
- Join our community discussions
Made with ❤️ by [Your Name]