ChronicleInk FullStack News Platform

A modern, full-featured news platform built with React, Vite, Firebase, and Node.js. ChronicleInk offers premium content, subscription management, article publishing, and a robust admin dashboard.

Live Demo

• Client: https://chronicle-ink-full-stack-news-platf.vercel.app/
• Repository: MRaysa/ChronicleInk-FullStack-News-Platform

---

Table of Contents

• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
  • Running Locally
• Deployment
• Project Structure
• Contributing
• License

---

Features

• 🔒 Authentication (Firebase)
• 📰 Article publishing, editing, and management
• 💎 Premium subscription plans
• 👨‍💼 Admin dashboard (manage users, articles, publishers)
• 🎨 Responsive UI with Tailwind CSS & Flowbite React
• 📊 Data visualization (Google Charts)
• 🌗 Light/Dark theme support
• ⚡ Fast performance with Vite

---

Tech Stack

Frontend:

• React
• Vite
• Tailwind CSS
• Flowbite React
• Framer Motion
• React Query
• React Router
• React Icons
• Google Charts

Backend:

• Node.js
• Express
• MongoDB
• Firebase Authentication

Deployment:

• Vercel (Client & Server)

---

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn
• Git

Installation

1. Clone the repository:

   git clone https://github.com/MRaysa/ChronicleInk-FullStack-News-Platform.git
   cd ChronicleInk-FullStack-News-Platform

2. Install dependencies:

   npm install
   # or
   yarn install

Environment Variables

Create a .env file in the root directory and add your configuration:

VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id
VITE_IMGB_API_KEY=your_imgbb_api_key

Note: You can get Firebase config from your Firebase Console.

Running Locally

Start the development server:

npm run dev
# or
yarn dev

Open http://localhost:5173 in your browser.

---

Deployment

The project is deployed on Vercel:

• Client: https://chronicle-ink-full-stack-news-platf.vercel.app/
• Server: See your backend repo and Vercel dashboard for details.

To deploy your own version:

1. Push your code to GitHub.
2. Import the repo in Vercel.
3. Set environment variables in Vercel dashboard.
4. Deploy!

---

Project Structure

├── src/
│   ├── components/         # Reusable UI components
│   ├── context/            # React context providers (Auth, Theme)
│   ├── hook/               # Custom hooks
│   ├── layouts/            # Layout components (Admin, Main)
│   ├── pages/              # Route pages (Home, Articles, Profile, etc.)
│   ├── Routes/             # App routing
│   ├── utils/              # Utility functions
│   ├── index.css           # Global styles
│   └── main.jsx            # App entry point
├── public/                 # Static assets
├── .env                    # Environment variables
├── package.json            # Project metadata & scripts
├── tailwind.config.js      # Tailwind CSS config
├── vite.config.js          # Vite config
└── README.md               # Project documentation

---

Contributing

Contributions are welcome! Please open issues or submit pull requests for improvements and bug fixes.

---

---

Made with ❤️ by MRaysa