Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daaniissh/movie-dashbord
MovieDash Dashboard is a MERN (MongoDB, Express.js, React.js, Node.js) project that provides a user-friendly interface for managing movie genres and adding movies to the database. It includes three main pages: the home page, the add genre page,login page , signup page and the add movie page.
https://github.com/daaniissh/movie-dashbord
mern-project nodejs tailwindcss
Last synced: about 1 month ago
JSON representation
MovieDash Dashboard is a MERN (MongoDB, Express.js, React.js, Node.js) project that provides a user-friendly interface for managing movie genres and adding movies to the database. It includes three main pages: the home page, the add genre page,login page , signup page and the add movie page.
- Host: GitHub
- URL: https://github.com/daaniissh/movie-dashbord
- Owner: daaniissh
- Created: 2023-08-28T12:04:50.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-28T12:35:34.000Z (over 1 year ago)
- Last Synced: 2023-08-28T16:05:08.073Z (over 1 year ago)
- Topics: mern-project, nodejs, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 8.86 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Movie Dashboard Project
### Working video
https://github.com/daaniissh/movie-dashbord-watchlatter/assets/102005928/553907cf-1fbc-4b9c-96a5-4629d4b2b8e2
### Overview
This project is a Movie Dashboard created using the MERN stack (MongoDB, Express.js, React.js, and Node.js). The dashboard consists of three main pages: Home Page, Add Genre Page,login page, signup page and Add Movie Page. The frontend is developed using React.js, toastify and Tailwind CSS with the DaisyUI plugin, while the backend is built with Node.js, Express.js, and Cors. Axios is used for making HTTP requests.
### Technology Stack
**Frontend**
- React.js
- Tailwind CSS
- React-router
- DaisyUI
- Axios
- toastify
- cloudinary
**BackEnd**
- Node.js
- mongoDb
- Express.js
- nodemailer
- Cors
## Pages
### Home Page
The Home Page serves as the main landing page of the Movie Dashboard. It provides an overview of the existing movies and genres stored in the database. Users can browse, The page also displays relevant information about each movie, such as the title, genre,image, and rating.
### Add Genre Page
The Add Genre Page allows users to add new genres to the movie database. Users can enter the name of the genre and submit the form to create a new genre entry. and edit and delete genres.
### Add Movie Page
The Add Movie Page enables users to add new movies to the dashboard. Users can input details such as the movie title, genre, and rating. The form includes validation to ensure that all required fields are filled and that the entered data is in the correct format. Upon submission, the movie is added to the database and reflected on the Home Page.
### Login Page in React.js:
The Login page in React.js is the initial screen where users can authenticate themselves to access the application or website. It typically consists of a form where users can input their credentials, such as username/email and password, and a submit button to initiate the login process. React.js allows developers to create an interactive and responsive login page by leveraging its component-based architecture and state management capabilities. With React.js, developers can handle form validation, implement secure authentication mechanisms, and provide a seamless user experience during the login process.
### Signup Page in React.js:
The Signup page in React.js is designed to allow new users to create an account within an application or website. It provides a registration form where users can input their personal information, such as username, email address, password, and any additional required fields. React.js empowers developers to build an intuitive and user-friendly signup page by utilizing its powerful form handling and validation features. Developers can leverage React.js components and state management to implement real-time feedback, password strength indicators, and other interactive elements to enhance the registration experience.
### Watch Later Page in React.js:
The Watch Later page in React.js is a feature commonly found in video streaming applications where users can save videos to watch at a later time. This page allows users to maintain a personalized list of videos they wish to watch in the future. React.js enables developers to create a dynamic and responsive Watch Later page by utilizing its component-based approach and data handling capabilities. With React.js, developers can implement features like adding/removing videos, organizing the list, and providing seamless integration with other parts of the application. This ensures users have a convenient and enjoyable experience while managing their "watch later" queue.