Entertainment Web App

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • 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
• Bonus: Build this project as a full-stack application

Screenshot

Links

• Live Site URL: Vercel

My process

Built with

• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• MongoDB - Database
• Node.js -JS Runtime
• Tailwind CSS - CSS Framework
• Framer Motion - Animation Styles

What I learned

Data fetching in Next.js using getServerSideProps

export async function getServerSideProps(context) {
  let response = await fetch(`${server}/api/media`);
  // extract the data
  let data = await response.json();

  return {
    props: {
      media: data["message"],
    },
  };
}

How to get information from a database.

async function getMedia(req, res) {
  try {
    // connect to the database
    let { db } = await connectToDatabase();
    // fetch the media
    let media = await db.collection("media").find({}).toArray();
    // return the media
    return res.json({
      message: JSON.parse(JSON.stringify(media)),
      success: true,
    });
  } catch (error) {
    // return the error
    return res.json({
      message: new Error(error).message,
      success: false,
    });
  }
}

Updating values in Database

async function updateMedia(req, res){
  try{
    //connect to database
    let {db} = await connectToDatabase();

    //update the bookmark status
    await db.collection('media').findOneAndUpdate(
            {
              _id: new ObjectId(req.body)
            },

            [
              { $set: { isBookmarked: { $not: "$isBookmarked" } } }
            ],

            {returnDocument:"after",
              returnOriginal: false},

    ).then(updatedDocument => {
      return res.json({
        message: "Bookmark State Changed!",
        success: true,
        doc: updatedDocument
      })
    })

Continued development

Personally, this project was a good learning experience when it comes to backend development and interacting with a database. I want to grow my knowledge base in the Next.js framework.

Useful resources

• Learn How to Use Next.js Environment Variables and NEXT_PUBLIC - This video helped me wrap my mind around using environment variables in my Next.js code
• The Next.js Documentation - Very well written docs that made my introduction to Next.js a bit easier.
• How to Integrate MongoDB Into Your Next.js App - I didn't use all of this, but it helped me understand the process of integrating a database in a web app. I will refer to this article frequently going forward

Author

• Website - Rodderick Garland

Acknowledgments

Special thanks to Tyrell Curry for collaborating with me on this project.