Frontend Mentor - Entertainment Web App Solution

This is a personal project inspired by the Entertainment web app challenge on Frontend Mentor, where the goal is to take the challenge to the next level by integrating it with The Movie Database (TMDB) API for a more dynamic and data-driven application. Frontend Mentor challenges help you improve your coding skills by building realistic projects, and this project aims to enhance those skills even further with additional features and a more complex backend.

Table of Contents

• Overview
  • The Challenge
• Frontend
  • Built With
• Backend
  • Built With
• My Process
• Useful Resources
• Author
• Acknowledgments

Overview

The Challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size.
• See hover states for all interactive elements on the page.
• Navigate between Home, Movies, TV Series, and Bookmarked Shows pages.
• Add/Remove bookmarks from all movies and TV series.
• Search for relevant shows on all pages.
• Extra: Build this project as a full-stack application using the TMDB API.
• Extra: Implement an authentication flow with sign-up/# functionality, inspired by the original challenge but enhanced with real-world data from TMDB.
• Extra: Create a secure authentication system that allows users to use their TMDB account data to # and log in. The system securely saves the link to their TMDB profile in your database, ensuring user data is handled safely and efficiently.

Frontend

Built With

• React - A JavaScript library for building user interfaces.
• React DOM - Provides DOM-specific methods that can be used at the top level of your app.
• React Redux - Official React bindings for Redux.
• Redux Toolkit - The official, opinionated, batteries-included toolset for efficient Redux development.
• React Router DOM - Declarative routing for React.js.
• Sass - CSS preprocessor for more manageable and maintainable stylesheets.
• Axios - Promise-based HTTP client for the browser and Node.js.

Backend

Built With

• Node.js - JavaScript runtime for server-side development.
• Express.js - Web framework for Node.js.
• MongoDB - NoSQL database.
• Mongoose - MongoDB object modeling for Node.js.
• bcrypt - Library for hashing passwords.
• express-rate-limit - Rate limiting middleware.
• express-validator - Validation middleware for Express.
• Winston - Logging library for Node.js.
• dotenv - Environment variable management.
• helmet - Security middleware for HTTP headers.
• cors - Middleware to enable CORS.
• nodemon - Utility to automatically restart the server.
• jsonwebtoken - Library for creating and verifying JSON Web Tokens (JWTs).

My Process

1. Initial Setup

   • Set up the project environment and created initial documentation.

2. Account Functionality

   • Developed user account logic, including sign-up and login processes.
   • Integrated TMDB API for user authentication and data retrieval.

3. Core Features

   • Integrated TMDB API for fetching movies and series.
   • Implemented a carousel for different categories of data and series.
   • Added search, pagination, bookmark, and favorites functionality.
   • Added rating functionality for movies and series.

4. Refactor UI and Code Logic

   • Refactored UI for improved responsiveness and design consistency.
   • Refined code logic for better performance and maintainability.

Useful Resources

Frontend

• React Documentation - Comprehensive guide for using React, including hooks and context.
• Redux Toolkit Documentation - Official documentation for Redux Toolkit, including best practices and usage examples.
• React Router Documentation - Guide for using React Router for declarative routing in React applications.
• Sass Documentation - Official guide for using Sass, including variables, mixins, and nesting.
• Axios Documentation - Documentation for Axios, including how to perform HTTP requests and handle responses.

Backend

• Express.js Documentation - Comprehensive guide for using Express, including routing, middleware, and API creation.
• Mongoose Documentation - Guide for MongoDB object modeling with Mongoose, including schema definitions and querying.
• Winston Documentation - Documentation on setting up logging with Winston, including different logging transports and levels.
• Helmet Documentation - Guide for enhancing HTTP security headers using Helmet.
• CORS Documentation - Middleware for handling Cross-Origin Resource Sharing (CORS) in Express applications.
• bcrypt Documentation - Guide for hashing passwords with bcrypt, including API usage and examples.
• dotenv Documentation - Documentation for managing environment variables with dotenv.
• jsonwebtoken Documentation - Guide for creating and verifying JWTs for secure authentication.
• Nodemon Documentation - Tool for automatically restarting the server during development.
• Express-Rate-Limit Documentation - Documentation on rate limiting to protect APIs from abuse.
• Express-Validator Documentation - Guide for validating and sanitizing user input.

Author

• Frontend Mentor - @TedJenkler
• LinkedIn - Teodor Jenkler
• X - @TJenkler
• Discord - TedJenkler

Acknowledgments

(Provide any acknowledgments here if necessary.)