- Introduction
- Features
- Tech Stack
- Installation & Run
- Contribute
- Contributors
- License
- Contact
- Acknowledgment
The Entertainment App allows users to search for their preferred movies or TV series and provides the added functionality of bookmarking their favorites. It features a dynamic Home page, dedicated pages for Movies and TV series, a Bookmarks page for personalized content curation, as well as Sign Up and Login pages for user authentication.
The application offers several notable features:
-
Home Page: The Home page serves as the central hub, showcasing recent and trending movies and TV series. Users can explore captivating content through an organized grid system.
-
Movies Page: The Movies Page offers a diverse collection of films across various genres, catering to different preferences.
-
TV Series Page: The TV Series Page presents an extensive selection of television shows spanning different genres.
-
Bookmarks Page: The Bookmarks page allows users to curate their own entertainment library by adding or removing bookmarked movies and TV series.
-
Sign Up Page: Aspiring users can register using a form, with an optional profile image inclusion.
-
Login Page: Returning users can securely access the application, retaining access to their bookmarked items.
Entertainment App is built using the following technologies:
- HTML: Hypertext Markup Language, the standard markup language for creating web pages and web applications. It structures the content of web pages using elements and tags.
- CSS: Cascading Style Sheets, a style sheet language used to define the presentation of HTML and XML documents. It controls the layout, design, and appearance of web pages.
- Tailwind CSS: A utility-first CSS framework that provides a set of pre-designed utility classes to quickly build custom designs without writing custom CSS.
- React: A JavaScript library for building user interfaces, developed by Facebook. It allows developers to create reusable UI components and manage the state of complex applications efficiently.
- Redux-toolkit: An official, opinionated toolset for efficient Redux development, designed to simplify the process of writing Redux logic, such as actions, reducers, and selectors.
- Node.js: A JavaScript runtime environment that allows developers to run JavaScript code server-side. It provides an event-driven architecture and asynchronous I/O for building scalable and high-performance applications.
- Express.js: A minimalist web application framework for Node.js, designed for building web servers and APIs. It simplifies the process of handling HTTP requests, routing, and middleware integration.
- MongoDB: A NoSQL database that stores data in flexible, JSON-like documents. It offers high scalability, flexibility, and performance, making it suitable for handling large volumes of data in modern web applications.
- TMDB API: The Movie Database API, a free and open API that provides access to a vast collection of movie and TV series data. It allows developers to fetch information about movies, TV shows, actors, and more for integration into their applications.
The Entertainment App is designed to provide users with a platform to search for their favorite movies and TV series while also enabling them to bookmark their preferred content for easy access. Key features include:
- Returning users can securely access the application, retaining access to their bookmarked items.
- Dynamic Home page showcasing trending content
- Dedicated pages for Movies and TV series
- Personalized Bookmarks page for user content curation
- User authentication via Sign Up and Login pages Technologies, tools, and frameworks used:
- HTML, CSS, Tailwind CSS for frontend
- React with Redux-toolkit for state management
- Node.js with Express.js for backend
- MongoDB for database management
- TMDB API for fetching movie and TV series data Functionality:
- Users can search for movies and TV series.
- They can bookmark their favorite content for later viewing.
- New users can sign up, optionally adding a profile image, while returning users can securely log in to access their bookmarks.
The API documentation includes:
- Endpoints: API endpoints for fetching movie and TV series data, user authentication, and bookmark management.
- Request/Response Examples: Examples of API requests and corresponding responses.
- Authentication Methods: Explanation of authentication mechanisms, such as JWT tokens.
- Sample code snippets may be provided for clarity.
The database design includes:
- Overview of Schema: Description of the database schema, including tables and relationships.
- ER Diagram: Visual representation of the database schema for clarity.
- Entities and Attributes: Explanation of entities and their attributes for better understanding of data structure.
Implemented best practices in the project include:
- Modular code structure for maintainability.
- Input validation to prevent security vulnerabilities.
- Proper error handling to enhance user experience.
- Use of environment variables for sensitive data protection.
- Implementation of JWT for secure authentication.
- Data encryption for protecting user information.
- Code commenting for readability and easier collaboration.
- Regular code reviews to ensure code quality.
- Version control with Git for efficient team collaboration.
- Continuous integration and deployment for automated testing and deployment processes.
-
Clone the repository from GitHub:
git clone https://github.com/Subhrojoti/Entertainment-App.git -
Redirect to the project folder:
cd Entertainment App (For UI) cd backend (For backend server) -
Install the required dependencies:
npm install -
Start server:
npm start[!NOTE] Access the application in your web browser at
http://localhost:5173(base URL)
Contributions are welcome! If you'd like to contribute, please follow our Contribution Guidelines.
This project is Distributed under the ISC License. See LICENSE for more information.
This project was initialized with Create-React-Vite-App, a next-generation frontend tooling for React development.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:5173 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React Vite App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify