Skip to content

Yincard/blog-hackathon

Repository files navigation

Blogify

Blogify is a modern blogging platform that allows users to create, share, and manage their blog content effortlessly. With a sleek and intuitive design, Blogify leverages React.js, Next.js, Firebase, and MySQL to deliver a seamless user experience for content creation and management.

Project Overview

Blogify is a web application where users can:

  • Post Blogs: Create and share blog posts with text and images.
  • Search and Filter: Easily find and view posts based on usernames.
  • Manage Profiles: Update user profiles and profile pictures.
  • Secure Authentication: Log in and sign up with Firebase Authentication.

Features

  • Blog Creation: Users can write and post blogs, including uploading images.
  • User Authentication: Secure login and user management via Firebase Authentication.
  • Search Functionality: Filter and search for posts by username.
  • Profile Management: Edit and update user profiles.
  • Responsive Design: Mobile-friendly and accessible design.

Tech Stack

  • Front-end: React.js, Next.js, CSS Modules
  • Back-end: Node.js, Firebase (for authentication and storage)
  • Database: MySQL, Prisma ORM
  • Deployment: Vercel (for front-end deployment)

Getting Started

To set up a local environment for Blogify, follow these instructions:

Prerequisites

  • Node.js (v18 or later)
  • MySQL
  • Firebase project setup

Installation

  1. Clone the Repository:

    git clone https://github.com/Yincard/blog-hackathon.git
    cd blog-hackathon
  2. Install Dependencies:

    npm install
  3. Configure Firebase:

    • Create a Firebase project and configure it.
    • Add your Firebase configuration to the firebase.js file located in the src directory.
  4. Set Up Environment Variables: Create a .env.local file in the root directory with your Firebase and MySQL environment variables:

    NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain
    NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket
    NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
    NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id
    NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your-measurement-id
    DATABASE_URL=your-database-url
    
  5. Set Up MySQL Database:

    • Create a MySQL database and update the Prisma schema in prisma/schema.prisma.
    • Apply Prisma migrations:
      npx prisma migrate dev
  6. Run the Development Server:

    npm run dev

Usage

  • Creating Posts: Click the "Post" button to add new blog content.
  • Searching Posts: Use the search bar to filter posts by username.
  • Managing Profiles: Update your profile through the sidebar.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published