Back to projects
Seriesly (My first project)

Seriesly (My first project)

Niklas Röttger / August 1, 2022

Overview

Seriesly helps you keep track of the TV series you're watching in an intuitive and organized way. You can log in to your account, search for your favorite series, and add them to your "Currently Watching" list. Never lose track of your progress—mark episodes as watched so you always know where you left off. The app fetches series data from an API, ensuring you have up-to-date information at your fingertips. Whether you're juggling multiple shows or just want a simple way to stay on top of your watchlist, this app makes it effortless.

Features

  • Log in to your account.
  • Fetch TV series from an API.
  • Search for specific series.
  • Add series to your "Currently Watching" list.
  • Mark episodes as watched to keep track of your progress.

Technologies

  • React – The JavaScript library for building user interfaces.
  • Next.js – The React framework used for development.
  • styled-components – CSS-in-JS library for styling components.
  • SWR – Data fetching and state management
  • MongoDB – The database used for persisting todos.
  • TMDB API – The API used for fetching movie and TV show data.

Deployment

The Project is deployed using Vercel and can be found here.

Try out the project locally:

  1. Clone the repository:
git clone git@github.com:NikRoe/capstone-project.git
cd capstone-project
  1. Install dependencies:
npm install
  1. Configure environment variables:

  • Create a .env.local file in the root directory of the project.

  • Add the following variables to .env.local:

TMDB_API_KEY=your_tmdb_api_key
MONGODB_URI=your_mongodb_uri
GITHUB_ID=your_github_id
GITHUB_SECRET=your_github_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXTAUTH_URL=your_nextauth_url
NEXTAUTH_SECRET=your_nextauth_secret

  • Get your API keys and credentials:

    • TMDB API Key: Obtain it from The Movie Data Base.
    • GitHub ID & Secret: follow this guide to retrieve them.
    • Google Client ID & Secret: Follow this guide to generate them.
  1. Run the project:
npm run dev