Git Product home page Git Product logo

liteflix-ui's Introduction

Liteflix - User Interface

Implementation Details

This is an Single Page Application built on Next.js v14, leveraging a hybrid rendering strategy that integrates server components for server actions and client components for utilizing browser and React APIs on the client side.

Tech Stack

  • Next.js - v14 using the App router for hybrid server-side rendering and client-side rendering.
  • React - v18 for building interactive user interfaces.
  • TypeScript - for type safety and improved developer experience.
  • Styled-components - as a CSS-in-JS library for styling components.
  • React-device-detect - for responsive design based on the user's device.
  • Google OAuth2 - for secure authentication and user management.

Project Structure

The project structure is organized as follows:

  • ./app: Contains main layout and page that makes uses of the new Next.js routing system.
  • ./components: Reusable React components used across the app.
  • ./lib: Contains utility functions, API integrations, global styles and Authentication logic.
  • ./types: Common TypeScript types.
  • ./public: Static assets such as images and fonts.

API Integration

Liteflix connects to two different APIs:

  1. Liteflix API: A Node.js RESTful service that allows pushing a movie and retrieving a list of movies associated with the user. It also provides authentication endpoints that utilize Google OAuth2.
  2. themoviedb API: Provides access to a colleciton of movies, offering detailed metadata and media assets.

Deployment

The deployed version of Liteflix is hosted at https://liteflix.patriciomancini.net.

Please note that to authenticate into the app through Liteflix, you need to add me to add your Google account to the list of test accounts. Otherwise, you won't be able to log in and test the authenticated functionality.

Scripts

In the project directory, you can run:

  • npm run dev: Runs the app in the development mode.

  • npm run build: Builds the app for production deployment.

  • npm start: Starts the production server after a successful build.

  • npm run lint: Lints the codebase for coding standards and best practices.

  • npm test: Runs tests related to the project using Jest.

liteflix-ui's People

Contributors

patricio-mancini avatar

Watchers

 avatar

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.