Blogger

Blogger is a full-stack application for creating, reading, editing, and managing blog posts. This project features two separate clients: a public client where users can view and comment on posts, and a private client for authenticated users to write, edit, and publish posts. The application is built with a monorepo structure using React, Node.js, and TypeScript, with TailwindCSS for styling.

Features

Public

• View all blog posts
• View all blog posts
• Filter posts by categories
• View individual post details with images
• Add and view comments
• Responsive design with TailwindCSS

Private

• User authentication with JWT
• Create, edit, and delete blog posts
• Manage post status (published/unpublished)
• Rich text editor for creating posts with TinyMCE
• Image upload via drag-and-drop
• Edit and unpublish posts
• Pagination and sorting by title, date, and comments

Tech Stack

Frontend: React, TypeScript, Vite, TailwindCSS, TinyMCE

Backend: Node.js, Express, Passport.js (for authentication)

Database: Prisma, PostgreSQL

Styling: TailwindCSS

Authentication: JWT

Other Tools: Turborepo (monorepo management)

Quick info

• Check out iconify for icons: https://iconify.design/ or reacticons

• npx kill-port 3000 to kill server if already in use

• if private build not working: "build": "vite build",

• script to remove js and d.ts from src:

  • find src -name '*.js' -type f -delete
  • find src -name '*.d.ts' -type f -delete

• https://picsum.photos/ cool random image generator

• https://logo.com/editor/colors logo + favicon

Run Locally

Clone the project

  git clone https://github.com/AbdallaAlhag/Blogger.git
  cd Blogger

Go to the project directory

  cd Blogger

Install dependencies

  npm install

Setup Environment Variables

Create .env files in the project root for both development and production environments:

.env.development
.env.production

These files should include variables like:

DATABASE_URL - PostgreSQL connection string
VITE_PUBLIC_CLIENT_URL - URL for the public client
VITE_PRIVATE_CLIENT_URL - URL for the private client
JWT_SECRET - Secret key for JWT tokens

Run Migrations Make sure Prisma is set up and run the database migrations:

  npx prisma migrate dev

Start the server

  npm run dev

Scripts

The following scripts are available:

build – Generates Prisma client and compiles the TypeScript code.
start – Runs the production server.
dev – Starts the development server.
seed – Seeds the database with initial data.
lint – Runs ESLint for code quality.
lint:fix – Fixes ESLint issues automatically.
format – Formats code using Prettier.

Folder Structure

Blogger/
├── apps/
│   ├── public-client/    # Public-facing React app
│   └── private-client/   # Private-facing React app for authenticated users
├── packages/
│   ├── shared-components/ # Shared React components
├── server/               # Node.js backend
│   └── src/
│       ├── auth/         # Authentication logic
│       ├── controllers/  # Controllers for handling requests
│       ├── routes/       # API routes
        └── prisma/       # Prisma models and migrations

Deployment

The application is deployed using Netlify for the frontend and Railway for the backend.

Frontend Deployment

The public and private clients are deployed separately:

• Public Client: https://blogger-public.netlify.app

• Private Client: https://blogger-private.netlify.app

Backend Deployment

The server is deployed on Railway at the following URL:

https://server-production-d6c6.up.railway.app

Progress

✅❌

✅ Set up restore terminal on public client and server, removed sql, and commented out private client + p-studio
✅ Set up github
✅ Set up simple server and create main dashboard
✅ Create simple db and set up prisma
✅ Created task ctrl+alt+f for npm run format
✅ Setup prisma db, create route, controller, and query for get and post posts
✅ Write seed file to query db for posts with starting data
✅ Connect server db to front end
✅ Create footer and header
✅ Create postcard for articles in dashboard and article pages
✅ Style HomePage and components
✅ Seed test data for dashboard
✅ Add post loading animation
✅ Create individual article pages
✅ Work on comments section components for article pages
    ✅ Create comment MVC that attaches comments to posts id
✅ Link sign up and login to redirect to the private client and logout redirects to public client
  ✅ Fix issue with redirecting to private client but not redirecting to public client
✅ Create auth and login/signup pages
    ✅ Allow users to sign up and log in
    ✅ Implement passport to authenticate users
    ✅ Use JWT for auth
✅ Create Post blog page
✅ Create all blogs page with pagination and sorting
✅ Validate front end login and signup form and showcase errors
✅ Validate back end signup form and showcase errors
✅ Add comments count to PostCard components
✅ Add TinyMCE editor to create blog
✅ slight problem directing to create blog page from public and also when publishing the articles
  ✅ Added cookies instead of local storage to ease transferring of local storage between public and private client
✅ Check out authorID in form for create blog post
✅ Fix post format html bug from TinyMCE editor
✅ Fix image upload bug, saved it from my server: http://localhost:3000/uploads/ Probably change that later
✅ Create edit and unpublish button after authenticating user and user id = author id
✅ Patch publish for a post
✅ Allow users to edit their own posts
✅ Create an all blogs page with user's own posts regardless of publish status
✅ Add publish button and try to combine it with unpublish
❌ Add animation to articles like slide in
❌ Add tags?
✅ update loading, error, and no post found states in article, blog, home pages
✅ deploy this bad boy to railway -server
✅ deploy front end to netlify
✅ Connect deployed front end to deployed server
✅ Work on fixing reload glitch issue 
✅ Try to fix protected routes, we are able to switch between public and private client if we turn off protected routes
  ✅ Switch from cookies to local storage to store tokens since netlify doesn't support cookie sharing between different domains

License

MIT