Code Monkey home page Code Monkey logo

netflix2-0's Introduction

Netflix 2.0

This project is a school project aimed at learning and practicing various Git and GitHub concepts, such as branches, merges, rebases, commits, and more. Additionally, we have focused on creating tests for every component in the project.

Getting Started

To get started with this project, you can follow these steps:

  1. Clone the repository: git clone https://github.com/Sillen00/Netflix2-0.git
  2. Install the necessary dependencies: npm install
  3. Run the project locally: npm run dev

Features

  • Feature: Bookmark Movies Description: Users can bookmark their favorite movies. These bookmarks are stored in the session storage, allowing users to revisit their bookmarked movies during the same browsing session. To view all bookmarked movies, users can navigate to the 'Bookmarked' page.

Testing

We have created tests for many of the react components in the project to ensure its functionality and maintainability. To run the tests, you can use the following command:

  1. Run all tests npm test

Live Page

You can access the live page of this project on Netlify. Click here to visit the live page.

Participents

Here are the Participents Github pages:

Feel free to check out our other projects!

netflix2-0's People

Contributors

sillen00 avatar leonbjorklund avatar ellensofia avatar moamoa07 avatar edvindjulic avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Forkers

ellensofia

netflix2-0's Issues

Create bookmarkPage

Skapa bookmark sidan och skapa funktionalitet för att kunna bokmärka en film.
Har man inga filmer i sin bokmärk lista så visas ett meddelande att listan är tom.

Update styling of ImageCard

Sätta position absolut på bookmark
Lägga bakgrund på rating och lägga bredvid year
Uppdatera så att movieView har samma styling på med rating och year
Ändra antal som visas i karusellen

Create searchbar

Sökfältet ska visa resultaten med position absolute under headern med MovieList.tsx komponenten och man ska kunna klicka på ett resultat för att ta sig till FilmView.tsx page sidan där man kan visa datan från den valda filmen.

Designen på filmview page görs i ett annat issue.

Create carousel

  • Bildkarusell som ska innehålla movieCard komponenten.
  • Ovanför karusellen ska det finnas en titel, exempelvis: "Trending"

Update components and pages

components:

  • Ändra p till Mantines Text
  • Ändra b till Text med styling font-weight bold
  • Ändra div till Mantines Box
  • Ändra a till Mantines Link
  • Ta bort utkommenterad kod som inte ska användas
  • Kommentera kod

pages:

  • Ändra div till Box/Flex (det som blir bäst)

Övrigt: Ta bort SearchField & MovieList filer som inte används

Create movieCard

  • Ska innehålla en thumnail.
  • Vid varje thumbnail ska årtal och åldergräns visas på filmen.
  • Om thumbnailen ej är tillgänglig ska man använda en placeholder.
  • Ska finnas en knapp för att bokmärka.

Test workflow

Testa så att workflow funkar innan vi kodar själva

fix styling

Lägga till margins på sidorna och se till så att footern ligger i botten.

Create footer

Lägg till footer med länkar till de olika sidorna samt logga och eventuellt våra github länkar.

Create header

Skapa header, lägg in sökfältet, implementera en hamburgar meny samt kolla igenom så allt funkar som planerat.

Compare and imitate tests.

Ändra så att alla test använder samma routing.
Ta bort interfaceprops på movieCard. (behövs inte)
Flytta search test till app.test.
Kommentera koden.

Create categoryButtons

  • Skapa knappar för alla kategorier.
  • När man klickar på en kategori ska movieList filtreras.

Create movieView

Detaljvy för en film

  • Ska innehålla en bild och text till vald film
  • Ska innehålla en knapp för bookmark

Add a README

Add a README file to the projekt and write it.

Create hamburger menu

  • Ska användas i desktop, tablet och mobile
  • Ska kunna gå att öppna och stänga
  • Ska kunna navigera med länkarna i menyn

Test

  • Ska gå att öppna och stänga
  • Ska synas i dokumentet

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.