Git Product home page Git Product logo

app-movie's Introduction

app-movie

A Movies/Series Application, powered by the React library on the Client-side. It provides users with the access to list of series and movies.

Hosted Url

https://www.loom.com/share/40959560743e4a2897767e7fb0c5319f

Features

App Features
  • Home Page to view popular titles - Popular Series and Movies
  • View All Movies page
  • View All Series page

Technology

  • HTML
  • React Library
  • CSS
  • Styled Component

Installation

  • Clone the repo: Run git clone https://github.com/yomigeek/app-movie.git in the folder where you want the repo to be saved.
  • Navigate into the newly created folder and install the dependencies using your command line: cd folder_name && npm install
  • Start the app in the development environment by using npm run dev and for production use npm run start
  • Make a GET request to http://localhost:3000 or go to your browser and use the url http://localhost:3000
  • Create an .env file in your root folder using the detail in the .env.example file and updating the variables values.

Pages

  • Home Page: / or /home
  • Series Page: /series
  • Movies Page: /movies

Questions:

How did you decide on the technical and architectural choices used as part of your solution?
  1. In terms of architectural choices such as the folder structure, I followed a similar pattern to Container-View/Presentational, where the components folder contains the presentational layer such as the navigation specific components like header, footer, etc., and the Pages includes all the various features/screens.

  2. Further into the design/architectural pattern, the CSS in JavaScript is used in this project, where each component is built using the styled components, as it allows room for dynamic css style naming and also flexible in crafting the element designs.

  3. Components which are used across multiple pages are grouped under the common folder in the component folder.

  4. Axios was used for making calls to the external JSON file containing the data.

Are there any improvements you could make to your submission?
  1. Integrate extra features for better user experience.
What would you do differently if you were allocated more time?
  1. Add more features such as filter, search.
  2. Integrate test suites for pages assertions such as snapshot testing

Author

Made with <3 by Yomi Olaoye ;)

app-movie's People

Contributors

yomigeek avatar

Watchers

 avatar  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.