Blog Post CRUD Application(https://blog-post-green.vercel.app/)
This project is a Blog Post CRUD application built with the latest technologies. It allows users to perform CRUD (Create, Read, Update, Delete) operations on blog posts. The application uses Next.js 14 for the framework, Tailwind CSS for styling, Acenternity UI for styling, Prisma for ORM, and PostgreSQL for the database. The PostgreSQL database is hosted using NeonDB's free tier services.
- Next.js 14: A React framework for building server-side rendered (SSR) and static web applications.
- Tailwind CSS: A utility-first CSS framework for styling.
- Acenternity UI: A UI component library for faster design and development.
- Prisma: An ORM (Object-Relational Mapping) tool for interacting with the PostgreSQL database.
- PostgreSQL: A powerful, open-source relational database system.
- NeonDB: Provides free-tier PostgreSQL database services.
- Read Posts: View a list of blog posts to read.
- Create Post: Add new blog posts with a title and content.
- Update Post: Edit existing blog posts.
- Delete Post: Remove blog posts from the application.
- Next.js File-Based Routing: Utilize Next.js's file-based routing for easy navigation.
- App Routing: Leverage Next.js's app routing features for improved organization.
- Server-Side Rendering: Enhance performance and SEO with server-side rendering.
Follow these steps to run the project locally:
- Node.js: Ensure you have Node.js installed. You can download it from nodejs.org.
- Docker: Docker should be installed and running on your machine. Download from docker.com.
git clone https://github.com/siddhant-agrawal01/Blog-post.git
cd Blog-post
npm install
To connect your application to a PostgreSQL database using NeonDB (or any PostgreSQL database), you need to follow several steps to ensure everything is configured correctly. Here’s a comprehensive guide:
- Using NeonDB:
- Sign up or log in to NeonDB.
- Create a new PostgreSQL database instance.
- Note the connection details provided, including the host, port, username, password, and database name.
You need to set up environment variables to securely provide database credentials to your application. For a Next.js project, follow these steps:
-
Create a
.env
File: In the root directory of your project, create a file named.env
. -
Add Database Connection URL: Add your PostgreSQL connection string to the
.env
file. Replace the placeholders with your actual database credentials:DATABASE_URL=postgresql://username:password@host:port/database?sslmode=require
-
Install Prisma: Ensure Prisma is installed in your project:
npm install @prisma/client prisma
-
Configure Prisma: In your
prisma
folder, open theschema.prisma
file and configure the datasource to use theDATABASE_URL
environment variable:datasource db { provider = "postgresql" url = env("DATABASE_URL") }
-
Generate Prisma Client: After configuring your
schema.prisma
, run the following command to generate the Prisma Client:npx prisma generate
-
Run Database Migrations: If you have any migrations, run:
npx prisma migrate dev
-
Start Your Application: Run your application to ensure it can connect to the database:
npm run dev
-
Run the Development Server
npm run dev
-
Access the Application
Open your browser and navigate to
http://localhost:3000
.
-
Build the Docker Image
docker build -t blog-app .
-
Run the Docker Container
docker run -p 3000:3000 blog-app
-
Access the Application
Open your browser and navigate to
http://localhost:3000
.
To build the application for production, use:
npm run build
Then you can start the production server with:
npm start
For deployment, follow the instructions provided by your hosting provider. This project is compatible with platforms like Vercel and other cloud providers.
The project is build in my Linux ubuntu 24.04LTS machine if you face problem running locally try running with docker(specially windows users). Also i have hard code the env in docker file you can directly run it for testing the app (in production the env must be pass at running time of the image )