https://github.com/leodubosclard/netflex

A React application in order to recreate NetFlix and improve Web competencies
https://github.com/leodubosclard/netflex

expressjs javascript netflix netflix-clone netflix-clone-react nodejs react reactjs

Last synced: 6 months ago
JSON representation

A React application in order to recreate NetFlix and improve Web competencies

Host: GitHub
URL: https://github.com/leodubosclard/netflex
Owner: leodubosclard
License: gpl-3.0
Created: 2022-03-01T19:13:49.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2022-04-20T17:07:32.000Z (over 3 years ago)
Last Synced: 2025-04-16T11:39:14.849Z (9 months ago)
Topics: expressjs, javascript, netflix, netflix-clone, netflix-clone-react, nodejs, react, reactjs
Language: JavaScript
Homepage:
Size: 22.3 MB
Stars: 4
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md

Awesome Lists containing this project

README

          # NetFlex

## Description

Recreate a web application like Netflix to train and learn soft / web level technologies

## Technologies utilisées

- Docker (deployement) :

	- docker-compose

	- Dockerfile

- Postman (API tests)

### Frontend

- ReactJS

- HTML

- CSS

- JavaScript

- TailwindCSS

### Backend

- NodeJS

- JavaScript

- ExpressJS

### Base de données

- MariaDB

- PhpMyAdmin

- SQL

## Schema base de donnée

*netflex.sql :*

```sql

CREATE DATABASE IF NOT EXISTS netflex

    COLLATE utf8mb4_unicode_ci;

USE netflex;

CREATE TABLE IF NOT EXISTS user

(

    id BIGINT unsigned NOT NULL AUTO_INCREMENT,

    firstname VARCHAR(255) NOT NULL,

    name VARCHAR(255) NOT NULL,

    nickname VARCHAR(255) UNIQUE,

    email VARCHAR(255) UNIQUE,

    password VARCHAR(255) NOT NULL,

    create_at DATETIME NOT NULL DEFAULT current_timestamp,

    image_url TEXT NOT NULL DEFAULT "https://cdn-icons-png.flaticon.com/512/5089/5089983.png",

    PRIMARY KEY (id)

);

CREATE TABLE IF NOT EXISTS films

(

    id BIGINT unsigned NOT NULL AUTO_INCREMENT,

    show_id VARCHAR(255) UNIQUE,

    type VARCHAR(255) NOT NULL,

    title VARCHAR(255) NOT NULL,

    director VARCHAR(255),

    cast text,

    country VARCHAR(100) NOT NULL,

    date_added DATETIME NOT NULL,

    release_year VARCHAR(4) NOT NULL,

    rating VARCHAR(5) NOT NULL,

    duration VARCHAR(10) NOT NULL,

    listed_in VARCHAR(100) NOT NULL,

    description text NOT NULL,

    picture text NOT NULL,

    PRIMARY KEY (id)

);

CREATE TABLE IF NOT EXISTS logs

(

    id BIGINT unsigned NOT NULL AUTO_INCREMENT,

    user_email VARCHAR(255) NOT NULL,

    connected_at DATETIME NOT NULL DEFAULT current_timestamp,

    user_agent VARCHAR(255) NOT NULL,

    navigateur VARCHAR(255) NOT NULL,

    platform VARCHAR(255) NOT NULL,

    language VARCHAR(255) NOT NULL,

    encoding VARCHAR(255) NOT NULL,

    is_on_mobile BOOLEAN NOT NULL DEFAULT false,

    ip_address VARCHAR(255) NOT NULL,

    country VARCHAR(255) NOT NULL,

    PRIMARY KEY (id)

);

```

## Installation

To install NetFlex at home, please follow the instructions bellow at the root of the project (The docker-compose is not yet functional):

**Attention : If you are lazy just run the *``installation.sh``* script at the root of the project. Then refer to the *Quickstart* part**

```bash

cat netflex.sql | mysql -u root -p

```

```bash

cd backend

node json_to_db.js

npm install

```

```bash

cd frontend

npm install

```

## Quickstart

Always at the root of the project, start the API (in a first terminal) :

```bash

cd backend

npm run start

```

or (if you use Nodemon) :

```bash

cd backend

npm run dev

```

Then, start the React application :

```bash

cd frontend

npm start

```

React will automatically redirect you to the home page of the website (localhost:3000)

## Routes Backend *(en développement)*

|Route|Method|Protected|Description|

|-----|------|---------|-----------|

|/register|POST|NO|Register a new user|

|/login|POST|NO|Connect a user|

||||

|/films|GET|YES|Get **all** movies and tv shows in the database|

|/films/type|POST|YES|Get **10** movies or tv shows depending on type given in the request body|

|/films/:id|GET|YES|Get a film by its ID|

|/films/browse|POST|YES|Get films by keywords search|

||||

|/user|GET|YES|Get user information using his Token|

|/user|DELETE|YES|Delete user using his Token|

|/user/profile_image|PUT|YES|Change user profile picture using an image url and his token|

## Features Frontend *(in development)*

	Home page (not connected)

	

![Home Not Logged In](assets/home_not_logged_in.png)

	Home page (connected)

![Home Logged In](assets/home_logged_in.png)

	Login page

![Login](assets/login.png)

	Register page

![Register](assets/register.png)

	Account settings (base)

![AccountBasics](assets/account_basics.png)

	Account settings (profile picture choice)

![AccountPP](assets/account_pp.png)

	Account settings (delete account)

![AccountDeleteModal](assets/account_delete_modal.png)

	Movies page

![Movies](assets/movies.png)

	TV-Shows page

![TV Shows](assets/tvshows.png)

	Search results page

![Search](assets/search_bar.png)

	404 page

![404](assets/landing.png)

# Mainteners

- [Léo Dubosclard](https://www.github.com/ZerLock)

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/leodubosclard/netflex

Awesome Lists containing this project

README