AyushiVashisth / rashi-assignment-

This project involves integrating PayloadCMS into a web application for managing posts and media content. The backend is built with Node.js and Express, using MongoDB Atlas as the database. The frontend is developed with React, providing a seamless user experience for content creators and consumers.

🚀 PayloadCMS Assignment 🚀

This project involves integrating PayloadCMS into a web application for managing posts and media content. The backend is built with Node.js and Express, using MongoDB Atlas as the database. The frontend is developed with React, providing a seamless user experience for content creators and consumers. Follow the steps below to set up and explore the project.

Getting Started

1. Install PayloadCMS Package:

   • Follow the PayloadCMS Installation Guide to install the necessary package for managing content.

2. MongoDB Atlas Setup:

   • Create a free instance on MongoDB Atlas for storing posts and media data.
   • Set up distinct collections for posts and media.

3. Custom API Endpoint:

   • Develop a custom API endpoint at /posts/videos/stream to exclusively fetch posts of the "short video" type.

4. Frontend Design:

   • Prioritize using React for the frontend.
   • Design a feed pipeline that dynamically fetches new data as the user scrolls through a set number of videos.
   • Implement a mechanism to refresh the feed dynamically, enabling seamless scrolling for additional content.

Technologies Used

Frontend

Backend

Tools

Deployment

Project Overview

1. Integration with PayloadCMS:

   • Utilize PayloadCMS for efficient content management.
   • Create collections and models for posts and media content.

2. Database Setup:

   • Establish a connection to MongoDB Atlas.
   • Create distinct collections for posts and media.

3. Custom API Endpoint:

   • Develop a custom API endpoint at /posts/videos/stream to exclusively fetch "short video" posts.

4. Frontend Development:

   • Utilize React for building a user-friendly interface.
   • Design a feed pipeline for fetching and displaying videos dynamically.
   • Implement dynamic feed refresh for seamless scrolling.

5. Evaluation Criteria:

   • Ensure proper PayloadCMS integration for content management.
   • Validate the setup of distinct collections in MongoDB Atlas.
   • Confirm the correct implementation of the custom API endpoint for short video posts.
   • Assess the frontend design for an intuitive video feed experience.

Getting Started

1. Clone the repository to your local machine.
2. Install dependencies using npm install.
3. Configure PayloadCMS according to the provided installation guide.
4. Set up MongoDB Atlas and create collections for posts and media.
5. Run the development server with npm start.

Contribution Guidelines

Contributions to enhance the PayloadCMS integration or improve the frontend experience are welcome. Please follow the standard contribution guidelines, and feel free to open issues or pull requests.

Show Your Support

If you find this project interesting or valuable, consider giving it a ⭐️.