Personal Dashboard Management System

Welcome to the Personal Dashboard Management System! This web application is designed to offer an easy-to-use platform for individuals to manage and upload various types of content, including images, videos, blogs, news, quotes, and programs. The system comes with a fully functional dashboard for seamless content management.

Features

• Image Uploading: Easily add, edit, and manage images in the gallery section.
• Video Embedding: Share YouTube or other video links with titles and descriptions.
• Blog Management: Write and publish blogs with real-time updates.
• News Posting: Post news articles, including titles, images, and descriptions.
• Quote Sharing: Upload motivational or personal quotes.
• Program Scheduling: Add programs with start and end dates, providing users with upcoming event details.
• Dashboard Overview: Manage all content types from a single, user-friendly interface.

Dashboard Functionalities

1. Image Management:

   • Upload images with descriptions.
   • View image previews before saving.
   • Organize images in the gallery.

2. Video Post Creation:

   • Embed YouTube videos.
   • Add titles, descriptions, and speaker information.
   • Schedule video posts with date and time.

3. Blog Post Management:

   • Create new blog entries with titles, descriptions, and thumbnail images.
   • Preview blogs before publishing.
   • Edit or delete existing posts.

4. News Posting:

   • Post news updates with multimedia support (images, videos).
   • Add detailed descriptions with a date of publication.
   • Edit or remove outdated news posts.

5. Quotes Section:

   • Add inspiring or personal quotes.
   • Manage the list of quotes with the ability to update or remove.

6. Program Scheduling:

   • Create programs with start and end times.
   • Add a description and share the event details with others.
   • Manage the schedule of past and upcoming events.

Technologies Used

• Frontend: React.js, Tailwind CSS, React Icons
• Backend: Node.js, Express.js
• Database: MongoDB for data storage and management
• Form Handling: react-hook-form for smooth form validation and submission
• Notifications: SweetAlert2 for beautiful alert boxes and notifications
• Routing: React Router DOM for smooth navigation between dashboard sections
• API Handling: Axios for seamless backend communication

Installation

1. Clone the repository:

   git clone https://github.com/your-repo/personal-dashboard.git
   cd personal-dashboard

2. Install dependencies:

   npm install

3. Run the application locally:

   npm start

4. Backend Setup:

   • Ensure that you have MongoDB installed.
   • Set up the required environment variables for connecting to the database in a .env file:

   MONGO_URI=your_mongo_uri
   PORT=your_port_number

5. Start the backend server:

   npm run server

Usage

• Login: Users must log in to access the dashboard.
• Navigation: The dashboard includes sections for images, videos, blogs, news, quotes, and programs, all accessible via a sidebar.
• Content Management: Users can add, edit, or delete any type of content directly through the dashboard.

Screenshots

Dashboard Overview

Image Upload

Video Post Creation

Future Improvements

• User Role Management: Add admin and regular user roles for better control.
• Notification System: Implement push notifications for content updates.
• Analytics Dashboard: Add insights and analytics to monitor website traffic and content engagement.

Contributing

Contributions are welcome! Feel free to fork the repository and submit pull requests to improve the system.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by [Robius Sani]

server