Pencraft Full Stack Blogging Application

PenCraft: React frontend, Cloudflare Workers backend. Features Prisma for DB, JWT for auth, and Tailwind CSS with Aceternity UI components for styling. Simplifying blogging with efficiency.

#cloudflare #cloudinary #honojs #jwt-authentication #prisma #psotgresql #react-hooks #tailwind-css #vercel #web-crypto-api

Demo Download

PenCraft

This project aims to create a blogging platform using modern technologies for both frontend and backend. It utilizes a robust stack including React for the frontend, Cloudflare Workers for the backend, and a combination of other tools for validation, ORM, database, and authentication.

Technologies Used

Frontend:
- React: A popular JavaScript library for building user interfaces.
- Zod: A TypeScript-first schema declaration and validation library.
- TypeScript: A statically typed superset of JavaScript that compiles to plain JavaScript.
- Styling:
- Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to build custom designs.
- Aceternity UI: A collection of reusable UI components built with Tailwind CSS, designed for rapid development and consistent styling.
Backend:
- Cloudflare Workers: A serverless execution environment that allows you to create lightweight, scalable backend applications.
- Prisma: A modern database toolkit for TypeScript and Node.js that simplifies database access.
- Postgres: A powerful, open-source relational database system.
- JWT (JSON Web Tokens): A compact, URL-safe means of representing claims to be transferred between two parties securely.
- Using WebCrypto for hashing passsword before storing in the database.

Setup Instructions

Frontend

Navigate to the frontend directory.
Run npm install to install dependencies.
Run npm start to start the development server.
Access the development server at http://localhost:3000.

Backend

Navigate to the backend directory.
Run npm install to install dependencies.
Set up your Postgres database and configure the connection in prisma/schema.prisma.
Run npx prisma migrate dev to apply migrations and generate Prisma client.
Run npm run dev to start the backend server.
Access the backend server at http://localhost:8080.

Authentication (Cookies Approach)

For authentication, this project utilizes JSON Web Tokens (JWT) along with a cookies-based approach.

Upon successful login, a JWT token is generated server-side and sent to the client.
The JWT token is then stored in an HTTP-only cookie for enhanced security.
Subsequent requests from the client include this token in the cookie header.
The server validates the JWT token to authenticate the user for protected routes.