{"id":25236941,"url":"https://github.com/mmj030703/storyhub","last_synced_at":"2026-04-09T15:52:04.280Z","repository":{"id":275412906,"uuid":"925570267","full_name":"mmj030703/StoryHub","owner":"mmj030703","description":"A full-stack MERN (MongoDB, Express.js, React.js, Node.js) application for managing image posts.","archived":false,"fork":false,"pushed_at":"2025-02-11T07:02:41.000Z","size":63,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T18:13:43.517Z","etag":null,"topics":["express","git","lazy-loading","mern-stack","mongodb","mongoosejs","nodejs","reactjs","responsive","shimmer-effect","talwindcss"],"latest_commit_sha":null,"homepage":"https://story-hub-6vd5.onrender.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmj030703.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-01T07:16:10.000Z","updated_at":"2025-02-11T07:02:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"e46b4ecc-967c-45bd-9374-260227028c59","html_url":"https://github.com/mmj030703/StoryHub","commit_stats":null,"previous_names":["mmj030703/storyhub"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmj030703%2FStoryHub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmj030703%2FStoryHub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmj030703%2FStoryHub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmj030703%2FStoryHub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmj030703","download_url":"https://codeload.github.com/mmj030703/StoryHub/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378138,"owners_count":20929297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","git","lazy-loading","mern-stack","mongodb","mongoosejs","nodejs","reactjs","responsive","shimmer-effect","talwindcss"],"created_at":"2025-02-11T15:33:09.672Z","updated_at":"2025-12-30T19:58:24.937Z","avatar_url":"https://github.com/mmj030703.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **Story Hub - Post Management System**\n\nWelcome to **Story Hub**, a platform for managing and sharing your stories. Built using the MERN stack, this application provides a user-friendly interface for creating, reading, updating, and deleting posts. It emphasizes a smooth user experience with features like lazy loading, shimmer UI, and informative toast messages.\n\n## Table of Contents\n\n1. [Project Overview](#project-overview)\n2. [Features](#features)\n3. [Installation](#installation)\n4. [Usage](#usage)\n5. [API Endpoints](#api-endpoints)\n6. [Project Structure](#project-structure)\n7. [Technologies Used](#technologies-used)\n8. [License](#license)\n\n## Project Overview\n\nStory Hub is a **MERN-based Post Management System** that allows users to create, read, update, and delete posts. The application prioritizes a positive user experience through responsive design, optimized performance with lazy loading, visual feedback with shimmer UI, and clear communication using toast messages.\n\n### Live Demo\n\n_[Link to Demo](https://story-hub-6vd5.onrender.com)_\n\n---\n\n## Features\n\n- **CRUD Operations:** Create, Read, Update, and Delete posts with ease.\n- **Image Upload:** Upload images to accompany your stories.\n- **Responsive Design:** Optimized for viewing on various devices.\n- **Lazy Loading:** Improves initial load time and performance by loading content as needed.\n- **Shimmer UI:** Provides a visual loading indicator while content is fetching, enhancing the user experience.\n- **Toast Messages:** Clear and concise messages inform the user about the status of their actions (success, errors, etc.).\n\n---\n\n## Installation\n\n### Prerequisites\n\nEnsure you have the following installed:\n\n- [Node.js](https://nodejs.org/) (v14 or later)\n- [MongoDB](https://www.mongodb.com/try/download/community) (local or hosted instance)\n- An [Imagekit Account](https://imagekit.io)\n\n---\n\n### Backend Setup\n\n1. Clone the repository:\n\n```bash\n   git clone https://github.com/mmj030703/StoryHub.git\n   cd backend\n```\n\n2. Install dependencies:\n\n```bash\n   npm install\n```\n\n3. Create a `.env` file and add the following:\n\n```env\n    PORT=3000\n    DATABASE_NAME=\u003cdb_name\u003e\n    MONGODB_URI=\u003cmongodb_uri\u003e\n    IMAGEKIT_PUBLIC_KEY=\u003cimagekit_publickey\u003e\n    IMAGEKIT_PRIVATE_KEY=\u003cimagekit_privatekey\u003e\n    IMAGEKIT_URL_ENDPOINT=\u003cimagekit_url_endpoint\u003e\n       \n```\n\n4. Start the server:\n\n`bash\n   npm start\n   `\n\nThe backend will run on `http://localhost:3000`.\n\n---\n\n### Frontend Setup\n\n1. Navigate to the frontend repository:\n\n```bash\n   git clone https://github.com/mmj030703/StoryHub.git\n   cd frontend\n```\n\n2. Install dependencies:\n\n```bash\n   npm install\n```\n\n3. Start the development server:\n\n```bash\n   npm run dev\n```\n\nThe frontend will run on `http://localhost:5173`.\n\n---\n\n## Usage\n\n1. **Create Post:** Navigate to the \"Add Post\" page to create a new story. Fill in the title, description, and upload an image.\n2. **View Posts:** The homepage displays all the posts.\n3. **Update Post:** Click on a post to view its details and access the update form.\n4. **Delete Post:** Delete posts from the post details page.\n\n---\n\n## API Endpoints\n\n#### Base URL\n\nhttps://storyhub-n1ne.onrender.com/api/v1\n\n### Posts\n\n| Method | Endpoint            | Description         |\n| ------ | ------------------- | ------------------- |\n| GET    | `/posts/all-posts`  | Get all posts       |\n| GET    | `/posts/post/:id`   | Get a post by ID    |\n| POST   | `/posts/add`        | Add a new post      |\n| PATCH  | `/posts/update/:id` | Update a post by ID |\n| DELETE | `/posts/delete/:id` | Delete a post by ID |\n\n---\n\n## Project Structure\n\n```plaintext\nstory-hub/\n├── backend/\n│   ├── public/            # Temporary files\n│   ├── .env                # Environment variables\n│   ├── .env.sample    # Sample Environment variables\n│   ├── src/                 # Source Directory\n│       ├── config/            # Configuration files\n│       ├── controllers/       # Backend logic\n│       ├── db/       # Database files\n│       ├── middlewares/            # Backend API middlewares\n│       ├── models/            # Mongoose models\n│       ├── routes/            # Backend API routes\n│       ├── utils/            # Utility files\n│       ├── app.js          # Backend application file\n│       └── index.js          # Backend entry point\n├── frontend/\n│   ├── public/\n│   ├── src/\n│   │   ├── components/    # React components\n│   │   ├── utils/    # Utility files\n│   │       ├── ...\n│   │   ├── pages/         # Pages for the app\n│   │   ├── App.jsx        # Application component\n│   │   └── main.jsx        # Frontend entry point\n```\n\n## Technologies Used\n\n- **Backend**:\n\n  - Node.js, Express, MongoDB, Mongoose, Multer, Imagekit.\n\n- **Frontend**:\n  - React, Tailwind CSS, React Router.\n\n---\n\n## License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmj030703%2Fstoryhub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmj030703%2Fstoryhub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmj030703%2Fstoryhub/lists"}