ManishK4514 / SocializeSpot-Blog-Website

Last updated on: 16th March 2024

SocializeSpot: A Blog Web-App

Table of Contents

• Introduction
• Features
• Tech Stack Used
• Installation
• Preview

Introduction

• SocializeSpot is a full-stack blog application that allows users to connect with others, and share posts, with titles, thumbnails, and content that contains images, and text editors with a rich interface, allows users to comment on blogs, view other's blogs, and view your created blogs. The project utilizes and incorporates full-stack authentication and authorization.

Features

• User Authentication: Users can create an account, log in, and log out securely. This ensures that user data and interactions are protected.

• User Authorization: Proper authorization mechanisms are implemented to ensure that users can only access and modify their data. This prevents unauthorized access and protects user privacy.

• Post Creation: Users can create and publish posts, including titles, thumbnails, and content that will contain images, and text in different format structures like heading, paragraph, bold text, italic, different alignment and many more with rich text editor interface. This allows users to share their thoughts, experiences, and media content with others.

• Image Upload: Users can upload images to accompany their posts. The application handles image uploads securely and efficiently, allowing users to enrich their posts with visuals.

• Comment Functionality: Users can comment on blogs to engage in conversations and show appreciation for shared content. This fosters social interaction and community engagement within the application.

Tech Stack Used

• MongoDB: Database
• Next.js: Framework
• NextAuth: Authentication
• Thumbnail Upload: Cloudinary API
• Tiny MCE: Text editor
• Formik: Form validation and inputs
• Git & Github: Version Control
• Vercel: Hosting

Installation

To set up and run the SocioDot application locally, follow these steps:

• Clone the repository:

  git clone [https://github.com/ManishK4514/SocializeSpot-Blog-Website.git]
  

• Install the dependencies:

  npm install
  

• Configuration

Create a .env file in the server directory and provide the necessary environment variables, such as the MongoDB connection URL and the desired port number:

  PORT= your-port (e.g: 3001)
  GOOGLE_CLIENT_ID = 'Your_google_client_id'
  GOOGLE_CLIENT_SECRET = 'Your_google_client_secret'
  GITHUB_CLIENT_ID = 'Your_github_client_id'
  GITHUB_CLIENT_SECRET = 'Your_github_client_secret'
  MONGODB_URI = 'Your_mongodb_uri'
  NEXT_PUBLIC_BASE_URL = 'Your_base_url'

• Starting the Application ▶️

  npm run dev
  

• Access the application 🌍

Open your web browser and visit http://localhost:your_port(e.g: 3000) to access the SocializeSpot

Please refer to the project's documentation or README files for detailed instructions on setting up and running the application locally.

Preview