Frontend Mentor - Entertainment web app solution

This is a solution to the Entertainment web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic project.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Start project
  • Configuration
    • Set up a MongoDB database
    • Set up environment variables
  • Run Next.js in development mode
  • Built with
  • What I learned
  • Continued development
  • 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
• authentication - (sign-up/login)

Screenshot

Links

• Frontend Mentor Solution URL: Entertainment web app with NextJs , MongoDb and Next Auth
• Live Site URL: Entertainment web app

My process

Start project

Execute create-next-app with

• npm

npx create-next-app --example with-mongodb with-mongodb-app

• Yarn

yarn create next-app --example with-mongodb with-mongodb-app

• or pnpm to bootstrap the example:

pnpm create next-app --example with-mongodb with-mongodb-app

The above command will create a project that is bootstrapped with mongodb

Configuration

Set up a MongoDB database

Set up a MongoDB database either locally or with MongoDB Atlas for free.

Set up environment variables

Copy the env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Set each variable on .env.local:

• MONGODB_URI - Your MongoDB connection string. If you are using MongoDB Atlas you can find this by clicking the "Connect" button for your cluster.

Run Next.js in development mode

npm install
npm run dev

# or

yarn install
yarn dev

Your app should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.

You will either see a message stating "You are connected to MongoDB" or "You are NOT connected to MongoDB". Ensure that you have provided the correct MONGODB_URI environment variable.

When you are successfully connected, you can refer to the MongoDB Node.js Driver docs for further instructions on how to query your database.

Built with

• React - JS library
• Next.js - React framework
• Next Auth - Authentication
• Tailwind - styling
• Mongodb - data storage
• CSS Grid
• Mobile-first workflow

What I learned

• How to Scroll Horizontally in React JS - Styled With Tailwind CSS - Javascript
• Floating Label Input with React + Tailwind CSS + Hook Form
• intergrating mongodb into your nextjs app
• How to Integrate MongoDB Into Your Next.js App
• generate a secret token using the following url secret token generator

Continued development

Toggle the bookmark button so that a movie/tv series can be bookmarked or vice-versa

Useful resources

Author

• Website - Chamu Mutezva
• Frontend Mentor - @ChamuMutezva
• Twitter - @ChamuMutezva

Acknowledgments